Mẫu nhập kiểu mới trong HTML5 - núm vú - Xã hội Truyền thông 2025

Các mẫu HTML được tập trung quanh yếu tố đầu vào khiêm tốn nhưng linh hoạt. HTML5 thêm một số hình thức đầu vào rất hữu ích giúp biến HTML thành một công cụ giao diện người dùng hiện đại hơn.

Mặc dù sự hỗ trợ cho các thẻ này không phải là phổ quát, nhưng bạn vẫn có thể bắt đầu sử dụng chúng ngay bây giờ. Bất kỳ trình duyệt nào (không kể IE6) không hiểu các loại đầu vào nâng cao sẽ trở lại kiểu đầu vào = "văn bản", mà sẽ vẫn làm việc chính xác như mong đợi (mặc dù không phải với sự cải tiến xác nhận và cải tiến giao diện người dùng của các thẻ mới hơn).

Tiêu chuẩn cho biết rằng các loại khác nhau sẽ được hỗ trợ nhưng cách chính xác các yếu tố được hỗ trợ có thể thay đổi từ trình duyệt sang trình duyệt. Ví dụ: trường e-mail có thể trông giống như một trường văn bản thông thường cho người dùng trên một máy tính để bàn tiêu chuẩn, nhưng bàn phím ảo trên thiết bị di động có thể thay đổi để bao gồm @ khi nó gặp một trường e-mail.

Hầu hết các lĩnh vực đặc biệt này hỗ trợ xác nhận, do đó ở mức tối thiểu, nên thiết lập một kiểu CSS không hợp lệ để người dùng có thể biết liệu dữ liệu có trong lĩnh vực này hay không. Dưới đây là các loại đầu vào có mã mẫu:

: Cho phép người dùng chọn màu bằng các định dạng web tiêu chuẩn - tên màu được công nhận (màu vàng) và giá trị hex trước một ký hiệu # (# FF0033). Một số trình duyệt (Firefox 3. 5) hiển thị một trường văn bản, một số khác (Opera 10) hiển thị một điều khiển lịch đặc biệt, còn các trình duyệt khác (Chrome) bao gồm cả văn bản và pop-up calendar. Nếu ngày được nhập bằng văn bản, nó phải được nhập theo định dạng yyyy-mm-dd:

Bạn có thể hạn chế ngày cho phép đối với một dải cụ thể bằng cách áp dụng các thuộc tính min và max cho phần tử. thời gian

Thời gian được lưu trữ ở định dạng hh: mm. Một số trình duyệt bao gồm một dấu hai chấm trực tiếp trong trường và một số sửa đổi bàn phím ảo với số và ký tự dấu hai chấm. Cũng có thể một trình duyệt sẽ bật lên một số bộ chọn thời gian tùy chỉnh nhưng điều này chưa được hỗ trợ trong bất kỳ trình duyệt chính nào.

datetime : Kết hợp ngày và giờ thành một phần tử duy nhất. Nó cũng bao gồm một cơ chế để nhập múi giờ.

Một số trình duyệt bật lên một điều khiển lịch cho ngày và đầu vào định dạng cho thời gian. Những người khác có thể sửa đổi bàn phím ảo cho ngày và thời gian đầu vào. Định dạng ngày và giờ chính thức được trả lại từ các yếu tố ngày giờ khác nhau là một mã chuyên biệt: yyyy-mm-ddThh: mm + ff: gg: yyyy

Bốn chữ số cho năm.

- : Một ký tự dấu gạch chéo thực tế, phải được đặt giữa năm và tháng.Một dấu gạch ngang khác được đặt giữa tháng và ngày.
mm : Hai chữ số trong tháng.
dd : Hai chữ số trong ngày.
T : Vốn
T cho biết bắt đầu phần thời gian của mã. hh : Hai chữ số cho một giờ ở định dạng 24 giờ.
: : Ký tự đại tràng giữa giờ và phút. Dấu hai chấm xuất hiện giữa giờ và phút của múi giờ bù đắp.
mm : Hai chữ số cho phút.
+ / - / Z : Việc bù đắp múi giờ được chỉ định bởi số vốn
Z (nếu là thời gian Zulu hoặc GMT) hoặc ký hiệu + hoặc - nếu thời gian là trong một múi giờ khác. ff : Nếu múi giờ không phải là thời gian Zulu, cho biết số giờ được tính bằng GMT.
gg : Số phút được tính từ thời gian Zulu. Thông thường đây là 00, nhưng có thể là múi giờ sẽ được bù đắp bằng 15, 30, hoặc 45 phút.
Chẳng hạn, 5:30 chiều ngày 11 tháng 10 năm 2011, ở Thành phố New York có dạng như sau: 2011-10-11T17: 30-05: 00 Ngày và giờ cần ở trong định dạng được coi là hợp lệ cho các trình duyệt xác nhận một trường dateTime.

datetime-local

Giống như phần tử datetime không có chỉ báo múi giờ:

email : Dường như trường văn bản thuần, nhưng nó có thể được sửa đổi theo làm thế nào nó được truy cập.

tháng : Điều này tạo ra một năm bốn chữ số theo sau là một tháng hai chữ số:

số : Dữ liệu số có thể bao gồm một trường văn bản tiếp theo một số loại (ví dụ: mũi tên lên và xuống) hoặc thẻ này có thể thay đổi bàn phím ảo của thiết bị di động để chỉ xử lý số đầu vào.

Loại nhập số hỗ trợ một số thuộc tính đặc biệt: phút :

Giá trị tối thiểu cho phép.

tối đa : Giá trị cho phép tối đa.
Bước : Giá trị này cho thấy có bao nhiêu công cụ giao diện trực quan (thường là các mũi tên nhỏ và lên) thay đổi giá trị khi kích hoạt.
giá trị : Giá trị số của phần tử.
Tất cả các thuộc tính của phần tử số có thể là số nguyên hoặc điểm nổi. Tuy nhiên, các trình duyệt hiện tại hỗ trợ thẻ này (Opera và Chrome) dường như không hợp lệ với các giá trị điểm trôi khi họ làm với các giá trị số nguyên. Để kiểm soát nhiều hơn số đầu vào, hãy xem xét loại nhập vào phạm vi. range :

Hầu hết bộ công cụ giao diện người dùng có một số thanh trượt hoặc thanh cuộn, giúp người dùng dễ dàng nhập giá trị số bằng hình ảnh.

xây dựng cuối cùng thêm chức năng này vào các hình thức HTML. Đầu vào phạm vi có các thuộc tính tương tự như số, phút, giá trị, và bước. Nếu trình duyệt hỗ trợ thẻ phạm vi, người dùng sẽ thấy một trình cuộn; nếu không, một kiểu nhập văn bản thuần văn sẽ xuất hiện. Kiểu phạm vi không hiển thị giá trị chính xác và có thể khó đạt được kết quả chính xác hơn so với kiểu nhập số. Một giải pháp là ghép nối thẻ đầu ra với dải và sử dụng JavaScript để cập nhật đầu ra khi phạm vi được thay đổi.Biểu mẫu mẫu kết hợp ý tưởng này: 128

Khi giá trị phạm vi bị thay đổi, nó gọi một hàm JavaScript gọi là hàm updateOutput:

updateOutput () {// lấy các phần tử var myRange = document. getElementById ("myRange"); var myOutput = tài liệu. getElementById ("myOutput"); / / sao chép giá trị trên myOutput. giá trị = myRange. value;} // end function

Giống như kiểu nhập số, phạm vi có thể được cung cấp giá trị điểm nổi nếu bạn muốn.

Được sử dụng để lấy lại văn bản được sử dụng như là một phần của tìm kiếm (nội bộ hoặc thông qua dịch vụ tìm kiếm). Trên hầu hết các trình duyệt, thẻ này hiển thị như một trường văn bản thông thường. Nó đôi khi có một số hành vi đặc biệt. Trên Safari, trường tìm kiếm được hiển thị với một

x nhỏ, giúp xóa nội dung tìm kiếm. Trên Chrome, tính năng tự động hoàn tất của thanh tìm kiếm chính (cũng là phần đầu vào URL trong Chrome) sẽ tự động được áp dụng cho hộp tìm kiếm. Giống như các loại đầu vào mới khác, không có hình phạt nào cho việc sử dụng phần tử tìm kiếm trong các trình duyệt không hỗ trợ nó. Dự phòng là một đầu vào văn bản thuần túy. Phần tử tìm kiếm thực sự không tìm kiếm. Để làm cho nó hoạt động, bạn cần phải viết một số mã.

tel

Trường này mong đợi ba chữ số tiếp theo là dấu gạch ngang và bốn chữ số - số điện thoại địa phương. Bạn có thể cần phải chơi với thuộc tính của mẫu nếu bạn muốn cho phép mã vùng hoặc tiện ích mở rộng hợp lệ. url :

Các trình duyệt hỗ trợ phần tử này sẽ kiểm tra tiền tố // cho một địa chỉ web. Các trình duyệt trên điện thoại di động cũng có thể thích ứng với bàn phím ảo bao gồm các ký tự thường tìm thấy trong URL: dấu hai chấm (:), dấu gạch chéo (/) và dấu ngã (~). tuần :

Cho phép người dùng chọn một tuần từ một điều khiển lịch. Nó trả về một giá trị theo định dạng sau: yyyy-Wnn yyyy :

Là năm bốn chữ số. - :
Ký tự gạch ngang. W :
Vốn W ký tự. nn :
Tuần lễ là một con số gồm hai chữ số. Một số trình duyệt bật lên tính năng lịch tiêu chuẩn. Khi người dùng chọn một ngày (hoặc một tuần), chỉ có năm và tuần sẽ được trả lại. Các trình duyệt khác chỉ cần xác nhận đúng định dạng.