Hầu hết các trang web và ứng dụng đều bao gồm một biểu mẫu web. Những trang web đùa giỡn, như DoWebsites<form>.
Phần tử HTML <form> xác định một điểm đánh dấu của tài liệu có chứa các chế độ điều khiển tương tác để gửi thông tin. Lồng trong <form>, bạn sẽ tìm thấy tất cả các tuỳ chọn điều khiển biểu mẫu có tính tương tác (và không tương tác) 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, bao gồm những gì 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 điều này sẽ không được thảo luận ở đây. Bạn có thể tham gia toàn bộ khoá học Tìm hiểu về Biểu mẫu. Chúng tôi sẽ không sao chép phần đó ở đây, nhưng sẽ ra mắt một số chế độ kiểm soát biểu mẫu và các thuộc tính HTML hỗ trợ các chế độ đó.
Với các 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ủ. Thuộc tính HTML có thể cho phép yêu cầu người dùng chọn các đối tượng kiểm soát biểu mẫu hoặc nhập một giá trị. Các thuộc tính HTML có thể xác định các tiêu chí cụ thể mà giá trị đó phải khớp thì mới hợp lệ. Khi người dùng cố gắng gửi biểu mẫu, tất cả giá trị kiểm soát biểu mẫu sẽ 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 cho đến khi dữ liệu khớp với 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: đặt thuộc tính 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à hiển thị trong nút. Khi sử dụng <button>, nhãn là văn bản nằm giữa các thẻ mở và đóng <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>, với một số thông tin nhập vào biểu mẫu bên trong và nút gửi. Tuy nhiên, còn nhiều việc khác cần gửi biểu mẫu.
Các thuộc tính của phần tử <form> đặt phương thức HTTP dùng để gửi biểu mẫu và URL xử lý việc gửi biểu mẫu. Có, các biểu mẫu có thể được gửi, xử lý và
có thể tải một trang mới mà không cần bất kỳ JavaScript nào. Phần tử <form> rất mạnh mẽ.
Các giá trị thuộc tính action và method của phần tử <form> 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 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.
Dữ liệu được gửi bao gồm các cặp tên/giá trị của các chế độ kiểm soát biểu mẫu khác nhau trong biểu mẫu. Theo mặc định, biểu mẫu này bao gồm tất cả các chế độ điều khiển
biểu mẫu được lồng trong biểu mẫu có name. Tuy nhiên, với thuộc tính form, bạn có thể đưa các chế độ kiểm soát biểu mẫu
bên ngoài <form> và bỏ qua các chế độ kiểm soát biểu mẫu lồng trong <form>. Được hỗ trợ trên các thành phần điều khiển biểu mẫu và <fieldset>, thuộc tính form lấy giá trị id tương ứng với dạng thành phần kiểm soát liên kết với thuộc tính đó, chứ không nhất thiết là dạng lồng ghép. Điều này có nghĩa là các thành phần điều khiển biểu mẫu không cần phải được lồng 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 được gửi dưới dạng một chuỗi thông số gồm các cặp name=value, nối thêm vào URL của action.
Với POST, dữ liệu này được thêm vào phần nội dung của yêu cầu HTTP. Khi gửi dữ liệu an toàn, chẳng hạn như mật khẩu và thông tin thẻ tín dụng, hãy 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á cũng như không được gửi. Không cần JavaScript. Điều này sẽ được thảo luận trong phần hộp thoại. Xin lưu ý rằng vì phương thức này không gửi biểu mẫu, nên có thể bạn cần đư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 bao gồm thuộc tính formaction, formenctype, formmethod, formnovalidate hoặc formtarget, thì các giá trị được đặt trên nút kích hoạt tính năng gửi biểu mẫu sẽ được ưu tiên so với action, enctype, method và target được đặt vào ngày <form>. Quá trình xác thực quy tắc ràng buộc xảy 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 và không có novalidate trên <form>.
Để ghi lại nút nào được dùng để gửi biểu mẫu, hãy cung cấp
name cho nút đó. 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 một biểu mẫu trực tuyến đã hoàn tất, tên và giá trị của các chế độ kiểm soát biểu mẫu có liên quan sẽ được gửi đi. Tên là giá trị của thuộc tính name. Các giá trị này được lấy 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 bao gồm thuộc tính value thì giá trị này sẽ là văn bản bên trong của lựa chọn được 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ả vì trình duyệt sẽ hiển thị và sau đó sẽ chọn giá trị tuỳ chọn đầu tiên theo mặc định), sau đó nhấp vào nút gửi sẽ tải lại trang này và đặ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 sẽ được gửi làm giá trị. Chọn "Blendan Smooth" rồi nhấp vào nút gửi sẽ tải lại trang này và đặ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 đã đặt tên và có name, ngoại trừ các hộp đánh dấu không được chọn, nút chọn không được chọn, tên và giá trị của bất kỳ nút nào khác với nút đã gửi biểu mẫu. Đối với tất cả các chế độ kiểm soát biểu mẫu khác, nếu chế độ kiểm soát biểu mẫu có tên nhưng chưa có giá trị nào được nhập hoặc đặt mặc định, thì name của chế độ kiểm soát biểu mẫu đó sẽ được gửi kèm theo giá trị trống.
Có 22 kiểu dữ liệu đầu vào nên chúng ta không thể trình bày hết 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à ý tưởng không tốt 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 một giá trị, bao gồm cả các phần tử đầu vào thuộc loại hidden, radio, checkbox, submit, button và reset.
Việc sử dụng các name duy nhất cho các chế độ kiểm soát biểu mẫu giúp cho việc xử lý dữ liệu phía máy chủ trở nên đơn giản hơn. Trong đó, các hộp đánh dấu và nút chọn là các trường hợp ngoại lệ đối với quy tắc này.
Nút chọn
Nếu bạn từng nhận thấy khi chọn một nút chọn trong một nhóm các nút chọn, bạn chỉ có thể chọn một nút chọn tại một thời điểm, đó 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 mỗi nút chọn trong một nhóm cùng một name.
name phải là duy nhất đối với 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, việc chọn một nút chọn trong nhóm thứ hai sẽ bỏ chọn bất kỳ lựa chọn nào đượ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 đã 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ó một value liên quan (và thường là duy nhất). Giá trị của các nút chọn không được chọn sẽ không được gửi.
Bạn có thể có bao nhiêu nhóm radio trên một trang tuỳ thích, trong đó mỗi nhóm hoạt động độc lập, miễn là mỗi nhóm có một name duy nhất với nhóm.
Nếu bạn muốn tải trang bằng một trong các nút chọn trong nhóm 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ả lập CSS :default, ngay cả khi người dùng chọn một đài khác. Nút chọn hiện được chọn khớp với lớp giả lập :checked.
Nếu người dùng bắt buộc phải chọn một nút điều khiển đài trong một nhóm các nút chọn, hãy thêm thuộc tính required vào ít nhất một trong các chế độ điều khiển đó. Khi đưa required vào một nút chọn trong một nhóm, lựa chọn này sẽ khiến bạn phải gửi biểu mẫu, nhưng lựa chọn này không nhất thiết phải là nút chọn có thuộc tính được chọn là hợp lệ. Ngoài ra, hãy nêu rõ trong <legend> rằng bắt buộc phải có chế độ 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ẻ sẽ được mô tả ở phần sau.
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ỉ những hộp đánh dấu đã chọn mới có name và value được gửi cùng với biểu mẫu. Nếu bạn có nhiều hộp đánh dấu có cùng tên được chọn, thì tên sẽ được gửi với (hy vọng là) các giá trị khác nhau. Nếu bạn có nhiều chế độ kiểm soát biểu mẫu có cùng tên, ngay cả khi đó không phải là tất cả các hộp đánh dấu, thì tất cả các hộp đánh dấu đó đều sẽ được gửi và được phân tách bằng ký hiệu và.
Nếu bạn không đưa 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 hữu ích. Nếu bạn có ba hộp kiểm có tên chk và tất cả đều được chọn, thì việc gửi biểu mẫu sẽ không hiểu được:
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
Để bắt buộc phải đánh dấu vào hộp, 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 cần sử dụng bất kỳ tuỳ chọn điều khiển biểu mẫu nào. Khi thêm required vào một hộp đánh dấu, hộp đánh dấu đó chỉ bắt buộc phải có mà không ảnh hưởng đến các hộp đánh dấu khác có cùng tên.
Nhãn và tập trường
Để người dùng biết cách điền vào một biểu mẫu, thì biểu mẫu đó phải truy cập được. Mọi chế độ kiểm soát biểu mẫu đều phải có nhãn.
Bạn cũng nên gắn nhãn cho các nhóm đối tượng kiểm soát 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 tượng điều khiển biểu mẫu được gắn nhãn theo nội dung của <legend> của <fieldset> để nhóm các vùng điều khiển đó.
Trong các ví dụ trước, bạn có thể nhận thấy mỗi tuỳ chọn kiểm soát biểu mẫu (ngoại trừ nút gửi) đều có <label>. Nhãn cung cấp các chế độ kiểm soát biểu mẫu bằng các tên thành phần hỗ trợ tiếp cận. Các nút lấy tên dễ tiếp cận từ nội dung hoặc giá trị của chúng. Tất cả các chế độ điều khiển biểu mẫu khác đều yêu cầu <label> được liên kết. Nếu không có nhãn 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 thông tin nào cần thiết.
Để liên kết rõ ràng một đối tượng kiểm soát biểu mẫu với <label>, hãy đưa thuộc tính for vào <label>: giá trị là id của đối tượng kiểm soát biểu mẫu liên kết với thuộc tính này.
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
Việc liên kết các nhãn với các đối tượng 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 vào các chế độ điều khiển biểu mẫu bằng cách cung cấp quyền kiểm soát bằng một tên dễ tiếp cận. Nhãn cũng là "vùng bị ảnh hưởng"; chúng giúp người dùng gặp vấn đề về độ linh hoạt của trang web dễ sử dụng hơn bằng cách tăng diện tích. Nếu bạn đang sử dụng chuột, hãy thử nhấp vào bất kỳ vị trí nào trên nhãn "Tên của bạn". Thao tác này sẽ lấy tiêu điểm nhập vào.
Để cung cấp các nhãn ngầm ẩn, hãy thêm chế độ kiểm soát biểu mẫu vào giữa các thẻ mở và đóng <label>. Bạn cũng có thể truy cập vào thành phần này từ cả góc nhìn của 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ư nhãn rõ ràng.
<label>Your name
<input type="text" name="name">
</label>
Vì nhãn là "vùng truy cập", đừng bao gồm các phần tử tương tác trong một nhãn tường minh hoặc bất kỳ thành phần tương tác nào khác ngoài chế độ kiểm soát biểu mẫu được gắn nhãn trong một nhãn ngầm ẩn. Ví dụ: nếu bạn đưa một đường liên kết vào nhãn, trong khi trình duyệt 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 một thành phần điều khiển biểu mẫu nhưng lại được chuyển hướng đến một trang mới.
Thường thì <label> xuất hiện trước thành phần điều khiển biểu mẫu, ngoại trừ trường hợp các nút chọn và hộp đánh dấu. Bạn không bắt buộc phải điền thông tin này.
Đó chỉ là mô hình trải nghiệm người dùng phổ biến. Loạt video Tìm hiểu biểu mẫu 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 dễ tiếp cận cho chế độ điều khiển biểu mẫu liên kết với nhóm điều khiển đó; nhưng nhóm điều khiển và nhãn của chúng cũng cần có nhãn. Để gắn nhãn cho nhóm, hãy nhóm tất cả các phần tử vào một <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 là một nút chọn và <legend> cung cấp nhãn cho nhóm các nút chọn.
Lồng <fieldset> vào 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, thì <fieldset> "học viên yêu thích" có thể được lồng vào một <fieldset> khác có nhãn là "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 -->
Giao diện mặc định của các phần tử này khiến chúng không được sử dụng đúng cách, nhưng bạn có thể tạo 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 đối tượng kiểm soát biểu mẫu lồng nhau sẽ bị tắt. Cả thuộc tính name và form đều không được sử dụng nhiều trên <fieldset>. Bạn có thể dùng name để truy cập tập trường bằng JavaScript, nhưng tập hợp trường đó không có trong dữ liệu gửi (bao gồm cả các thành phần điều khiển biểu mẫu có tên lồng trong đó).
Các 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 thiết bị có bàn phím động chỉ hiển thị khi cần thiết, chẳng hạn như điện thoại, thì kiểu nhập được dùng sẽ xác định loại bàn phím hiển thị. Bàn phím mặc định hiển thị có thể được tối ưu hoá cho loại dữ liệu 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à .; còn bàn phím động cho url bao gồm dấu hai chấm và 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 các 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à máy ảnh
Loại dữ liệu đầu vào của tệ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 loại bất kỳ, được xác định và giới hạn bằng 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 các đuôi tệp được phân tách bằng dấu phẩy, một loại chung hoặc tổ hợp các loại và đuôi tệp chung. Ví dụ: accept="video/*, .gif" chấp nhận mọi tệp video hoặc ảnh GIF động.
Sử dụng "audio/*" cho tệp âm thanh, "video/*" cho tệp video và "image/*" cho tệp hình ảnh.
Bạn có thể sử dụng thuộc tính capture được liệt kê trong thông số kỹ thuật ghi lại nội dung nghe nhìn nếu muốn tạo tệp nội dung nghe nhìn mới 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 mà người dùng nhìn thấy hoặc environment cho micrô hoặc máy ảnh sau của điện thoại. Nhìn chung, việc sử dụng capture không có giá trị sẽ hiệu quả vì người dùng sẽ chọn thiết bị đầu vào mà 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">
Xác thực được tích hợp sẵn
Xin nhắc lại, nếu không bao gồm bất kỳ JavaScript nào, HTML có thể ngăn gửi các 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 chế độ 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 :required và :optional nếu boolean required hay không; :default nếu checked được mã hoá cứng; và :enabled hoặc :disabled có thuộc tính {3/2} hay không, tuỳ thuộc vào việc có phần tử}{/2 hay không}{/2.disabled Lớp giả :read-write so khớp các phần tử có chế độ điều khiển biểu mẫu và đặt contenteditable theo mặc định có thể chỉnh sửa được, 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 hộp đánh dấu, nút chọn hoặc loại hidden, cùng với các loại khác). Nếu một phần tử có thể ghi thông thường có bộ thuộc tính readonly, thì phần tử đó sẽ khớp với :read-only.
Khi người dùng nhập thông tin vào các chế độ điều khiển biểu mẫu, các bộ chọn giao diện người dùng CSS, bao gồm :valid, :invalid, :in-range và :out-of-range sẽ bật và tắt tuỳ thuộc vào trạng thái. Khi người dùng thoát khỏi một chế độ kiểm soát biểu mẫu, lớp giả :user-invalid hoặc :user-valid chưa được hỗ trợ đầy đủ sẽ khớp với nhau.
Bạn có thể sử dụng CSS để đưa ra chỉ dẫn về việc liệu các chế độ kiểm soát biểu mẫu có bắt buộc hay không và có hợp lệ hay không khi người dùng tương tác với biểu mẫu. Thậm chí, bạn có thể 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à chống mẫu. Mặc dù giao diện người dùng có thể 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 để bật thông báo lỗi. Việc vô hiệu hoá nút gửi theo cách này sẽ không cho phép xác thực quy tắc ràng buộc, một tính năng mà nhiều người dùng sử 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 thêm các loại dữ liệu đầu vào có các điều kiện ràng buộc, chẳng hạn như email, number, url và loại ngày, nếu giá trị không rỗng (không rỗng) và giá trị hiện tại không phải là email, số, url, ngày hoặc giờ hợp lệ, thì lớp giả CSS :invalid sẽ khớp. Quá trình cập nhật liên tục này khác với quy trình xác thực quy tắc ràng buộc HTML tích hợp, 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 chỉ phù hợp với những 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ử dựa trên các lớp giả lập :required và :valid/:invalid, nhưng trình duyệt đã cung cấp thông báo lỗi bắt nguồn từ lỗi dựa trên các thuộc tính required, pattern, min, max và thậm chí là type khi gửi biểu mẫu.
Khi chúng ta cố gắng gửi biểu mẫu mà không chọn học viên yêu thích theo yêu cầu, quy trình xác thực quy tắc 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 validityState nào 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 thành phần điều khiển biểu mẫu không chính xác đầu tiên, hãy lấy tiêu điểm là tiêu điểm. Khi người dùng kích hoạt một lượt gửi biểu mẫu và có các giá trị không hợp lệ,
chế độ kiểm soát 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 được tiêu điểm. Nếu một chế độ điều khiển bắt buộc chưa có tập hợp giá trị, nếu một giá trị dạng số nằm ngoài phạm vi hoặc nếu một giá trị không thuộc loại mà thuộc tính type yêu cầu, thì biểu mẫu sẽ không xác thực, không gửi và 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 hoặc cao hơn max đặt, thì chế độ kiểm soát sẽ là :out-of-range (và :invalid) và người dùng sẽ nhận được thông báo về lỗi valididityState.rangeUnderflow, validityState.rangeOverflow khi cố gắng gửi biểu mẫu. Nếu giá trị step không phù hợp với giá trị step, cho dù được đặt rõ ràng hay đặt mặc định là 1, thì chế độ kiểm soát này sẽ là :out-of-range (và :invalid) và xảy ra 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ự nhau cho độ dài của giá trị: thuộc tính minlength và maxlength sẽ cảnh báo người dùng về lỗi bằng 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ể dẫn đến trải nghiệm người dùng không tốt. Nhìn chung, tốt hơn là nên cho phép người dùng nhập nhiều hơn độ dài ký tự cho phép, cung cấp bộ đếm dưới 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 độ dài tối đa chưa vượt quá độ dài tối đa cho phép. maxlength có thể được đưa vào HTML; như mọi thứ chúng ta đã thảo luận, mã 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ố kiểu dữ liệu đầu vào dường như có các quy tắc ràng buộc mặc định, nhưng không có quy tắc ràng buộc nào. Ví dụ: kiểu nhập tel cung cấp bàn phím điện thoại số trên các thiết bị có bàn phím động, nhưng không ràng buộc các giá trị hợp lệ. Đối với kiểu dữ liệu này và các kiểu dữ liệu đầu vào khác, cần 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 khớp để được coi là hợp lệ.
Nếu giá trị là chuỗi trống và giá trị đó không bắt buộc, thì điều này sẽ không gây ra lỗi validityState.patternMismatch. Nếu bắt buộc và để trống, thông báo lỗi mặc định của validityState.valueMissing sẽ hiển thị với người dùng thay vì patternMismatch.
Đối với email, có thể validityState.typeMismatch không đáp ứng được nhu cầu của bạn. Có thể bạn cần thêm thuộc tính pattern để những địa chỉ email mạng nội bộ không có TLD 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 so khớp mẫu, hãy đảm bảo người dùng biết rõ các thông tin được mong đợi.
Bạn có thể thực hiện tất cả những thao tác này mà không cần một dòng JavaScript duy nhất. Tuy nhiên, là một API HTML, bạn có thể sử dụng JavaScript để đưa vào các thông điệp 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 để linh động cải thiện mức độ hoàn thành.
Ví dụ:
Ví dụ này có một biểu mẫu trong <dialog> có <form> lồng nhau với 3 thành phần điều khiển biểu mẫu và 2 nút gửi, có 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 dữ liệu hoặc xoá dữ liệu đó. Bạn cũng phải thêm formnovalidate, nếu không, trình duyệt sẽ cố gắng xác thực để đảm bảo rằng 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 bất kỳ dữ liệu nào; việc xác thực sẽ ngăn chặn điều này. Đưa vào aria-label="close" vì "X" là một chỉ dẫn hình ảnh đã biết nhưng không phải là nhãn mô tả.
Tất cả các thành phần điều khiển biểu mẫu đều có nhãn ngầm ẩn, vì vậy, bạn không cần thêm thuộc tính id hoặc for. Cả hai phần tử đầu vào đều có thuộc tính bắt buộc. Dữ liệu nhập vào số đã có step được thiết lập rõ ràng để minh hoạ cách đưa step vào. Vì step mặc định là 1 nên bạn có thể bỏ qua thuộc tính này.
<select> có một 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 sẽ là văn bản bên trong.
Nút gửi ở cuối sẽ đặt phương thức biểu mẫu thành POST. Khi được nhấp vào, tính hợp lệ của mỗi giá trị sẽ được kiểm tra. Nếu tất cả các giá trị đều hợp lệ, thì hệ thống sẽ gửi dữ liệu biểu mẫu, hộp thoại sẽ đóng và trang có thể chuyển hướng đến thankyou.php, chính là URL của 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 các thông báo lỗi mặc định bằng phương thức validityState.setCustomValidity('message here'). Xin lưu ý rằng nếu đặt một thông báo tuỳ chỉnh, bạn phải đặt thông báo rõ ràng thành chuỗi trống khi mọi thứ đều hợp lệ hoặc biểu mẫu sẽ không được gửi.
Lưu ý khác
Có toàn bộ một phần dành riêng cho việc giúp người dùng nhập đúng dữ liệu vào biểu mẫu. Để có trải nghiệm người dùng tốt, điều quan trọng là phải ngăn người dùng mắc lỗi bằng cách đưa ra hướng dẫn và đưa ra gợi ý khi 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, nhưng quá trình xác thực phải ở cả phía máy khách và phía máy chủ. Quy trình xác thực có thể được cung cấp theo những cách không phô trương trong quá trình hoàn tất biểu mẫu, chẳng hạn như thêm dấu kiểm khi giá trị là chính xác. Tuy nhiên, đừng đưa ra thông báo lỗi trước khi kiểm soát biểu mẫu hoàn tất. Nếu người dùng mắc lỗi, hãy thông báo cho người dùng biết vị trí và vấn đề mà họ gặp phải.
Trong thiết kế biểu mẫu, bạn cần lưu ý rằng không phải ai cũng giống bạn. Người nào đó có thể có một chữ cái duy nhất là họ (hoặc hoàn toàn không có họ), có thể không có mã bưu chính, có thể có địa chỉ đường phố 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, phải chính xác và có ý nghĩa, có thể xác định bằng phương thức lập trình, cũng như được liên kết bằng 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. Bạn có thể và nên sử dụng thuộc tính autocomplete để giúp hoàn thành biểu mẫu nhanh hơn và cải thiện khả năng hỗ trợ tiếp cận.
HTML cung cấp tất cả các công cụ để dễ dàng truy cập vào các chế độ kiểm soát biểu mẫu cơ bản. Quy trình hoặc thành phần biểu mẫu càng có tính tương tác cao, bạn càng cần chú ý đến khả năng hỗ trợ tiếp cận để quản lý tiêu điểm, cài đặt và cập nhật tên, vai trò và giá trị của ARIA (nếu cần) cũng như thông báo trực tiếp của ARIA theo yêu cầu. Tuy nhiên, như chúng ta đã tìm hiểu ở đây, chỉ với HTML, bạn có thể giúp bạn đạ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 hoặc JavaScript.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về biểu mẫu.
Làm cách nào để bạn khiến các nút chọn thuộc cùng một nhóm?
name.id.Phần tử HTML nào được dùng để cho người dùng biết trường biểu mẫu này dùng để làm gì?
<h1><title><label>