Hầu hết các trang web và ứng dụng đều bao gồm biểu mẫu web. Những trang web nói đùa, chẳng hạn như DoWebsites<form>.
Phần tử HTML <form> xác định một địa danh của tài liệu có chứa
các chế độ kiểm soát mang tính tương tác để gửi thông tin. Được lồng trong một <form>, bạn sẽ thấy tất cả các mã tương tác (và không tương tác)
biểu mẫu tạo nên biểu mẫu đó.
HTML rất mạnh mẽ. Phần này tập trung vào sức mạnh của HTML, trình bày những việc HTML có thể làm mà không cần thêm JavaScript. Việc sử dụng dữ liệu biểu mẫu phía máy khách để cập nhật giao diện người dùng theo một cách nào đó thường liên quan đến CSS hoặc JavaScript, những vấn đề sẽ không được thảo luận ở đây. Có toàn bộ khóa học Tìm hiểu biểu mẫu. Chúng tôi sẽ không sao chép phần đó ở đây, nhưng chúng tôi sẽ giới thiệu một số kiểm soát biểu mẫu và thuộc tính HTML hỗ trợ các thao tác đó.
Với biểu mẫu, bạn có thể cho phép người dùng tương tác với trang web hoặc ứng dụng của mình, xác thực thông tin đã nhập và gửi
dữ liệu đến máy chủ. Các thuộc tính HTML có thể cho phép yêu cầu người dùng chọn các thành phần điều khiển biểu mẫu hoặc nhập một giá trị. HTML
có thể xác định tiêu chí cụ thể mà giá trị phải khớp để hợp lệ. Khi người dùng cố gắng gửi biểu mẫu,
tất cả các giá trị kiểm soát biểu mẫu đều trải qua quy trình xác thực quy tắc ràng buộc phía máy khách và có thể ngăn việc gửi biểu mẫu
cho đến khi dữ liệu khớp với các tiêu chí bắt buộc; tất cả đều không có JavaScript. Bạn cũng có thể tắt tính năng này bằng cách đặt novalidate
trên <form> hoặc thường là formnovalidate trên một nút, lưu dữ liệu biểu mẫu để hoàn tất sau,
ngăn việc xác thực.
Gửi biểu mẫu
Biểu mẫu được gửi khi người dùng kích hoạt nút gửi được lồng trong biểu mẫu. Khi sử dụng <input> cho các nút,
"value" là nhãn của nút và được hiển thị trong nút. Khi sử dụng <button>, nhãn là văn bản nằm giữa phần mở đầu
và đóng thẻ <button>. Bạn có thể viết nút gửi theo một trong hai cách:
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
Đối với một biểu mẫu rất đơn giản, bạn cần có phần tử <form>, bên trong có một số thông tin đầu vào trong biểu mẫu và nút gửi. Tuy nhiên, có một
là số lần gửi biểu mẫu nhiều hơn thế.
Các thuộc tính của phần tử <form> thiết lập phương thức HTTP bằng cách
chứa biểu mẫu được gửi và URL xử lý việc gửi biểu mẫu. Có, biểu mẫu có thể được gửi, xử lý và
một trang mới có thể tải được mà không cần JavaScript. Phần tử <form> vô cùng mạnh mẽ.
action và method của phần tử <form>
giá trị thuộc tính xác định URL xử lý dữ liệu biểu mẫu và phương thức HTTP dùng để gửi dữ liệu, theo thứ tự tương ứng.
Theo mặc định, dữ liệu biểu mẫu được gửi đến trang hiện tại. Nếu không, hãy đặt thuộc tính action thành URL của nơi dữ liệu sẽ được gửi đến.
Dữ liệu gửi đi bao gồm các cặp tên/giá trị của các lựa chọn kiểm soát biểu mẫu của biểu mẫu. Theo mặc định, danh sách này sẽ bao gồm tất cả các biểu mẫu
các chế độ điều khiển lồng trong biểu mẫu có name. Tuy nhiên, với thuộc tính form, bạn có thể thêm các thành phần điều khiển biểu mẫu
bên ngoài <form> và bỏ qua các thành phần điều khiển biểu mẫu được lồng trong <form>. Được hỗ trợ trên các đối tượng điều khiển biểu mẫu và <fieldset>,
thuộc tính form lấy giá trị id của biểu mẫu mà điều khiển liên kết với nó, không nhất thiết là dạng của nó
được lồng vào đó. Điều này có nghĩa là bạn không cần phải lồng các thành phần điều khiển biểu mẫu vào <form>.
Thuộc tính method xác định giao thức HTTP của yêu cầu: thường là GET hoặc POST. Với GET, dữ liệu biểu mẫu sẽ được gửi dưới dạng
chuỗi tham số của các cặp name=value, được nối vào URL của action.
Với POST, dữ liệu sẽ được thêm vào phần nội dung của yêu cầu HTTP. Khi gửi dữ liệu bảo mật, chẳng hạn như mật khẩu và thẻ tín dụng
và luôn sử dụng POST.
Ngoài ra còn có một phương thức DIALOG. Nếu <form method="dialog"> nằm trong <dialog>, thì việc gửi biểu mẫu sẽ đóng hộp thoại;
có một sự kiện gửi mặc dù dữ liệu không bị xoá hay được gửi. Xin nhắc lại là không có JavaScript. Vấn đề này được thảo luận trong
phần hộp thoại. Xin lưu ý rằng vì thao tác này không gửi biểu mẫu nên có thể bạn muốn
hãy đưa cả formmethod="dialog" và formnovalidate vào nút gửi.
Các nút biểu mẫu có thể có nhiều hơn các thuộc tính được mô tả ở đầu phần này. Nếu nút này chứa formaction,
Thuộc tính formenctype, formmethod, formnovalidate hoặc formtarget, các giá trị được đặt trên nút kích hoạt biểu mẫu
bài gửi được ưu tiên hơn action, enctype, method và target
được đặt vào <form>. Việc xác thực điều kiện ràng buộc diễn ra trước khi gửi biểu mẫu, nhưng chỉ khi không có
formnovalidate trên nút gửi đã kích hoạt hoặc novalidate trên <form>.
Để biết nút nào được dùng để gửi biểu mẫu, hãy cung cấp
nút name. Các nút không có tên hoặc giá trị sẽ không được gửi cùng với dữ liệu biểu mẫu khi gửi biểu mẫu.
Sau khi gửi biểu mẫu
Khi người dùng gửi biểu mẫu trực tuyến đã hoàn tất, tên và giá trị của các tùy chọn kiểm soát biểu mẫu có liên quan sẽ được gửi. Tên là giá trị của thuộc tính name. Các giá trị đến từ nội dung của thuộc tính value hoặc giá trị do người dùng nhập hoặc chọn. Giá trị của <textarea> là văn bản bên trong.
Giá trị của <select> là value của <option> đã chọn hoặc nếu <option> không có thuộc tính value thì giá trị là văn bản bên trong của tuỳ chọn đã chọn.
<form method="GET">
<label for="student">Pick a student:</label>
<select name="student" id="student">
<option value="hoover">Hoover Sukhdeep</option>
<option>Blendan Smooth</option>
<option value="toasty">Toasty McToastface</option>
</select>
<input type="submit" value="Submit Form">
</form>
Chọn "Hoover Sukhdeep" (hoặc không làm gì cả khi trình duyệt hiển thị và chọn giá trị tuỳ chọn đầu tiên theo mặc định) rồi nhấp vào nút gửi sẽ tải lại trang này, đồng thời đặt URL thành:
https://web.dev/learn/html/forms?student=hoover
Vì lựa chọn thứ hai không có thuộc tính value nên văn bản bên trong được gửi làm giá trị. Chọn "Bông pha trộn"
và việc nhấp vào nút gửi sẽ tải lại trang này, đồng thời đặt URL thành:
https://web.dev/learn/html/forms?student=Blendan+Smooth
Khi biểu mẫu được gửi, thông tin được gửi bao gồm tên và giá trị của tất cả các đối tượng kiểm soát biểu mẫu được đặt tên có name
ngoại trừ các hộp đánh dấu chưa được chọn, nút radio chưa được chọn, tên và giá trị của bất kỳ nút nào không phải là nút
đã gửi biểu mẫu. Đối với tất cả các thành phần điều khiển biểu mẫu khác, nếu thành phần điều khiển biểu mẫu có tên nhưng không có giá trị nào được nhập hoặc đặt mặc định, thì
name của kiểm soát biểu mẫu được gửi với giá trị trống.
Có 22 loại dữ liệu đầu vào, vì vậy, chúng ta không thể bao gồm tất cả.
Xin lưu ý rằng việc thêm giá trị là không bắt buộc và thường là việc không nên làm khi bạn muốn người dùng nhập thông tin.
Đối với các phần tử <input> mà người dùng không thể chỉnh sửa giá trị, bạn phải luôn thêm giá trị cho giá trị nhập
các phần tử có loại hidden, radio, checkbox, submit, button và reset.
Việc sử dụng các name duy nhất cho các tuỳ chọn kiểm soát biểu mẫu giúp việc xử lý dữ liệu phía máy chủ trở nên đơn giản hơn và được khuyên dùng, có các hộp đánh dấu và
nút chọn là ngoại lệ cho quy tắc này.
Nút chọn
Nếu bạn thấy rằng khi chọn một nút chọn trong một nhóm nút chọn, bạn chỉ có thể chọn một nút tại
một lần, đó là do thuộc tính name. Hiệu ứng chỉ có thể chọn này được tạo bằng cách cung cấp cho từng nút chọn
trong một nhóm có cùng name.
name phải là duy nhất cho nhóm: nếu bạn vô tình sử dụng cùng một name cho hai nhóm riêng biệt, hãy chọn một đài
trong nhóm thứ hai sẽ bỏ chọn mọi lựa chọn được thực hiện trong nhóm đầu tiên có cùng name.
name cùng với value của nút chọn sẽ được gửi cùng với biểu mẫu. Hãy đảm bảo mỗi nút chọn có
value phù hợp (và thường là duy nhất). Sẽ không gửi giá trị của các nút chọn chưa được chọn.
Bạn có thể có bao nhiêu nhóm radio trên một trang tùy thích, mỗi nhóm hoạt động độc lập, miễn là mỗi nhóm có
duy nhất cho nhóm name.
Nếu bạn muốn tải trang bằng một trong các nút chọn trong một nhóm có cùng tên đã chọn, hãy thêm thuộc tính checked.
Nút chọn này sẽ khớp với lớp giả CSS :default,
ngay cả khi người dùng chọn một đài khác. Nút chọn đang được chọn khớp với nút :checked
lớp giả.
Nếu người dùng được yêu cầu chọn một nút điều khiển chọn trong một nhóm nút chọn, hãy thêm thuộc tính required vào ít nhất một nút
của các chế độ điều khiển. Việc đưa required vào nút chọn trong nhóm sẽ thực hiện một lựa chọn bắt buộc để gửi biểu mẫu, nhưng
không nhất thiết phải là đài có thuộc tính được chọn là hợp lệ. Ngoài ra, hãy nêu rõ trong <legend>
bắt buộc phải có quyền kiểm soát biểu mẫu. Việc gắn nhãn các nhóm nút chọn cùng với từng nút riêng lẻ được mô tả
sau này.
Hộp kiểm
Tất cả các hộp đánh dấu trong một nhóm đều có cùng name. Chỉ các hộp đánh dấu được chọn mới có name và value
gửi cùng biểu mẫu. Nếu bạn chọn nhiều hộp đánh dấu có cùng tên, thì hệ thống sẽ gửi cùng một tên
(hy vọng) các giá trị khác nhau. Nếu bạn có nhiều tùy chọn kiểm soát biểu mẫu có cùng tên, ngay cả khi chúng không phải là tất cả các hộp đánh dấu,
đều được gửi, phân tách bằng ký hiệu "và".
Nếu bạn không thêm value vào hộp đánh dấu, thì giá trị của các hộp đánh dấu đã chọn sẽ mặc định là on và có thể không
rất hữu ích. Nếu bạn đã đánh dấu vào 3 hộp đánh dấu có tên là chk, thì biểu mẫu sẽ không giải mã được:
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
Để tạo hộp đánh dấu bắt buộc, hãy thêm thuộc tính required. Luôn thông báo cho người dùng khi phải đánh dấu vào hộp đánh dấu hoặc khi
bắt buộc phải có bất kỳ chế độ kiểm soát biểu mẫu nào. Việc thêm required vào một hộp đánh dấu chỉ khiến hộp đánh dấu đó là bắt buộc; điều này không ảnh hưởng đến các
hộp đánh dấu có cùng tên.
Nhãn và nhóm trường
Để người dùng biết cách điền vào biểu mẫu, biểu mẫu đó phải truy cập được. Mọi tùy chọn kiểm soát biểu mẫu phải có một nhãn.
Bạn cũng muốn gắn nhãn các nhóm chứa biểu mẫu. Trong khi từng vùng nhập, chọn và văn bản được gắn nhãn <label>,
các nhóm điều khiển biểu mẫu được gắn nhãn theo nội dung của <legend> của
<fieldset> giúp nhóm các quảng cáo đó.
Trong các ví dụ trước, bạn có thể nhận thấy mỗi thành phần điều khiển biểu mẫu (ngoại trừ nút gửi) đều có một <label>. Nhãn
cung cấp kiểm soát biểu mẫu với tên thành phần hỗ trợ tiếp cận. Các nút là tên thành phần hỗ trợ tiếp cận dựa trên nội dung hoặc giá trị của chúng. Tất cả các giá trị khác
các đối tượng điều khiển biểu mẫu cần có một <label> được liên kết. Nếu không có nhãn được liên kết, trình duyệt sẽ vẫn hiển thị các thành phần điều khiển biểu mẫu của bạn,
nhưng người dùng sẽ không biết họ chờ đợi thông tin nào.
Để liên kết rõ ràng một chế độ kiểm soát biểu mẫu với <label>, hãy thêm thuộc tính for vào <label>: giá trị là
id của kiểm soát biểu mẫu được liên kết.
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
Việc liên kết nhãn với các tùy chọn kiểm soát biểu mẫu có một số lợi ích. Nhãn giúp người dùng trình đọc màn hình có thể truy cập các điều khiển biểu mẫu bằng cách cung cấp tên thành phần hỗ trợ tiếp cận cho chức năng điều khiển. Nhãn cũng là "khu vực đã truy cập"; chúng làm cho trang web trở nên hữu ích hơn cho người dùng mở rộng diện tích cho các vấn đề về độ khéo léo. Nếu bạn đang sử dụng chuột, hãy thử nhấp vào bất cứ đâu trên nhãn "Tên của bạn". Đang thực hiện vì vậy, hãy lấy tâm điểm nhập.
Để cung cấp các nhãn ngầm ẩn, hãy thêm phần điều khiển biểu mẫu vào giữa thẻ mở và đóng <label>. Điều này cũng tương đương
có thể truy cập từ cả góc nhìn trình đọc màn hình và thiết bị con trỏ, nhưng không cung cấp hook tạo kiểu như
.
<label>Your name
<input type="text" name="name">
</label>
Vì nhãn là "khu vực đã truy cập", nên đừng bao gồm các yếu tố tương tác trong một nhãn rõ ràng hoặc bất kỳ thành phần tương tác nào khác ngoài tuỳ chọn kiểm soát biểu mẫu được gắn nhãn trong nhãn ngầm ẩn. Ví dụ: nếu bạn đưa đường liên kết vào nhãn, trong khi trình duyệt sẽ hiển thị HTML, người dùng của bạn sẽ bị nhầm lẫn nếu họ nhấp vào nhãn để vào biểu mẫu kiểm soát nhưng lại được chuyển hướng đến một trang mới.
Nhìn chung, <label> xuất hiện trước phần điều khiển biểu mẫu, ngoại trừ trường hợp nút chọn và hộp đánh dấu. Đây không phải là yêu cầu bắt buộc.
Đó chỉ là mẫu trải nghiệm người dùng phổ biến. Loạt video Learn Forms có thông tin về thiết kế biểu mẫu.
Đối với các nhóm nút chọn và hộp đánh dấu, nhãn sẽ cung cấp tên thành phần hỗ trợ tiếp cận cho phần điều khiển biểu mẫu;
nhưng nhóm kiểm soát và nhãn của chúng cũng cần có nhãn. Để gắn nhãn nhóm, hãy nhóm tất cả các phần tử vào một nhóm
<fieldset>, trong đó <legend> cung cấp nhãn cho nhóm.
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<label>
<input type="radio" value="blendan" name="machine"> Blendan Smooth
</label>
</li>
<li>
<label>
<input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
</label>
</li>
<li>
<label>
<input type="radio" value="toasty" name="machine"> Toasty McToastface
</label>
</li>
</ul>
</fieldset>
Trong ví dụ này, <label> ngầm ẩn mỗi nhãn gắn nhãn một nút chọn và <legend> cung cấp nhãn cho nhóm nút chọn.
Việc lồng <fieldset> bên trong một <fieldset> khác là phương pháp tiêu chuẩn. Ví dụ: nếu biểu mẫu là một bản khảo sát gồm nhiều câu hỏi
được chia thành các nhóm câu hỏi có liên quan,
"học sinh yêu thích" <fieldset> có thể được lồng vào một <fieldset> khác được gắn nhãn là
"Video yêu thích của bạn":
<fieldset>
<legend>Your favorites:</legend>
<ul start="6">
<li>
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<!-- the rest of the code here -->
Các phần tử này giao diện mặc định khiến chúng không được sử dụng đúng mức, nhưng bạn có thể định kiểu cho <legend> và <fieldset> bằng CSS.
Ngoài tất cả các thuộc tính chung, <fieldset> cũng hỗ trợ các thuộc tính name, disabled và form.
Khi bạn tắt một nhóm trường, tất cả các chế độ điều khiển biểu mẫu lồng nhau đều bị tắt. Cả name và thuộc tính form đều không
sử dụng nhiều trên <fieldset>. Bạn có thể sử dụng name để truy cập vào nhóm trường bằng JavaScript, nhưng bản thân nhóm trường đó
không được bao gồm trong dữ liệu đã gửi (bao gồm các đối tượng kiểm soát biểu mẫu được đặt tên lồng trong đó).
Loại phương thức nhập và bàn phím động
Như đã lưu ý trước đó, có 22 loại dữ liệu đầu vào.
Trong một số trường hợp, khi người dùng sử dụng một thiết bị có bàn phím động chỉ hiển thị khi cần, chẳng hạn như điện thoại, phương thức nhập
loại được sử dụng xác định loại bàn phím được hiển thị. Bàn phím mặc định hiển thị có thể được tối ưu hoá cho loại phương thức nhập cần thiết.
Ví dụ: loại tel sẽ hiển thị một bàn phím được tối ưu hoá để nhập số điện thoại; email bao gồm @ và .; và
bàn phím động cho url bao gồm một dấu hai chấm và ký hiệu dấu gạch chéo. Rất tiếc, iPhone vẫn không có : trong
bàn phím động mặc định cho kiểu nhập url.
Bàn phím cho <input type="tel"> trên iPhone và hai điện thoại Android khác nhau:
Bàn phím cho <input type="email"> trên iPhone và hai điện thoại Android khác nhau:
Truy cập vào micrô và camera
Loại tệp nhập <input type="file"> cho phép tải tệp lên thông qua biểu mẫu. Tệp có thể thuộc bất kỳ loại nào, được xác định và giới hạn
theo thuộc tính accept. Danh sách các loại tệp được chấp nhận có thể là danh sách đuôi tệp được phân tách bằng dấu phẩy, loại chung,
hoặc kết hợp các loại và phần mở rộng chung. Ví dụ: accept="video/*, .gif" chấp nhận mọi tệp video hoặc gif động.
Sử dụng "audio/*" cho tệp âm thanh, "video/*" cho tệp video và "image/*" cho tệp hình ảnh.
Thuộc tính capture liệt kê, được xác định trong
thông số kỹ thuật chụp nội dung nghe nhìn, có thể dùng nếu một nội dung nghe nhìn mới
được tạo bằng máy ảnh hoặc micrô của người dùng. Bạn có thể đặt giá trị thành user cho các thiết bị đầu vào dành cho người dùng
hoặc environment cho camera sau hoặc micrô của điện thoại. Nhìn chung, việc sử dụng capture mà không có giá trị sẽ hiệu quả vì người dùng
sẽ chọn thiết bị đầu vào họ muốn sử dụng.
<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">
Tính năng xác thực được tích hợp sẵn
Ngoài ra, nếu không bao gồm JavaScript, HTML có thể ngăn việc gửi biểu mẫu có giá trị không hợp lệ.
Có một số bộ chọn CSS khớp với các đối tượng kiểm soát biểu mẫu dựa trên sự hiện diện của các thuộc tính HTML, bao gồm cả :required
và :optional nếu boolean required
đã được đặt hay chưa; :default nếu checked
được cố định giá trị trong mã; và :enabled hoặc :disabled,
tuỳ thuộc vào việc phần tử đó có tương tác hay không và liệu disabled
có thuộc tính tương ứng. Lớp giả :read-write khớp các phần tử với
contenteditable đã đặt và
các đối tượng kiểm soát biểu mẫu có thể chỉnh sửa theo mặc định, chẳng hạn như các loại dữ liệu đầu vào number, password và text (nhưng không phải là hộp đánh dấu,
nút chọn hoặc loại hidden và các loại khác). Nếu một phần tử thường có thể ghi có readonly
tập hợp thuộc tính này, thì URL này sẽ khớp với :read-only.
Khi người dùng nhập thông tin vào các thành phần điều khiển biểu mẫu, các bộ chọn giao diện người dùng CSS, bao gồm cả :valid,
:invalid, :in-range và
:out-of-range sẽ bật và tắt tuỳ theo tiểu bang. Khi người dùng
thoát khỏi thành phần điều khiển biểu mẫu, :user-invalid chưa được hỗ trợ đầy đủ hoặc
Lớp giả :user-valid sẽ khớp.
Bạn có thể sử dụng CSS để đưa ra gợi ý về việc liệu các thành phần điều khiển biểu mẫu có bắt buộc và có hợp lệ hay không khi người dùng tương tác với biểu mẫu. Bạn thậm chí có thể sử dụng CSS để ngăn người dùng nhấp vào nút gửi cho đến khi biểu mẫu hợp lệ:
form:invalid [type="submit"] {
opacity: 50%;
pointer-events: none;
}
Đoạn mã CSS này là một mẫu chống. Mặc dù giao diện người dùng của bạn trông trực quan và rõ ràng, nhưng nhiều người dùng vẫn cố gắng gửi biểu mẫu đến bật thông báo lỗi. Việc làm cho nút gửi bị vô hiệu hoá theo cách này không cho phép xác thực điều kiện ràng buộc, mà nhiều người dùng tin dùng.
CSS đã áp dụng được cập nhật liên tục dựa trên trạng thái hiện tại của giao diện người dùng. Ví dụ: khi bạn bao gồm loại dữ liệu đầu vào với
các quy tắc ràng buộc, chẳng hạn như email, number, url và các loại ngày, nếu giá trị không rỗng (không trống) và giá trị hiện tại
không phải là một email, số, url, ngày hoặc giờ hợp lệ, thì lớp giả của CSS :invalid sẽ khớp. Hằng số này
cập nhật khác với xác thực quy tắc ràng buộc HTML được tích hợp sẵn, vốn chỉ xảy ra khi người dùng cố gắng gửi biểu mẫu.
Việc xác thực quy tắc ràng buộc tích hợp sẵn chỉ liên quan đến các quy tắc ràng buộc được đặt bằng thuộc tính HTML. Mặc dù bạn có thể tạo kiểu cho một phần tử
trên các lớp giả :required và :valid/:invalid, trình duyệt đã cung cấp thông báo lỗi bắt nguồn từ các lỗi dựa trên
các thuộc tính required, pattern, min, max và thậm chí là type, bắt buộc phải có lượt gửi biểu mẫu.
Khi chúng tôi cố gắng gửi biểu mẫu mà không chọn học sinh yêu thích bắt buộc, việc xác thực điều kiện ràng buộc sẽ ngăn việc gửi biểu mẫu
do lỗi validityState.valueMissing.
Nếu bất kỳ thuộc tính nào trong validityState trả về true, thì thao tác gửi sẽ bị chặn và trình duyệt sẽ hiển thị thông báo lỗi
trong điều khiển biểu mẫu không chính xác đầu tiên, làm cho nó lấy tiêu điểm. Khi người dùng kích hoạt lượt gửi biểu mẫu và có các giá trị không hợp lệ,
điều khiển biểu mẫu không hợp lệ đầu tiên sẽ hiển thị thông báo lỗi và nhận tiêu điểm. Nếu chế độ kiểm soát bắt buộc không có giá trị nào được đặt, nếu
giá trị số nằm ngoài phạm vi hoặc nếu giá trị không phải là loại mà thuộc tính type yêu cầu, thì biểu mẫu sẽ không xác thực,
sẽ không được gửi và một thông báo lỗi sẽ xuất hiện.
Nếu giá trị number, ngày hoặc giờ thấp hơn giá trị min tối thiểu đã đặt hoặc cao hơn giá trị tối đa là max, thì giá trị điều khiển sẽ là :out-of-range (và :invalid) và
người dùng sẽ được thông báo về valididityState.rangeUnderflow,
validityState.rangeOverflow xảy ra khi
hãy thử gửi biểu mẫu. Nếu giá trị này không phù hợp với
Giá trị step, cho dù được đặt rõ ràng hay mặc định là 1, chế độ kiểm soát sẽ vẫn là :out-of-range (và :invalid) và sẽ có một
Lỗi validityState.stepMismatch. Lỗi xuất hiện dưới dạng bong bóng và theo mặc định cung cấp thông tin hữu ích về cách sửa lỗi.
Có các thuộc tính tương tự về độ dài của các giá trị: minlength
và các thuộc tính maxlength sẽ cảnh báo người dùng về lỗi
với validityState.tooLong hoặc
validityState.tooShort khi gửi.
maxlength cũng ngăn người dùng nhập quá nhiều ký tự.
Việc sử dụng thuộc tính maxlength có thể gây ra trải nghiệm không tốt cho người dùng. Nhìn chung, việc cho phép người dùng là trải nghiệm tốt hơn
nhập nhiều hơn độ dài ký tự cho phép, cung cấp bộ đếm, tùy chọn ở dạng
Phần tử <output> không được gửi cùng với biểu mẫu,
cho phép họ chỉnh sửa văn bản cho đến khi kết quả cho thấy chưa vượt quá độ dài tối đa cho phép. maxlength
có thể được đưa vào HTML của bạn; giống như mọi thứ chúng ta đã thảo luận, công cụ này hoạt động mà không cần JavaScript. Sau đó, khi tải, giá trị của
thuộc tính maxlength có thể được dùng để tạo bộ đếm ký tự này trong JavaScript.
Một số loại dữ liệu đầu vào có vẻ như có các quy tắc ràng buộc mặc định, nhưng lại không có các quy tắc ràng buộc này. Ví dụ: loại dữ liệu nhập tel cung cấp giá trị số
bàn phím điện thoại trên các thiết bị có bàn phím động, nhưng không giới hạn các giá trị hợp lệ. Đối với loại dữ liệu này cũng như
các loại dữ liệu đầu vào khác,
có thuộc tính pattern. Bạn có thể chỉ định một biểu thức chính quy mà giá trị cần phải khớp để được coi là hợp lệ.
Nếu một giá trị là chuỗi trống và bạn không bắt buộc phải cung cấp giá trị đó, thì điều này sẽ không gây ra validityState.patternMismatch
. Nếu là trường bắt buộc và để trống, thông báo lỗi mặc định cho validityState.valueMissing sẽ hiển thị với người dùng, thay vì
patternMismatch.
Đối với email, validityState.typeMismatch có lẽ cũng phù hợp
đáp ứng nhu cầu của bạn. Bạn nên thêm pattern
nên địa chỉ email nội bộ không có TLD sẽ không được chấp nhận là hợp lệ.
Thuộc tính mẫu cho phép cung cấp một biểu thức chính quy mà giá trị đó phải khớp. Khi yêu cầu khớp mẫu,
đảm bảo người dùng hiểu rõ họ mong đợi điều gì.
Bạn có thể thực hiện tất cả những việc này mà không cần một dòng JavaScript duy nhất, nhưng là API HTML, bạn có thể sử dụng JavaScript để đưa vào thông báo tuỳ chỉnh trong quá trình xác thực quy tắc ràng buộc. Bạn cũng có thể sử dụng JavaScript để cập nhật số lượng ký tự còn lại, hiển thị thanh tiến trình cho độ mạnh mật khẩu hoặc bất kỳ cách nào khác để tự động cải thiện khả năng hoàn thành.
Ví dụ:
Ví dụ này có một biểu mẫu trong một <dialog> với một <form> lồng nhau có 3 thành phần điều khiển biểu mẫu và 2 nút gửi, với
nhãn và hướng dẫn rõ ràng.
Nút gửi đầu tiên sẽ đóng hộp thoại. Sử dụng formmethod="dialog" để ghi đè phương thức mặc định của biểu mẫu và đóng
<dialog> mà không gửi hoặc xoá dữ liệu. Bạn cũng phải bao gồm formnovalidate, nếu không trình duyệt sẽ
hãy thử kiểm tra để đảm bảo tất cả các trường bắt buộc đều có giá trị. Người dùng nên đóng hộp thoại và biểu mẫu mà không
nhập dữ liệu bất kỳ; sẽ ngăn điều này xảy ra. Bao gồm aria-label="close" vì "X" là một tín hiệu hình ảnh quen thuộc nhưng
không phải là nhãn mô tả.
Các thành phần điều khiển biểu mẫu đều có nhãn ngầm định, nên bạn không cần thêm thuộc tính id hoặc for. Cả các phần tử đầu vào
có thuộc tính bắt buộc khiến chúng trở thành thuộc tính bắt buộc. Dữ liệu đầu vào số có step được thiết lập rõ ràng để minh hoạ cách step
bao gồm. Vì step mặc định là 1 nên bạn có thể bỏ qua thuộc tính này.
<select> có giá trị mặc định khiến thuộc tính required không cần thiết. Thay vì thêm thuộc tính value
trên mỗi tuỳ chọn, giá trị mặc định thành văn bản bên trong.
Nút gửi ở cuối thiết lập phương thức biểu mẫu thành POST. Khi bạn nhấp vào, tính hợp lệ của từng giá trị sẽ được kiểm tra. Nếu tất cả
đều hợp lệ, dữ liệu biểu mẫu sẽ được gửi, hộp thoại sẽ đóng và trang có thể chuyển hướng đến thankyou.php,
chính là URL hành động. Nếu thiếu bất kỳ giá trị nào hoặc nếu giá trị số có bước không khớp hoặc nằm ngoài phạm vi,
thông báo lỗi có liên quan do trình duyệt xác định sẽ xuất hiện, biểu mẫu sẽ không được gửi và hộp thoại sẽ không đóng.
Bạn có thể tuỳ chỉnh thông báo lỗi mặc định bằng validityState.setCustomValidity('message here')
. Chỉ cần lưu ý rằng nếu bạn đặt thông báo tuỳ chỉnh, thì thông báo đó phải được đặt rõ ràng thành chuỗi trống khi mọi thứ
hợp lệ, nếu không biểu mẫu sẽ không được gửi.
Lưu ý khác
Có cả một mục dành cho việc giúp người dùng của bạn nhập đúng dữ liệu vào biểu mẫu. Ưu đãi trải nghiệm người dùng, điều quan trọng là ngăn chặn người dùng mắc lỗi bằng cách bao gồm hướng dẫn và cung cấp gợi ý nếu cần. Mặc dù phần này đề cập đến cách chỉ riêng HTML có thể cung cấp tính năng xác thực ở phía máy khách, việc xác thực phải diễn ra ở cả phía máy khách và phía máy chủ. Thông tin xác thực có thể được cung cấp theo cách không phô trương trong quá trình hoàn thành biểu mẫu, chẳng hạn như thêm khi giá trị là chính xác. Tuy nhiên, đừng đưa ra thông báo lỗi trước khi quá trình kiểm soát biểu mẫu hoàn tất. Nếu người dùng có mắc lỗi hay không, hãy thông báo cho người dùng về lỗi và lỗi họ mắc phải.
Trong việc thiết kế biểu mẫu, bạn cần lưu ý rằng không phải ai cũng giống mình. Người gửi vô danh có thể có một chữ cái là họ (hoặc không có họ), có thể không có mã bưu chính, có thể có địa chỉ đường phố gồm ba dòng, có thể không có địa chỉ đường phố. Họ có thể đang xem bản dịch của biểu mẫu.
Các thành phần điều khiển biểu mẫu, nhãn và thông báo lỗi phải hiển thị trên màn hình một cách chính xác và có ý nghĩa theo phương thức lập trình
xác định được và được liên kết theo phương thức lập trình với thành phần biểu mẫu hoặc nhóm thích hợp. autocomplete
có thể và nên sử dụng để giúp hoàn thành biểu mẫu nhanh hơn cũng như cải thiện khả năng tiếp cận.
HTML cung cấp tất cả các công cụ để làm cho các điều khiển biểu mẫu cơ bản có thể truy cập được. Một thành phần biểu mẫu hoặc quy trình càng có tính tương tác càng cao, cần chú ý nhiều hơn đến khả năng hỗ trợ tiếp cận đối với việc quản lý tiêu điểm, thiết lập và cập nhật tên, vai trò của ARIA, và giá trị (nếu cần) và thông báo trực tiếp của ARIA theo yêu cầu. Nhưng, như chúng ta đã tìm hiểu ở đây, chỉ với HTML, bạn có thể nhận được lâu dài để đạt được mục tiêu về khả năng tiếp cận và tính hợp lệ mà không cần dùng đến ARIA hay JavaScript.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về biểu mẫu.
Làm cách nào để khiến các nút chọn thuộc cùng một nhóm?
name cho tất cả các lớp này.id cho tất cả các lớp này.Phần tử HTML nào dùng để cho người dùng biết mục đích của trường biểu mẫu này?
<h1><title><label>