Trong bài viết đầu tiên của loạt bài này, chúng tôi đã xem xét lịch sử của các biểu mẫu HTML5 và nhiều thuộc tính mới có sẵn cho chúng tôi. Trong phần thứ hai và cũng là phần cuối cùng của loạt bài này, chúng ta sẽ xem xét các loại đầu vào mới có sẵn trong HTML5. 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?
Đâ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
Các loại đầu vào mới
HTML5 giới thiệu không ít hơn một chục thợ làm bánh [vâng, đó là 13. ] các loại đầu vào mới cho biểu mẫu. Chúng tôi sẽ xem xét ngắn gọn về từng loại và giải thích lý do tại sao bạn nên sử dụng chúng ngay bây giờ. Các loại đầu vào mới này có lợi ích kép. sử dụng chúng có nghĩa là thời gian phát triển ít hơn và trải nghiệm người dùng được cải thiện. Các loại đầu vào mới mà chúng tôi sẽ xem xét là
Tìm kiếm
Tìm kiếm có vẻ như là một nơi thích hợp để bắt đầu bước đột phá của chúng tôi vào các loại đầu vào HTML5. Khi nói về tìm kiếm, chúng ta không chỉ nói về Google, Bing hay Yahoo. Chúng ta đang nói về trường tìm kiếm trên trang thương mại điện tử mà bạn vừa mua hàng, trên Wikipedia và thậm chí trên blog cá nhân của bạn. Đây có lẽ là hành động phổ biến nhất được thực hiện trên Web hàng ngày, nhưng nó không được đánh dấu về mặt ngữ nghĩa cho lắm, phải không?
Chà, điều gì sẽ xảy ra nếu chúng ta có thể viết một cái gì đó như…
Với HTML5 chúng ta có thể. Cảm thấy tốt hơn nhiều, phải không? . Tại thời điểm này, một chữ thập nhỏ xuất hiện ở phía bên phải của trường. Lưu ý x trong Hình 1. Điều này cho phép bạn nhanh chóng xóa trường, giống như trường tìm kiếm tích hợp của Safari
Tuy nhiên, trên thiết bị di động, mọi thứ bắt đầu trở nên thú vị. Lấy ví dụ iPhone được hiển thị trong Hình 2; . Bạn có phát hiện ra rằng nó nói "Tìm kiếm" thay vì "Đi" thông thường không?
Như bạn đã thấy với các thuộc tính mới, các trình duyệt không hiểu chúng sẽ xuống cấp một cách nhẹ nhàng. Điều tương tự cũng áp dụng cho tất cả các loại đầu vào mới được thảo luận ở đây. Nếu một trình duyệt không hiểu
Về mặt kết xuất, kiểu nhập email không khác với kiểu nhập văn bản tiêu chuẩn và cho phép nhập một hoặc nhiều địa chỉ email. Kết hợp với thuộc tính
Để biết thêm về các biểu mẫu tạo kiểu bằng cách sử dụng các lớp giả, “Ninja CSS”, Ryan Seddon, đã tập hợp một minh họa tuyệt vời về A List Apart
Thông số kỹ thuật chi tiết mà một hoặc nhiều địa chỉ e-mail được phép. Điều này có nghĩa là thuộc tính multiple cũng có thể được sử dụng với
Khá tuyệt phải không?
Tuy nhiên, luôn luôn có một nhược điểm, phải không? . Khi sử dụng nó với tên miền quốc tế hóa byte kép, trình duyệt sẽ vô hiệu hóa chúng;
không hợp lệ trong Firefox, Safari hoặc Chrome [không có vấn đề gì trong Opera]. Tuy nhiên, Kyle Barrow đã tạo ra một giải pháp thay thế sử dụng
Một giải pháp thay thế là tiếp tục sử dụng
Đặt vấn đề quốc tế hóa sang một bên, hãy nhớ rằng chúng tôi đã nói rằng có những lợi ích kép đối với các loại đầu vào của HTML5—thời gian phát triển ít hơn và trải nghiệm người dùng tốt hơn?
Lần này bạn có để ý không? . Đúng vậy, bàn phím khác. Có các phím dành riêng cho @ và. các ký tự để giúp bạn hoàn thành trường hiệu quả hơn. Như chúng ta đã thảo luận với
url
Hiện đang có một số tranh luận về việc liệu người dùng có phải nhập http. // vào một trường bằng cách sử dụng
Kiểu đầu vào
Một lần nữa, chúng ta sẽ xem cách iPhone hiển thị
điện thoại
Một lần nữa, iPhone nhận ra
con số
Với các thuộc tính bổ sung
Trong ví dụ này, min đại diện cho giá trị tối thiểu mà trường sẽ chấp nhận và max đại diện cho giá trị tối đa. Nếu chúng tôi đạt đến giá trị tối đa hoặc tối thiểu, mũi tên thích hợp trên điều khiển hộp quay sẽ chuyển sang màu xám để bạn không thể tương tác với nó nữa. bước là mức tăng mà giá trị sẽ điều chỉnh tăng hoặc giảm, với giá trị bước mặc định là 1. Điều này có nghĩa là chúng ta có thể bao gồm các giá trị âm hoặc tăng dần theo gia số 0. 5 hoặc 5. giá trị là thuộc tính mà bạn đã sử dụng từ các phiên bản HTML trước. Mỗi thuộc tính là tùy chọn, với các giá trị mặc định được đặt nếu chúng không được sử dụng
Trái ngược với cách triển khai của Opera, iPhone [Hình 8] và một số thiết bị Android [chẳng hạn như HTC Desire, hiển thị bên phải trong Hình 6-13] chỉ hiển thị trường dưới dạng hộp văn bản tiêu chuẩn nhưng tối ưu hóa bàn phím để nhập liệu dễ dàng
Để làm cho iPhone hiển thị bằng bàn phím điện thoại tiêu chuẩn như chúng ta đã thấy cho
Kỹ thuật của Chris có thể sớm trở nên lỗi thời với việc giới thiệu thuộc tính ________ 353. Thuộc tính, được thêm gần đây vào thông số kỹ thuật sẽ cho phép người dùng chỉ định loại cơ chế đầu vào hữu ích nhất cho người dùng. Khi được triển khai, bạn sẽ có thể chọn giữa các chế độ nhập số, tiếng Latinh, email hoặc kana
phạm vi
Ghi chú. Đối với các trình duyệt không hỗ trợ
Kiểu đầu vào
Đoạn mã sau cho biết cách chúng ta có thể đánh dấu cấp độ kỹ năng của mình trên thang điểm từ 1 đến 100 bằng cách đặt các thuộc tính
Ngày và giờ
Bạn có thể nhận thấy rằng không có loại đầu vào
Nếu bạn đã từng đặt vé trực tuyến, bạn sẽ bắt gặp công cụ chọn ngày giúp bạn chọn ngày bạn cần một cách nhanh chóng và dễ dàng. Có lẽ bạn thậm chí đã triển khai công cụ chọn ngày trên trang web của riêng mình. Nói chung, điều này được thực hiện bằng thư viện JavaScript như jQuery, Dojo hoặc YUI. Có thể khó khăn khi bạn cần tải toàn bộ thư viện và các phần bổ trợ được liên kết chỉ để triển khai một bộ chọn ngày đơn giản. Chà, với HTML5, chúng tôi đưa chức năng đó vào trình duyệt. Không chỉ vậy, chúng ta không chỉ dừng lại ở việc chọn một ngày duy nhất; . Việc đánh dấu là khá đơn giản
Bạn có thể tiến thêm một bước bằng cách sử dụng các thuộc tính
Cũng như nhiều triển khai biểu mẫu khác, Opera dẫn đầu [hỗ trợ trong các trình duyệt khác rất đa dạng]. Tiếp theo, chúng ta hãy xem cách các trình duyệt hiển thị các loại đầu vào này
ngày tháng
Hình 10 cho thấy Opera 10. 5 kết xuất của
Những công cụ chọn ngày này không bị hạn chế đối với thiết bị máy tính để bàn;
tháng
Tiếp theo, Hình 12 cho thấy
tuần
Bạn cũng có thể đi sâu vào
thời gian
Bạn có thể thấy trong Hình 14 rằng
ngày giờ
Chúng ta có thể kết hợp ngày và giờ bằng cách sử dụng
datetime-local
Cuối cùng, Hình 16 cho thấy rằng chúng ta có thể kiểm soát chi tiết hơn một chút bằng cách chọn thời gian chính xác vào một ngày nhất định với sự thay đổi múi giờ địa phương bằng cách sử dụng
Lưu ý ngày giờ
Có hai cảnh báo với những triển khai này. Đầu tiên, với cách triển khai hiện tại, không thể nhập ngày vào trường [trong tất cả các trình duyệt]. Tuy nhiên, bộ chọn ngày có thể truy cập bằng bàn phím. Tuy nhiên, chúng ta có thể thấy trước một vấn đề tiềm ẩn; . Thứ hai, không thể tạo kiểu cho giao diện của bộ chọn ngày. Chúng tôi có xu hướng nghĩ rằng đây là một điều tốt, vì người dùng sẽ nhận được trải nghiệm chung trên tất cả các trang web họ truy cập [miễn là họ luôn sử dụng cùng một trình duyệt]. Tuy nhiên, không còn nghi ngờ gì nữa, các công ty sẽ yêu cầu một công cụ chọn ngày có thương hiệu. Safari 5 và Chrome 5 đã triển khai các loại đầu vào này, nhưng thật không may, chúng không thân thiện với người dùng. Ngày phải được nhập theo định dạng giống như yếu tố thời gian mà chúng ta đã gặp trước đó trong cuốn sách. Vì vậy, đối với ngày, định dạng sẽ là YYYY-MM-DD và đối với ngày có thời gian, người dùng sẽ phải nhập YYYYMM-DDT00. 00Z, không thân thiện chút nào
Cũng như các loại đầu vào mới khác, nếu trình duyệt không nhận ra chúng, thì trình duyệt sẽ chỉ mặc định trở lại
màu
Loại đầu vào màu khá dễ hiểu. nó cho phép người dùng chọn một màu và trả về giá trị hex cho màu đó. Người ta dự đoán rằng người dùng sẽ có thể nhập giá trị hoặc chọn từ bộ chọn màu, màu này sẽ có nguồn gốc từ hệ điều hành hoặc triển khai của chính trình duyệt. Opera 11 đã triển khai type=”color” với một bộ chọn màu đơn giản cung cấp một số lựa chọn màu tiêu chuẩn hoặc tùy chọn để chọn Khác, sẽ hiển thị bộ chọn màu của hệ điều hành [hiển thị ở bên phải trong Hình 17]
Ngược lại, một số thiết bị Blackberry nhất định đã triển khai loại đầu vào
Tóm tắt các loại đầu vào
Bằng cách sử dụng các loại đầu vào biểu mẫu mới của HTML5 ngay bây giờ, chúng tôi có thể nâng cao trải nghiệm của người dùng, chứng minh trang web của chúng tôi trong tương lai và làm cho cuộc sống của chúng tôi với tư cách là nhà phát triển dễ dàng hơn. Rõ ràng, chúng ta không thể bỏ mặc các trình duyệt không hỗ trợ tất cả các tính năng mới này, và trong Chương 6 của HTML5 và CSS3 bắt đầu, chúng ta sẽ xem cách phát hiện hỗ trợ cho các tính năng biểu mẫu này bằng JavaScript
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
Nếu bạn đã bỏ lỡ bài viết đầu tiên trong loạt bài này về biểu mẫu HTML5, tại sao không đọc phần Lịch sử ngắn gọn về biểu mẫu HTML5 và tìm hiểu tất cả về các thuộc tính mới được giới thiệu
Đâ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ẻ
- màu
- ngày tháng
- các hình thức
- HTML5
- html5
- con số
- phạm vi
- Tìm kiếm
- điện thoại
- url
- 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.
21 Phản hồi về bài viết “Các kiểu nhập biểu mẫu HTML5”
Chris Adams nói.
________ 106 không xử lý punycode là một sự hớ hênh đáng xấu hổ. May mắn thay, có vẻ như Firefox đã được sửa chữa kể từ khi ghi chú ban đầu được thêm vào như http. //jsfiddle. net/xEgan/ hoạt động trong FF19 [https. // bugzilla. mozilla. tổ chức/show_bug. cgi?id=618876 đề xuất hỗ trợ quay trở lại tận FF13]
Thật không may, WebKit dường như không thay đổi gì trong vài năm qua. https. // lỗi. webkit. tổ chức/show_bug. cgi?id=40761
Dave nói.
Tuần này tôi đã triển khai hình ảnh tải lên
Tuyệt vời.
Bertilo Wennergren nói.
Vậy tình trạng hiện tại của các sự cố i18n với đầu vào số là gì? . dấu phẩy thập phân, v.v. Ngôn ngữ trang so với. ngôn ngữ trình duyệt. Tôi nghĩ rằng tôi đã đọc ở đâu đó rằng Chrome đã đạt được một số tiến bộ ở đó, nhưng tôi không chắc. Còn các trình duyệt khác thì sao?
Michael nói.
Tổng quan tuyệt vời, cảm ơn
Tuy nhiên, khi sử dụng type=”url”, bạn nên lưu ý rằng tại thời điểm này, các trình duyệt khác nhau có các xác thực khác nhau và tốt hơn hết bạn không nên sử dụng nó theo cách như vậy. Tôi đã giải thích nó trong một bài viết
Vì tôi thực sự không thể tìm ra lý do tại sao các trình duyệt, ví dụ như chấp nhận url. nhưng không phải http. //www. html5doctor. com Tôi sẽ thực sự quan tâm nếu bạn biết tại sao?
Cảm ơn,
Michael
H Max nói.
Bài viết rất toàn diện, khai sáng và hữu ích. Tốt, công việc tốt. Cảm ơn vì đã trả lại
Egor Kloos nói.
Ngày, giờ và số có định dạng khác nhau dựa trên ngôn ngữ và vị trí. Việc triển khai cho các loại đầu vào này không hề nhỏ. Một vấn đề phổ biến mà tôi gặp phải là người dùng có hệ điều hành ở một ngôn ngữ và trình duyệt ở một ngôn ngữ khác. Làm cho một số loại đầu vào nhất định hoạt động ổn định có thể là một vấn đề thực sự và đôi khi không đáng để thực hiện. Hy vọng rằng khi những thông tin đầu vào này hoàn thiện, nó sẽ trở nên dễ dàng và dễ đoán hơn
Bertilo Wennergren nói.
Một vấn đề phổ biến mà tôi gặp phải là người dùng có hệ điều hành ở một ngôn ngữ và trình duyệt ở một ngôn ngữ khác
Và sau đó trang này ở ngôn ngữ thứ ba. Hoặc có lẽ đó là hai hoặc nhiều ngôn ngữ cùng một lúc, có văn bản bằng một số ngôn ngữ gắn nhãn cho từng đầu vào… Phải làm gì?
Egor Kloos nói.
Thật vậy, đa ngôn ngữ, như Bertilo nói, để lại cho chúng ta một số vấn đề mà không có giải pháp rõ ràng. Phải làm gì?
Khi điều đó xảy ra, bạn nhận ra rằng giải pháp là thỏa hiệp. Đầu vào 'văn bản' cũ tốt với cải tiến lũy tiến thường là lựa chọn tốt nhất của bạn. Vâng, đó là cách tiếp cận hiện tại của tôi. Các loại đầu vào HTML5 không được định dạng phổ biến như ngày và số đơn giản là chưa sẵn sàng cho thế giới thực. Tại sao không có thuộc tính định dạng bên cạnh thuộc tính mẫu?
Richard Clark nói.
@Chris, cảm ơn vì đã lưu ý
@Bertilo, bạn nói đúng. Tôi đã thấy một số cuộc thảo luận xung quanh vấn đề này nhưng hiện tại tôi không biết chính xác nó đang ở đâu
@Michael, mẹo hay và cảm ơn vì liên kết bài viết
@Egor, bạn đưa ra một số điểm tuyệt vời và tôi đồng ý với bạn rằng một số loại đầu vào chưa sẵn sàng để sản xuất mà không có nhiều cách giải quyết
Sam nói.
Trong Chrome 24, bạn có thể sử dụng bàn phím để nhập ngày tháng một cách nhanh chóng và dễ dàng. Bạn cũng có thể sử dụng các phím lên và xuống để tăng và giảm từng giá trị [ngày, tháng, năm]. Khá hữu ích cho những ai biết sử dụng bàn phím
Amit Asthana nói.
Tôi muốn xem định dạng như dd/mm/yyyy, khi tôi đang chọn kiểu nhập chrome=”date”, tôi nhận được mm/dd/yyyy, đây là điều tôi không muốn, khi đó tôi sẽ phải chọn định dạng . Nếu ai có thể giúp tôi sẽ đủ tốt
Cảm ơn trước
Sven nói.
Có ai có thể nhận xét về việc liệu thuộc tính 'bắt buộc' có hoạt động tốt hơn trong Safari 7 không?
Ulrich nói.
Có vẻ như thuộc tính bước bị bỏ qua khi sử dụng đầu vào datetime-local trong safari trên thiết bị di động. Có ai biết về một cách giải quyết?
Budiman nói.
Chào tiến sĩ. Richard Clark Tôi muốn hỏi bạn về mật khẩu kiểu gõ nhưng hiện bàn phím số trên android
Cảm ơn
Senthil kumar nói.
tôi muốn sử dụng thẻ. nhưng nó chỉ xuất hiện trong trình duyệt chrome. tôi phải làm gì để hiển thị điều khiển này trong tất cả các trình duyệt….
vui lòng cho biết ý kiến về điều này……. nếu bất kỳ thuộc tính nào tôi muốn thêm thẻ này có nghĩa là gì, hãy cho biết tên thuộc tính đó…….
cảm ơn
Anu nói.
cảm ơn. làm cách nào để lấy giá trị từ và lưu trữ trong bảng?
Anu nói.
* loại đầu vào = tháng
shikhar nói.
Chào mọi người,
Tôi đã thử nhập kiểu 'thời gian' nhưng nó không hoạt động trong trường hợp của tôi. Vui lòng giúp đỡ và xây dựng để hoàn thiện thẻ để biết thêm
Cảm ơn trước
Trân trọng,
manish nói.
Loại đầu vào 'thời gian' không hoạt động
Richard Clark nói.
@shikhar @manish – bạn đang sử dụng [những] trình duyệt nào?