Chắc chắn bạn tương tác với ít nhất một biểu mẫu trên Web mỗi ngày. Cho dù bạn đang tìm kiếm nội dung hay đăng nhập vào tài khoản e-mail hoặc trang Facebook của mình, sử dụng biểu mẫu trực tuyến là một trong những tác vụ phổ biến nhất được thực hiện trên Web. Với tư cách là nhà thiết kế và nhà phát triển, việc tạo các biểu mẫu có một sự đơn điệu nhất định về nó, đặc biệt là viết các tập lệnh xác thực cho chúng. HTML5 giới thiệu một số thuộc tính mới, loại đầu vào và các thành phần khác cho bộ công cụ đánh dấu của bạn. Trong bài viết này, chúng tôi sẽ tập trung vào các thuộc tính mới với một bài viết trong tương lai xem xét các loại đầu vào mới
Như chúng ta sẽ thấy, những tính năng mới này sẽ giúp cuộc sống của bạn trở nên dễ dàng hơn trong khi vẫn mang lại trải nghiệm thú vị cho người dùng. Điều tốt nhất về tất cả điều này? . Tuy nhiên, chúng ta sẽ bắt đầu với một lịch sử [rất] ngắn gọn về các biểu mẫu HTML5
Đây là bài viết là một đoạn trích từ Chương 6 của Bắt đầu HTML5 và CSS3. The Web Evolved của Christopher Murphy, Oli Studholme, Richard Clark và Divya Manian, do Apress xuất bản
Ghi chú. Vì bài viết này là một đoạn trích sách, nên việc hiển thị trình duyệt của các thuộc tính và loại đầu vào có thể đã thay đổi kể từ khi chụp ảnh màn hình. Ngoài ra, hỗ trợ trình duyệt có thể đã tăng lên kể từ khi xuất bản, vì vậy vui lòng tham khảo các liên kết ở cuối bài viết để biết trạng thái hỗ trợ trình duyệt hiện tại
Lịch sử các biểu mẫu HTML5
Phần biểu mẫu của HTML5 ban đầu là một đặc điểm kỹ thuật có tiêu đề Biểu mẫu web 2. 0 đã thêm các loại điều khiển mới cho biểu mẫu. Bắt đầu bởi Opera và được chỉnh sửa bởi nhân viên Opera khi đó là Ian Hickson, nó đã được đệ trình lên W3C vào đầu năm 2005. Công việc ban đầu được thực hiện theo W3C. Sau đó, nó được kết hợp với Ứng dụng web 1. 0 để tạo cơ sở cho đặc tả HTML5 của Nhóm Công tác Công nghệ Ứng dụng Siêu văn bản Web [WHATWG] đột phá
Sử dụng các nguyên tắc thiết kế HTML5
Một trong những điều tốt nhất về biểu mẫu HTML5 là bạn có thể sử dụng gần như tất cả các loại và thuộc tính đầu vào mới này ngay bây giờ. Họ thậm chí không cần bất kỳ shiv, hack hay cách giải quyết nào. Điều đó không có nghĩa là tất cả chúng đều được “hỗ trợ” ngay bây giờ, nhưng chúng làm những điều thú vị trong các trình duyệt hiện đại hỗ trợ chúng - và xuống cấp một cách nhẹ nhàng trong các trình duyệt không hiểu chúng. Điều này là nhờ các nguyên tắc thiết kế của HTML5. Trong trường hợp này, chúng tôi đặc biệt đề cập đến nguyên tắc suy thoái duyên dáng. Về bản chất, điều này có nghĩa là không có lý do gì để không sử dụng các tính năng này ngay bây giờ. Trên thực tế, điều đó có nghĩa là bạn đang đi trước đường cong
Thuộc tính biểu mẫu HTML5
Có 14 thuộc tính mới mà chúng ta sẽ xem xét trong bài viết này
giữ chỗ
Đầu tiên là thuộc tính
Hãy cùng xem cách triển khai thuộc tính
Đó là nó. Chúng tôi có thể nghe thấy bạn đang nghĩ, “Điều đó có gì tuyệt vời? . " Vâng đó là sự thật. Tuy nhiên, với HTML5, nó là một phần của trình duyệt, nghĩa là cần ít tập lệnh hơn để có giải pháp đa trình duyệt, dễ truy cập hơn [ngay cả khi JavaScript bị tắt]. Hình 2 cho thấy thuộc tính
Các trình duyệt không hỗ trợ thuộc tính giữ chỗ sẽ bỏ qua nó, vì vậy nó sẽ không hiển thị. Tuy nhiên, bằng cách đưa nó vào, bạn đang cung cấp trải nghiệm người dùng nâng cao cho những người dùng có hỗ trợ trình duyệt và bạn đang “kiểm chứng trong tương lai” cho trang web của mình. Tất cả các trình duyệt hiện đại đều hỗ trợ
Ghi chú. Không có lớp giả chính thức để tạo kiểu văn bản giữ chỗ nhưng cả Mozilla [nhà sản xuất Firefox] và WebKit đều cung cấp các thuộc tính có tiền tố của nhà cung cấp để tạo kiểu [-mozplaceholder và –webkit-input-placeholder]. Điều này đảm bảo an toàn khi giả định rằng một lớp giả sẽ trở thành tiêu chuẩn để tạo kiểu cho văn bản giữ chỗ. Để biết thêm chi tiết, có một chủ đề trong danh sách gửi thư WHATWG về chủ đề này
tự động lấy nét
Tuy nhiên, các phương thức JavaScript truyền thống có một số vấn đề nghiêm trọng về khả năng sử dụng. Ví dụ: nếu người dùng bắt đầu hoàn thành biểu mẫu trước khi tập lệnh tải, họ sẽ [rất khó chịu] được trả về trường biểu mẫu đầu tiên khi tập lệnh được tải. Thuộc tính
Đó là một thuộc tính Boolean [trừ khi bạn đang viết XHTML5; xem ghi chú] và được triển khai như sau
Tất cả các trình duyệt hiện đại đều hỗ trợ thuộc tính này và, như
Ghi chú. Một số thuộc tính biểu mẫu HTML5 mới là thuộc tính Boolean. Điều này chỉ có nghĩa là chúng được đặt nếu chúng có mặt và không được đặt nếu chúng vắng mặt. Chúng có thể được viết theo nhiều cách trong HTML5
Tuy nhiên, nếu bạn đang viết XHTML5, bạn phải sử dụng kiểu
tự động hoàn thành
Thuộc tính
Trạng thái
cần thiết
Thuộc tính
Kể từ khi cuốn sách được xuất bản, Bruce đã viết nhiều hơn một chút về kiểu dáng của các biểu mẫu và có một bài đăng khác của Peter rất hữu ích khi đọc
Việc hiển thị mặc định các thông báo lỗi "bắt buộc" tùy thuộc vào từng trình duyệt; . Tuy nhiên, Chrome có một thuộc tính độc quyền mà bạn có thể sử dụng để tạo kiểu cho bong bóng lỗi. Peter Gasston đã viết một bài báo về cú pháp. Bạn cũng có thể định kiểu đầu vào bằng cách sử dụng. lớp giả bắt buộc. Một cách khác là ghi đè từ ngữ và kiểu dáng bằng phương thức
mẫu
Biểu thức chính quy [regex hoặc regexp] cung cấp cách khớp các chuỗi văn bản đã nhập với các mẫu cụ thể. Một biểu thức chính quy có thể được sử dụng để kiểm tra một định dạng cụ thể cho một sản phẩm hoặc mã ZIP. Chúng có thể được sử dụng với một số ngôn ngữ lập trình, một số ngôn ngữ lập trình [Perl, Ruby] đã tích hợp chúng vào cú pháp của chúng. Regex là nơi bắt nguồn thuộc tính
Thuộc tính
Mẫu này quy định rằng số sản phẩm phải là một chữ số [0-9] theo sau là ba chữ cái viết hoa [A-Z]{3}. Để biết thêm ví dụ, trang web Mẫu HTML5 liệt kê các mẫu kiểu biểu thức chính quy phổ biến để giúp bạn bắt đầu
Theo yêu cầu, Opera 9. 5+, Firefox 4+, Safari 5+, Internet Explorer 10 và Chrome 5+ là những trình duyệt duy nhất hiện có hỗ trợ mẫu. Tuy nhiên, với thị trường trình duyệt đang phát triển với tốc độ nhanh, những người khác sẽ sớm bắt kịp
danh sách và phần tử datalist
Thuộc tính
Ví dụ sau đây cho thấy cách kết hợp
Bằng cách thêm một phần tử
Hỗ trợ trình duyệt cho
nhiều
Chúng ta có thể tiến thêm một bước nữa đối với các
Mặc dù vậy,
novalidate và formnovalidate
Các thuộc tính
Trường hợp sử dụng ví dụ cho thuộc tính
Ví dụ sau đây cho thấy cách sử dụng
Và ví dụ này cho thấy cách sử dụng
mẫu đơn
Thuộc tính
định dạng, formenctype, formmethod và formtarget
Mỗi thuộc tính
sự hình thành
định dạng
phương pháp tạo hình
mục tiêu biểu mẫu
Tóm tắt thuộc tính biểu mẫu
Chúng tôi đã xem xét một số thuộc tính biểu mẫu mới giúp cải thiện trải nghiệm người dùng và giúp bạn tiết kiệm thời gian phát triển. Có thêm một số thuộc tính mới để thảo luận, chúng sẽ được đề cập cùng với các loại đầu vào mới của HTML5 trong phần tiếp theo của loạt bài này
Bạn có thể tìm thấy biểu mẫu giả, sử dụng một số ví dụ mà chúng tôi đã trình bày trong bài viết này tại trang demo biểu mẫu HTML5 của chúng tôi
Chúng tôi đã gợi ý trong suốt bài viết về các trình duyệt hỗ trợ các loại và thuộc tính đầu vào của biểu mẫu HTML5. Với các phiên bản mới của trình duyệt được phát hành với tốc độ ngày càng tăng, có thể khó theo kịp những gì được hỗ trợ hoặc không được hỗ trợ. Nếu bạn muốn theo dõi tiến trình hiện tại, chúng tôi khuyên bạn nên truy cập Khi nào tôi có thể sử dụng … hoặc FindMeByIP hoặc nghiên cứu biểu mẫu HTML5 của Wufoo
Đây là bài viết là một đoạn trích từ Chương 6 của Bắt đầu HTML5 và CSS3. The Web Evolved của Christopher Murphy, Oli Studholme, Richard Clark và Divya Manian, do Apress xuất bản
Loại
- Thuộc tính
- yếu tố
- các hình thức
Thẻ
- tự động hoàn thành
- tự động lấy nét
- danh sách dữ liệu
- các hình thức
- HTML5
- html5
- danh sách
- nhiều
- mẫu
- giữ chỗ
- cần thiết
- mẫu web 2. 0
bản dịch
- عربية
Richard Clark
Bài viết này được viết bởi Richard Clark . Richard là Trưởng phòng Tương tác tại KMP Digitata, một công ty kỹ thuật số có trụ sở tại Manchester, Vương quốc Anh. Đồng tác giả của Bắt đầu HTML5 và CSS3. Web phát triển. Anh ấy điều hành một loạt trang web bao gồm trang này và trang chị em của nó là html5gallery. Một dự án phụ khác là Speak the Web, một loạt các hội nghị web theo phong cách biểu diễn nhỏ. Bạn nên theo dõi anh ấy trên twitter hoặc xem trang web của anh ấy.
22 Phản hồi về bài viết “Giới thiệu biểu mẫu HTML5 và các thuộc tính mới”
Enrique nói.
tổng hợp tuyệt vời. Rất dễ học để sau này mang lại năng suất cao hơn cho công việc của chúng tôi
Cảm ơn
P. S. IE phải chết ¬_¬
Nicolas Steinmetz nói.
Bài viết thú vị về các hình thức, cảm ơn
Tuy nhiên, các thuộc tính formnovalidate và novalidate không được xem xét trong bài viết ;-]
Maksim Chemerisuk nói.
Cảm ơn vì bài viết hữu ích. Ngoài ra tôi muốn giới thiệu plugin có tên formvalidation. js. Nó cố gắng bình thường hóa sự khác biệt về xác thực biểu mẫu giữa các trình duyệt và bổ sung thêm các tính năng này cho một số trình duyệt cũ không hỗ trợ API mới. Ngoài ra, nó cho phép tạo kiểu chú giải lỗi thông qua CSS cũng như văn bản thông báo của nó [cả hai tùy chọn chưa được đưa vào tiêu chuẩn].
Hãy sử dụng những ưu điểm của HTML5 ngay hôm nay.
Kiến nói.
Bài viết tuyệt vời và minh họa một số thay đổi HTML5.
Cảm ơn.
phát triển web apls nói.
xin chào. thực sự là một bài viết rất hay
Tôi cũng muốn đọc thêm về điều này về các loại đầu vào webkit như đầu vào giọng nói
chắc chắn sẽ đánh dấu các bài viết
Trân trọng
APLS -ADMIN
Richard Clark nói.
@Nicolas – điểm rất hay, tôi không chắc họ đã đi đâu [họ có trong sách. ]. Tôi đã cập nhật bài viết để bao gồm chúng
Robert nói.
Cảm ơn vì bài báo
Nhưng tôi không thể làm cho thuộc tính 'multiple' hoạt động với 'list', bạn có thể cung cấp thêm thông tin về điều đó không?
Trang web Jasa Pembuatan Toko Online murah nói.
thuộc tính formnovalidate và novalidate không được xem xét trong bài viết
Antonio nói.
Cảm ơn
Mem nói.
Giống như Robert đã nói, tôi đã thử nhập nhiều lần với datalist trên FF & Chrome mới nhất, nhưng cách đó không hoạt động [có thể chỉ là nhiều tệp đầu vào hoạt động?]
Aaron Gustafson nói.
Chỉ là một FYI. Safari hiện chỉ hỗ trợ các thuộc tính xác thực thông qua API JS, nó sẽ không hiển thị lỗi cho người dùng trên OS X hoặc iOS, cũng như sẽ không dừng gửi. Một polyfill là cần thiết cho cả hai
Mikel King nói.
Một bài viết tốt đẹp cảm ơn
Richard Clark nói.
@aaron, cảm ơn vì mẹo
@mem & @robert, bạn nói đúng. Điều đó dường như không hoạt động. Tôi chắc chắn nếu có trong các bài kiểm tra. Tôi sẽ nộp một báo cáo lỗi
Ngoài ra, Jeremy Keith đã viết một bài viết hữu ích về Tạo trình giữ chỗ từ người theo dõi dữ liệu
Ahmad Alfy nói.
Nhiều người gần đây đã bắt đầu sử dụng trình giữ chỗ để bắt chước nhãn của các phần tử mà không hiểu hậu quả về khả năng truy cập của những gì họ đang làm. Các thuộc tính và thẻ biểu mẫu HTML5 mới giúp chúng tôi tiết kiệm rất nhiều thời gian nhưng không nhiều người hiểu cách sử dụng chính xác
halah azim nói.
Trước hết bài viết tuyệt vời
Thứ hai, tôi có một vấn đề và tôi hy vọng bạn có thể làm sáng tỏ
Html5 có hỗ trợ trình giữ chỗ hình ảnh nghĩa là người dùng có thể nhập hình ảnh thay vì văn bản tại một vị trí nhất định trong tài liệu
Tôi đã tạo một biểu mẫu pdf có chứa hình ảnh và văn bản trong đó và tôi cần biểu mẫu đó cũng có thể tương tác trên ipad và có vẻ như cách duy nhất tôi có thể làm là chuyển đổi nó thành html5. Cho đến nay tôi đã có thể thực hiện với các chủ sở hữu văn bản nhưng không phải là chủ sở hữu hình ảnh
Nếu html5 không làm được điều này, bạn có biết làm cách nào tôi có thể hoàn thành việc này không?
Bất kỳ lời khuyên bạn có thể cung cấp cho tôi đánh giá cao
Cảm ơn rất nhiều
Arthur Carlos nói.
Bài báo xuất sắc, Richard
Cách hay và dễ dàng để giải thích tất cả các thuộc tính
tốt nhất từ Brazil
Jesvin nói.
viết tốt lên… Cảm ơn
Wajid nói.
tôi muốn đặt hình ảnh vào hộp tìm kiếm, làm cách nào để có thể đặt hình ảnh trong trình giữ chỗ như hình ảnh
hình ảnh nên được đặt như thế nào
Steve Faulkner nói.
Xin chào Wajid, thuộc tính placeholder chỉ chấp nhận chuỗi văn bản nên không thể sử dụng nó để thêm hình ảnh
Xin vui lòng quản trị viên nói.
Xin chào
bạn có thể thêm hình ảnh vào hộp văn bản bằng hai phương pháp
1] sử dụng nền. url[];
2] Sử dụng css để nối và thêm đầu vào. Tôi sẽ sớm đăng bài này trên blog phát triển web APLS
otips nói.
Tôi đã tránh sử dụng HTML5 trên các biểu mẫu và gặp khó khăn với việc xử lý biểu mẫu ở phía PHP, bạn có thể nói rằng hiện tại nó an toàn để sử dụng vì được hỗ trợ đầy đủ trên các trình duyệt
E. chiên nói.
Tôi có s với một số hình dạng biểu mẫu ở bên cạnh- tôi có phải gửi kèm theo >phần> và có các id khác nhau cho mỗi biểu mẫu không?