Để tạo biểu mẫu có tính tương tác, bạn cần thêm các thành phần biểu mẫu. Có các chế độ kiểm soát để 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.
Thành phần biểu mẫu là gì?
Bạn thấy 2 phần tử <input>, <input type="text"> và <input type="file">. Tại sao chúng trông khác nhau?
Dựa trên tên phần tử và thuộc tính type, trình duyệt cho thấy các giao diện người dùng khác nhau, hãy sử dụng xác thực, và cung cấp nhiều tính năng khác. Việc sử dụng chế độ điều khiển 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 thành phần biểu mẫu
Giả sử bạn muốn thêm một mục nhập mà người dùng có thể nhập màu yêu thích của họ.
Để làm được việc này, bạn cần thêm phần tử <input> vào biểu mẫu của mình.
Tuy nhiên, làm thế nào để người dùng biết được họ nên tô màu nền yêu thích của mình?
Để mô tả các chế độ điều khiển biểu mẫu, hãy sử dụng <label> cho từng 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 trong 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 thông tin đầ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
Dùng thuộc tính name để xác định dữ liệu mà người dùng nhập bằng chế độ kiểm soát.
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 chế độ điều khiển biểu mẫu là mountain và người dùng đã nhập Gutenberg,
yêu cầu bao gồm thông tin này dưới dạng mountain=Gutenberg.
Cố gắng thay đổi
tên của chế độ kiểm soát biểu mẫu vào hill.
Nếu bạn làm đúng cách và gửi biểu mẫu, thì hill sẽ xuất hiện trong URL.
Loại dữ liệu đầu vào
Có các
các loại điều khiển biểu mẫu, tất cả
nhờ các tính năng hữu ích tích hợp sẵn trên nhiều trình duyệt và nền tảng. Dựa trên type
thuộc tính, trình duyệt hiển thị các giao diện người dùng khác nhau, hiển thị các bàn phím ảo khác nhau, sử dụng
quy tắc xác thực khác, v.v. Hãy xem cách thay đổi loại chiến dịch.
Khi sử dụng type="checkbox", trình duyệt giờ đây sẽ hiển thị một hộp đánh dấu thay vì một trường văn bản.
Hộp đánh dấu này cũng có các thuộc tính bổ sung.
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 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 việc này, sẽ chẳng tuyệt vời sao nếu học sinh 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 làm cách nào để cung cấp cho người dùng danh sách các lựa chọn?
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, hãy thêm phần tử <select>.
Tương tự như mọi 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 một tên duy nhất 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, vì vậy, 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 được tuỳ chọn nào sẽ được sử dụng?
Trình duyệt 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 tùy chọn khác.
Chọn trước một mục
Với thuộc tính selected, bạn có thể chọn trước một lựa 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 nhóm
Đôi khi, bạn cần nhóm các nút điều khiển biểu mẫu. Bạn có thể 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ĩ dữ liệu 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 thành phần điều khiển biểu mẫu", thì bạn đã trả lời đúng!
Mỗi phần tử <fieldset> cần có 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 có 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 và nhóm các thành phần điều khiển biểu mẫu, có thể bạn thắc mắc về cách người dùng có thể gửi biểu mẫu?
Tuỳ 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 Gửi,
trình duyệt gửi một yêu cầu tới URL được chỉ định trong phần tử <form>
thuộc tính hành động
với tất cả dữ liệu từ bộ đ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 sẽ có giao diện và hoạt động giống như một <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 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
Bạn kết nối <label> với một thành phần điều khiển biểu mẫu bằng cách nào?
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 tính năng gì để kiểm soát biểu mẫu nhiều dòng?
<input> có type='multi-line'.<text>.<textarea>.<input> có type='long'.Bạn có thể gửi biểu mẫu bằng cách nào?
<button>.Enter.<input> bằng type='submit'.