Để tạo một biểu mẫu có tính tương tác, bạn cần thêm phần tử biểu mẫu. Có các chế độ điều khiển để nhập và chọn dữ liệu, phần tử mô tả chế độ điều khiển, phần tử nhóm các trường và các nút để gửi biểu mẫu.
Thành phần biểu mẫu là gì?
Bạn sẽ thấy hai phần tử <input>, <input type="text"> và <input type="file">. Tại sao hai quảng cáo này trông khác?
Dựa trên tên phần tử và thuộc tính type, các trình duyệt cho thấy nhiều giao diện người dùng, sử dụng các quy tắc xác thực riêng cũng như cung cấp nhiều tính năng khác. Việc sử dụng chế độ kiểm soát biểu mẫu phù hợp sẽ giúp bạn tạo biểu mẫu tốt hơn.
Nhãn cho các phần tử biểu mẫu
Giả sử bạn muốn thêm một thông tin đầu vào để người dùng có thể nhập màu sắc họ yêu thích.
Để làm được điều này, bạn cần thêm phần tử <input> vào biểu mẫu.
Nhưng làm thế nào để người dùng biết rằng họ nên tô màu yêu thích?
Để mô tả các chế độ điều khiển biểu mẫu, hãy sử dụng <label> cho mỗi chế độ điều khiển biểu mẫu.
<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">
Thuộc tính for trên phần tử nhãn khớp với thuộc tính id trên dữ liệu đầu vào.
Ghi lại hoạt động đầu vào của người dùng
Đúng như tên gọi, phần tử <input> được dùng để thu thập dữ liệu đầu vào của người dùng.
<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">
Như đã đề cập trước đó, thuộc tính id kết nối <input> với <label>.
Còn thuộc tính tên và loại trong ví dụ này thì sao?
Thuộc tính tên
Sử dụng thuộc tính name để xác định dữ liệu mà người dùng nhập cùng với chế độ điều khiển.
Nếu bạn gửi biểu mẫu, tên này sẽ được nêu trong yêu cầu.
Giả sử bạn đã đặt tên cho chế độ kiểm soát biểu mẫu là mountain và người dùng đã nhập Gutenberg, thì yêu cầu sẽ bao gồm thông tin này dưới dạng mountain=Gutenberg.
Hãy thử đổi tên của thành phần điều khiển biểu mẫu thành hill.
Nếu bạn làm đúng cách và gửi biểu mẫu, thì hill sẽ hiển thị trong URL.
Loại dữ liệu đầu vào
Có nhiều loại chế độ điều khiển biểu mẫu, tất cả đều có các tính năng tích hợp hữu ích hoạt động trên nhiều trình duyệt và nền tảng. Dựa trên thuộc tính type, trình duyệt sẽ hiển thị nhiều giao diện người dùng, hiển thị nhiều bàn phím ảo, sử dụng các quy tắc xác thực khác nhau, v.v. Hãy xem cách thay đổi loại.
Khi sử dụng type="checkbox", trình duyệt sẽ hiển thị hộp đánh dấu thay vì trường văn bản.
Hộp đánh dấu cũng đi kèm với các thuộc tính bổ sung.
Bạn có thể đặt thuộc tính checked để thuộc tính này xuất hiện ở trạng thái đã đánh dấu.
Có nhiều loại khác mà bạn có thể chọn. Chúng ta sẽ có thông tin chi tiết trong học phần sau.
Cho phép nhiều dòng văn bản
Giả sử bạn cần một trường để người dùng có thể viết nhận xét.
Đối với trường hợp này, sẽ không tuyệt vời sao nếu các em có thể nhập nhiều dòng văn bản?
Đây là mục đích của phần tử <textarea>.
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
Chọn trong danh sách các mục
Làm cách nào để cung cấp cho người dùng một danh sách các lựa chọn?
Bạn có thể sử dụng phần tử <select> để làm việc này.
<label for="color">Color</label>
<select id="color" name="color">
<option value="orange">Orange</option>
<option value="pink">Pink</option>
</select>
Trước tiên, bạn cần thêm một phần tử <select>.
Giống như tất cả các thành phần điều khiển biểu mẫu khác, bạn kết nối biểu mẫu này với <label> bằng thuộc tính id và đặt một tên duy nhất cho biểu mẫu bằng thuộc tính name.
Ở giữa thẻ mở và thẻ đóng của phần tử <select>, bạn có thể thêm nhiều phần tử <option>, mỗi phần tử đại diện cho một lựa chọn.
Mỗi lựa chọn có một thuộc tính value duy nhất để bạn có thể phân biệt các lựa chọn đó khi xử lý dữ liệu biểu mẫu.
Văn bản bên trong phần tử tuỳ chọn là giá trị mà con người có thể đọc được.
Nếu bạn gửi biểu mẫu bằng <select> này mà không thay đổi lựa chọn,
yêu cầu sẽ bao gồm color=orange. Nhưng làm thế nào để trình duyệt biết nên sử dụng lựa chọn nào?
Trình duyệt sử dụng lựa chọn đầu tiên trong danh sách, trừ phi:
- Một phần tử
<option>có thuộc tínhselected. - Người dùng chọn một tuỳ chọn khác.
Chọn trước một tuỳ chọn
Với thuộc tính selected, bạn có thể chọn sẵn một tuỳ chọn.
Đây là giá trị mặc định, bất kể thứ tự xác định các phần tử <option>.
Chế độ kiểm soát biểu mẫu tạo nhóm
Đôi khi, bạn cần nhóm các chế độ kiểm soát biểu mẫu. Bạn có thể sử dụng phần tử <fieldset> để làm việc này.
<fieldset>
<legend>What is your favorite web technology</legend>
<label for="html">HTML</label>
<input type="radio" name="webfeature" value="html" id="html">
<label for="css">CSS</label>
<input type="radio" name="webfeature" value="css" id="css">
</fieldset>
Bạn có thấy phần tử <legend> bên trong phần tử <fieldset> không? Bạn nghĩ công cụ này được dùng để làm gì?
Nếu câu trả lời của bạn là "để mô tả nhóm các tuỳ chọn kiểm soát biểu mẫu", thì bạn đã đúng!
Mỗi phần tử <fieldset> cần có một phần tử <legend>, giống như mọi tuỳ chọn điều khiển biểu mẫu cần có một phần tử <label> liên kết.
<legend> cũng phải là phần tử đầu tiên trong <fieldset>.
Sau phần tử <legend>, bạn có thể xác định các thành phần điều khiển biểu mẫu thuộc nhóm đó.
Gửi biểu mẫu
Sau khi tìm hiểu cách thêm các chế độ kiểm soát biểu mẫu và nhóm các chế độ kiểm soát đó lại với nhau, có thể bạn sẽ thắc mắc về cách người dùng có thể gửi biểu mẫu?
Lựa chọn đầu tiên là sử dụng phần tử <button>.
<button>Submit</button>
Sau khi người dùng nhấp vào nút Submit (Gửi), trình duyệt sẽ đưa ra yêu cầu đến URL được chỉ định trong thuộc tính hành động của phần tử <form> với tất cả dữ liệu từ các thành phần kiểm soát biểu mẫu.
Bạn cũng có thể sử dụng phần tử <input> với type="submit" thay vì phần tử <button>.
Dữ liệu đầu vào sẽ có giao diện và hoạt động giống như <button>. Thay vì sử dụng phần tử <label> để mô tả <input>, hãy dùng thuộc tính value.
<input type="submit" value="Submit">
Ngoài ra, bạn cũng có thể gửi biểu mẫu bằng cách sử dụng khoá Enter khi một trường biểu mẫu có tiêu điểm.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về các thành phần biểu mẫu
Làm cách nào để kết nối <label> với một thành phần điều khiển biểu mẫu?
for='color' trên <label> và name='color' trên <input>.for='color' trên <label> và id='color' trên <input>.id='color' trên <label> và for='color' trên <input>.name='color' trên <label> và for='color trên <input>.Bạn sử dụng công cụ gì để kiểm soát biểu mẫu nhiều dòng?
<input> có type='multi-line'.<text>.<textarea>.<input> có type='long'.Làm cách nào để gửi biểu mẫu?
<button>.Enter.<input> có type='submit'.