Sau đây là đoạn trích từ cuốn sách của chúng tôi, HTML5 & CSS3 cho Thế giới thực, Phiên bản thứ 2, được viết bởi Alexis Goldstein, Louis Lazaris và Estelle Weyl. Các bản sao được bán tại các cửa hàng trên toàn thế giới hoặc bạn có thể mua dưới dạng sách điện tử tại đây
Có thể bạn đã quen thuộc với thuộc tính type
của phần tử input
. Đây là thuộc tính xác định loại đầu vào biểu mẫu nào sẽ được hiển thị cho người dùng. Nếu nó bị bỏ qua—hoặc trong trường hợp các loại đầu vào mới và các trình duyệt cũ hơn, không được hiểu—thì nó vẫn hoạt động; . Đây là chìa khóa giúp các biểu mẫu HTML5 có thể sử dụng được ngay cả khi bạn vẫn đang hỗ trợ các trình duyệt cũ hơn. Nếu bạn sử dụng kiểu nhập liệu mới, chẳng hạn như email
hoặc search
, các trình duyệt cũ hơn sẽ chỉ hiển thị cho người dùng một trường văn bản tiêu chuẩn
Biểu mẫu đăng ký của chúng tôi hiện sử dụng bốn trong số mười loại đầu vào mà bạn quen thuộc. checkbox
,
My email address is
0,My email address is
1 và My email address is
2. Đây là danh sách đầy đủ các loại có sẵn trước HTML5
3My email address is
checkbox
5My email address is
6My email address is
7My email address is
1My email address is
9My email address is
0function setErrorMessages[formControl] { var validityState_object = formControl.validity; if [validityState_object.valueMissing] { formControl.setCustomValidity['Please set an age ↵[required]']; } else if [validityState_object.rangeUnderflow] { formControl.setCustomValidity['You\'re too young']; } else if [validityState_object.rangeOverflow] { formControl.setCustomValidity['You\'re too old']; } else if [validityState_object.stepMismatch] { formControl.setCustomValidity['Counting half ↵birthdays?']; } else { //if valid, must set falsy value or will always error formControl.setCustomValidity['']; } }
2My email address is
0My email address is
Đặc tả HTML5 cung cấp cho chúng tôi thêm 9 loại đầu vào cung cấp nhiều phần tử giao diện người dùng dành riêng cho dữ liệu hơn và xác thực dữ liệu gốc
search
email
5function setErrorMessages[formControl] { var validityState_object = formControl.validity; if [validityState_object.valueMissing] { formControl.setCustomValidity['Please set an age ↵[required]']; } else if [validityState_object.rangeUnderflow] { formControl.setCustomValidity['You\'re too young']; } else if [validityState_object.rangeOverflow] { formControl.setCustomValidity['You\'re too old']; } else if [validityState_object.stepMismatch] { formControl.setCustomValidity['Counting half ↵birthdays?']; } else { //if valid, must set falsy value or will always error formControl.setCustomValidity['']; } }
6function setErrorMessages[formControl] { var validityState_object = formControl.validity; if [validityState_object.valueMissing] { formControl.setCustomValidity['Please set an age ↵[required]']; } else if [validityState_object.rangeUnderflow] { formControl.setCustomValidity['You\'re too young']; } else if [validityState_object.rangeOverflow] { formControl.setCustomValidity['You\'re too old']; } else if [validityState_object.stepMismatch] { formControl.setCustomValidity['Counting half ↵birthdays?']; } else { //if valid, must set falsy value or will always error formControl.setCustomValidity['']; } }
7function setErrorMessages[formControl] { var validityState_object = formControl.validity; if [validityState_object.valueMissing] { formControl.setCustomValidity['Please set an age ↵[required]']; } else if [validityState_object.rangeUnderflow] { formControl.setCustomValidity['You\'re too young']; } else if [validityState_object.rangeOverflow] { formControl.setCustomValidity['You\'re too old']; } else if [validityState_object.stepMismatch] { formControl.setCustomValidity['Counting half ↵birthdays?']; } else { //if valid, must set falsy value or will always error formControl.setCustomValidity['']; } }
8function setErrorMessages[formControl] { var validityState_object = formControl.validity; if [validityState_object.valueMissing] { formControl.setCustomValidity['Please set an age ↵[required]']; } else if [validityState_object.rangeUnderflow] { formControl.setCustomValidity['You\'re too young']; } else if [validityState_object.rangeOverflow] { formControl.setCustomValidity['You\'re too old']; } else if [validityState_object.stepMismatch] { formControl.setCustomValidity['Counting half ↵birthdays?']; } else { //if valid, must set falsy value or will always error formControl.setCustomValidity['']; } }
9function setErrorMessages[formControl] { var validityState_object = formControl.validity; if [validityState_object.valueMissing] { formControl.setCustomValidity['Please set an age ↵[required]']; } else if [validityState_object.rangeUnderflow] { formControl.setCustomValidity['You\'re too young']; } else if [validityState_object.rangeOverflow] { formControl.setCustomValidity['You\'re too old']; } else if [validityState_object.stepMismatch] { formControl.setCustomValidity['Counting half ↵birthdays?']; } else { //if valid, must set falsy value or will always error formControl.setCustomValidity['']; } }
0My website is located at:
1My website is located at:
HTML5. 1 và WHATWG HTML Living Standard bao gồm bốn loại đầu vào ngày bổ sung, ba trong số đó được hỗ trợ tốt trong các trình duyệt hiện đại
2My website is located at:
3My website is located at:
4My website is located at:
5My website is located at:
[không được hỗ trợ trong bất kỳ trình duyệt nào]
Hãy xem xét chi tiết từng loại mới này và xem cách chúng ta có thể
đưa chúng vào sử dụng
Tìm kiếm
Loại đầu vào search
[_______17_______7] cung cấp trường tìm kiếm—điều khiển nhập văn bản một dòng để nhập một hoặc nhiều cụm từ tìm kiếm. Thông số kỹ thuật
Sự khác biệt giữa trạng thái văn bản và trạng thái tìm kiếm chủ yếu là phong cách. trên các nền tảng nơi các trường tìm kiếm được phân biệt với các trường văn bản thông thường, trạng thái tìm kiếm có thể dẫn đến giao diện nhất quán với các trường tìm kiếm của nền tảng thay vì xuất hiện như một trường văn bản thông thường
Nhiều trình duyệt định kiểu đầu vào tìm kiếm theo cách nhất quán với hộp tìm kiếm của trình duyệt hoặc hệ điều hành. Hiện tại, Chrome, Safari, Opera và IE đã thêm khả năng xóa đầu vào bằng cách nhấp chuột bằng cách cung cấp biểu tượng × sau khi văn bản được nhập vào trường, như thể hiện trong Hình 4. 5. Các loại đầu vào ngày/giờ cũng có thể xóa được trong Chrome và Opera và IE11 bao gồm biểu tượng × để xóa hầu hết các loại đầu vào hiện tại, bao gồm cả đầu vào của loại văn bản
hinh 4. 5. Loại đầu vào tìm kiếm được tạo kiểu giống với các trường tìm kiếm của hệ điều hành
Trên các thiết bị của Apple, trường tìm kiếm có các góc được bo tròn theo mặc định trong Chrome, Safari và Opera, phù hợp với giao diện trường tìm kiếm của thiết bị. Trên bàn di chuột có bàn phím động, nút “đi” xuất hiện dưới dạng biểu tượng tìm kiếm hoặc từ “tìm kiếm”, tùy thuộc vào thiết bị. Nếu bạn bao gồm thuộc tính kết quả không chuẩn, Chrome và Opera sẽ hiển thị biểu tượng kính lúp/kính nhìn trong trường biểu mẫu
Mặc dù bạn vẫn có thể sử dụng type="text"
cho các trường tìm kiếm, loại tìm kiếm mới là một gợi ý trực quan về nơi người dùng cần đến để tìm kiếm trang web và cung cấp một giao diện mà người dùng quen thuộc. HTML5 Herald không có trường tìm kiếm, nhưng đây là một ví dụ về cách bạn sử dụng nó
Search
Vì
My website is located at:
9 giống như tất cả các loại đầu vào mới, xuất hiện dưới dạng hộp văn bản thông thường trong các trình duyệt không hỗ trợ, nên không có lý do gì để không sử dụng nó khi thích hợpĐịa chỉ email
Loại email
input
1, không ngạc nhiên, được sử dụng để chỉ định một hoặc nhiều địa chỉ email. Nó hỗ trợ thuộc tính Boolean input
2, cho phép nhiều địa chỉ email được phân tách bằng dấu phẩy [có dấu cách tùy chọn]
Hãy thay đổi biểu mẫu của chúng tôi để sử dụng input
3 cho địa chỉ email của người đăng ký
My email address is
Nếu bạn thay đổi loại đầu vào từ
My email address is
0 thành email
, như chúng tôi đã thực hiện ở đây, bạn sẽ không nhận thấy thay đổi rõ ràng nào trong giao diện người dùng; . Tuy nhiên, có sự khác biệt đằng sau hậu trườngSự thay đổi trở nên rõ ràng nếu bạn đang sử dụng thiết bị có bàn di chuột. Khi bạn tập trung vào trường email, hầu hết các thiết bị cảm ứng—chẳng hạn như iPad hoặc điện thoại Android chạy Chromium—đều sẽ hiển thị bàn phím được tối ưu hóa để nhập email, bao gồm ký hiệu @, dấu chấm và nút dấu cách, nhưng không có dấu phẩy, như minh họa trong . 6
hinh 4. 6. Kiểu nhập email cung cấp bàn phím tùy chỉnh trên thiết bị iOS
Firefox, Chrome, Opera và Internet Explorer 10 cũng cung cấp thông báo lỗi cho các mục nhập email không hợp lệ. nếu bạn cố gắng gửi biểu mẫu có nội dung không thể nhận dạng dưới dạng một hoặc nhiều địa chỉ email, trình duyệt sẽ cho bạn biết điều gì sai. Các thông báo lỗi mặc định được hiển thị trong Hình 4. 7
hinh 4. 7. Thông báo lỗi do định dạng sai địa chỉ email trên Opera [trái] và Firefox [phải]
Ghi chú. Thông báo xác thực tùy chỉnh
Không thích thông báo lỗi mặc định mà trình duyệt cung cấp? . input
7 nhận thông báo lỗi mà bạn muốn cung cấp làm tham số duy nhất. Nếu bạn đặt thông báo xác thực tùy chỉnh, khi giá trị đó trở nên hợp lệ, bạn phải đặt thông báo xác thực thành một chuỗi trống [giá trị giả] để cho phép gửi biểu mẫu
function setErrorMessages[formControl] {
var validityState_object = formControl.validity;
if [validityState_object.valueMissing] {
formControl.setCustomValidity['Please set an age
↵[required]'];
} else if [validityState_object.rangeUnderflow] {
formControl.setCustomValidity['You\'re too young'];
} else if [validityState_object.rangeOverflow] {
formControl.setCustomValidity['You\'re too old'];
} else if [validityState_object.stepMismatch] {
formControl.setCustomValidity['Counting half
↵birthdays?'];
} else {
//if valid, must set falsy value or will always error
formControl.setCustomValidity[''];
}
}
Thật không may, trong khi bạn có thể thay đổi nội dung của tin nhắn, thì bạn lại bị mắc kẹt với hình thức của nó, ít nhất là vào lúc này
URL
Đầu vào
function setErrorMessages[formControl] {
var validityState_object = formControl.validity;
if [validityState_object.valueMissing] {
formControl.setCustomValidity['Please set an age
↵[required]'];
} else if [validityState_object.rangeUnderflow] {
formControl.setCustomValidity['You\'re too young'];
} else if [validityState_object.rangeOverflow] {
formControl.setCustomValidity['You\'re too old'];
} else if [validityState_object.stepMismatch] {
formControl.setCustomValidity['Counting half
↵birthdays?'];
} else {
//if valid, must set falsy value or will always error
formControl.setCustomValidity[''];
}
}
5 input
9 được sử dụng để chỉ định địa chỉ web. Giống như email
, nó sẽ xuất hiện dưới dạng trường văn bản bình thường. Trên nhiều màn hình cảm ứng, bàn phím ảo được hiển thị sẽ được tối ưu hóa cho mục nhập địa chỉ web, với dấu gạch chéo lên [/] và dấu “. phím tắt com”Hãy cập nhật biểu mẫu đăng ký của chúng tôi để sử dụng loại đầu vào url
My website is located at:
Xác thực URL
Tất cả các trình duyệt hiện đại bắt đầu với Internet Explorer 10 đều hỗ trợ loại đầu vào url, báo cáo đầu vào là không hợp lệ nếu giá trị không bắt đầu bằng một giao thức. Chỉ có định dạng giao thức chung của một URL được xác thực, vì vậy, ví dụ: type
1 sẽ được coi là hợp lệ, mặc dù type
2 không phải là một giao thức thực và type
3 không phải là một miền cấp cao nhất thực sự. Nếu bạn muốn giá trị đã nhập tuân theo một định dạng cụ thể hơn, hãy cung cấp thông tin trong nhãn của bạn [hoặc trong trình giữ chỗ] để cho người dùng của bạn biết và sử dụng thuộc tính mẫu để đảm bảo rằng thông tin đó chính xác, như đã mô tả trước đó
Số điện thoại
Đối với số điện thoại, hãy sử dụng kiểu đầu vào
function setErrorMessages[formControl] {
var validityState_object = formControl.validity;
if [validityState_object.valueMissing] {
formControl.setCustomValidity['Please set an age
↵[required]'];
} else if [validityState_object.rangeUnderflow] {
formControl.setCustomValidity['You\'re too young'];
} else if [validityState_object.rangeOverflow] {
formControl.setCustomValidity['You\'re too old'];
} else if [validityState_object.stepMismatch] {
formControl.setCustomValidity['Counting half
↵birthdays?'];
} else {
//if valid, must set falsy value or will always error
formControl.setCustomValidity[''];
}
}
6 type
5. Không giống như các loại function setErrorMessages[formControl] {
var validityState_object = formControl.validity;
if [validityState_object.valueMissing] {
formControl.setCustomValidity['Please set an age
↵[required]'];
} else if [validityState_object.rangeUnderflow] {
formControl.setCustomValidity['You\'re too young'];
} else if [validityState_object.rangeOverflow] {
formControl.setCustomValidity['You\'re too old'];
} else if [validityState_object.stepMismatch] {
formControl.setCustomValidity['Counting half
↵birthdays?'];
} else {
//if valid, must set falsy value or will always error
formControl.setCustomValidity[''];
}
}
5 và email
, loại tel không thực thi một cú pháp hoặc mẫu cụ thể. Chữ cái và số—thật vậy, bất kỳ ký tự nào không phải là dòng mới hoặc dấu xuống dòng—đều hợp lệ. Có một lý do tốt cho việc này. trên toàn thế giới, các quốc gia có số điện thoại hợp lệ với nhiều độ dài và dấu câu khác nhau, vì vậy không thể chỉ định một định dạng duy nhất làm tiêu chuẩn. Ví dụ: ở Hoa Kỳ, +1[415]555-1212 cũng được hiểu như 415. 555. 1212, nhưng các công ty cũng có thể sử dụng các chữ cái trong số điện thoại của họ, chẳng hạn như [800]GỌI NGAY BÂY GIỜBạn có thể khuyến khích một định dạng cụ thể bằng cách bao gồm một trình giữ chỗ với cú pháp chính xác hoặc một nhận xét sau khi nhập kèm theo một ví dụ. Ngoài ra, bạn có thể quy định định dạng bằng cách sử dụng thuộc tính mẫu. Bao gồm tiêu đề với thuộc tính mẫu để cung cấp chú giải công cụ và để cải thiện UX của thông báo lỗi xác thực gốc. Bạn cũng có thể sử dụng phương pháp input
7 để cung cấp thêm thông tin xác thực phía máy khách
Khi sử dụng loại đầu vào
function setErrorMessages[formControl] {
var validityState_object = formControl.validity;
if [validityState_object.valueMissing] {
formControl.setCustomValidity['Please set an age
↵[required]'];
} else if [validityState_object.rangeUnderflow] {
formControl.setCustomValidity['You\'re too young'];
} else if [validityState_object.rangeOverflow] {
formControl.setCustomValidity['You\'re too old'];
} else if [validityState_object.stepMismatch] {
formControl.setCustomValidity['Counting half
↵birthdays?'];
} else {
//if valid, must set falsy value or will always error
formControl.setCustomValidity[''];
}
}
6, bàn phím cảm ứng động thường sẽ hiển thị bàn phím điện thoại, bao gồm cả phím hoa thị và phím thăng. Bạn có thể sử dụng function setErrorMessages[formControl] {
var validityState_object = formControl.validity;
if [validityState_object.valueMissing] {
formControl.setCustomValidity['Please set an age
↵[required]'];
} else if [validityState_object.rangeUnderflow] {
formControl.setCustomValidity['You\'re too young'];
} else if [validityState_object.rangeOverflow] {
formControl.setCustomValidity['You\'re too old'];
} else if [validityState_object.stepMismatch] {
formControl.setCustomValidity['Counting half
↵birthdays?'];
} else {
//if valid, must set falsy value or will always error
formControl.setCustomValidity[''];
}
}
6 cho nhiều mục đích khác ngoài số điện thoại. Ví dụ: nó có thể là bàn phím tốt nhất để nhập biểu mẫu số an sinh xã hộiChia sẻ bài viết này
Alexis Goldstein
Lần đầu tiên Alexis Goldstein tự học HTML khi còn là học sinh trung học vào giữa những năm 1990 và tiếp tục lấy bằng Khoa học Máy tính tại Đại học Columbia. Cô điều hành công ty đào tạo và phát triển phần mềm của riêng mình, aut faciam LLC. Trước khi tự mình thành lập, Alexis đã dành bảy năm làm việc trong lĩnh vực Công nghệ ở Phố Wall, nơi cô làm việc trong cả không gian vốn chủ sở hữu tiền mặt và phái sinh vốn chủ sở hữu tại ba công ty lớn, đồng thời học cách yêu thích việc đánh giá mã hàng ngày. Cô ấy là giáo viên và là người đồng tổ chức Girl Develop It, đồng thời là thành viên rất đáng tự hào của không gian tin tặc NYC Resistor ở Brooklyn, NY
Estelle Weyl
Estelle Weyl là kỹ sư mặt trước đến từ San Francisco, người đã phát triển các trang web có thể truy cập dựa trên tiêu chuẩn từ năm 1999. Cô ấy cũng viết hai blog kỹ thuật với hàng triệu người truy cập. Niềm đam mê của cô ấy là dạy phát triển web, vì vậy bạn sẽ thấy cô ấy nói về CSS3, HTML5, JavaScript và phát triển web di động tại các hội nghị trên khắp Hoa Kỳ
Louis Lazaris
Louis đã tham gia vào ngành phát triển web từ năm 2000 và là người đồng biên tập nội dung HTML/CSS trên SitePoint. Anh ấy viết blog tại Impressive Webs và quản lý Web Tools Weekly, một bản tin dành cho các nhà phát triển front-end chủ yếu tập trung vào các công cụ