Để tạo một biểu mẫu tương tác, bạn cần thêm các phần tử biểu mẫu. Có các chế độ điều khiển để nhập và chọn dữ liệu, các phần tử mô tả chế độ điều khiển, các phần tử nhóm các trường và các nút để gửi biểu mẫu.
Phần tử 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 các báo cáo này lại khác nhau?
Dựa trên tên phần tử và thuộc tính type (loại), trình duyệt hiển thị các giao diện người dùng khác nhau, sử dụng các quy tắc xác thực khác nhau và cung cấp nhiều tính năng khác. Việc sử dụng thành phần điều khiển biểu mẫu phù hợp giúp bạn xây dựng 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ành phần nhập để người dùng có thể nhập màu sắc yêu thích của họ.
Để làm việc này, bạn cần thêm phần tử <input> vào biểu mẫu.
Nhưng làm cách nào để người dùng biết rằng họ nên điền màu sắc yêu thích?
Để mô tả các thành phần điều khiển biểu mẫu, hãy sử dụng <label> cho mỗi thành phần đ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
Như tên gọi, phần tử <input> được dùng để thu thập dữ liệu đầu vào từ 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 bằng thành phần điều khiển.
Nếu bạn gửi biểu mẫu, tên này sẽ được đưa vào yêu cầu.
Giả sử bạn đặt tên cho một thành phần điều khiển 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.
Thử thay đổi tên của thành phần điều khiển biểu mẫu thành hill.
Nếu bạn thực hiện đúng cách và gửi biểu mẫu, hill sẽ xuất hiện trong URL.
Loại dữ liệu đầu vào
Có nhiều loại thành phần đ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 hiển thị nhiều giao diện người dùng, hiển thị nhiều bàn phím trên màn hình, sử dụng nhiều quy tắc xác thực, v.v. Hãy xem cách thay đổi loại.
Bằng cách sử dụng type="checkbox", trình duyệt hiện hiển thị một hộp đánh dấu thay vì trường văn bản.
Hộp đánh dấu này cũng có các thuộc tính khác.
Bạn có thể đặt thuộc tính checked để hiển thị thuộc tính này ở trạng thái đã đánh dấu.
Bạn có thể chọn nhiều loại khác. Chúng ta sẽ tìm hiểu chi tiết trong một mô-đun 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 bình luận.
Vì vậy, thật tuyệt nếu họ 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 lựa chọn
Bạn cung cấp danh sách các lựa chọn cho người dùng bằng cách nào?
Bạn có thể sử dụng phần tử <select> để thực hiện 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 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 thành phần này với <label> bằng thuộc tính id và đặt tên riêng cho thành phần này bằng thuộc tính name.
Giữa thẻ bắt đầu và thẻ kết thúc 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 tuỳ chọn có một thuộc tính value riêng biệt, nhờ đó bạn có thể phân biệt các tuỳ 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, thì yêu cầu sẽ bao gồm color=orange. Nhưng làm cách nào để trình duyệt biết nên sử dụng tuỳ chọn nào?
Trình duyệt sẽ sử dụng tuỳ 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 lựa 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 trước một tuỳ chọn.
Đây sẽ là giá trị mặc định, bất kể thứ tự xác định các phần tử <option>.
Nhóm các thành phần điều khiển biểu mẫu
Đôi khi, bạn cần nhóm các thành phần điều khiển 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ó nhận thấy phần tử <legend> bên trong phần tử <fieldset> không? Bạn nghĩ nó được dùng để làm gì?
Nếu câu trả lời của bạn là "để mô tả nhóm thành phần điều khiển biểu mẫu", thì bạn đã đúng!
Mỗi phần tử <fieldset> đều yêu cầu một phần tử <legend>, giống như mọi thành phần điều khiển biểu mẫu đều cần 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 sẽ thuộc nhóm.
Gửi biểu mẫu
Sau khi tìm hiểu cách thêm các thành phần điều khiển biểu mẫu và nhóm các thành phần đó, bạn có thể thắc mắc làm cách nào để người dùng có thể gửi biểu mẫu?
Cách đầ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 Gửi, trình duyệt sẽ gửi 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 điều khiển 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 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 sử 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 phím Enter khi một trường biểu mẫu có tiêu điểm.
Kiểm tra mức độ hiểu biết
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 gì cho thành phần điều khiển 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> bằng type='submit'.