Để tạo 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ế độ kiểm soát để nhập và chọn dữ liệu, các phần tử mô tả chế độ kiểm soát, 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 2 phần tử <input>, <input type="text"> và <input type="file">. Tại sao chúng lại trông khác nhau?
Dựa trên tên phần tử và thuộc tính type, trình duyệt sẽ 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 kiểm soát biểu mẫu phù hợp sẽ giúp bạn tạo biểu mẫu hiệu quả hơn.
, hệ điều hành và nền tảng.Nhãn cho các phần tử biểu mẫu
Giả sử bạn muốn thêm một đầu vào để 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 một phần tử <input> vào biểu mẫu. Nhưng làm sao người dùng biết rằng họ nên điền màu sắc yêu thích của mình?
Để mô tả các thành phần kiểm soát biểu mẫu, hãy dùng một <label> cho mỗi thành phần kiểm soát 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 đầu vào.
Ghi lại dữ liệu đầ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
Sử 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 một 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.
Thử thay đổi tên của chế độ điều khiển biểu mẫu thành hill.
Nếu bạn thực hiện đúng 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 chế độ kiểm soát biểu mẫu, tất cả đều có các tính năng hữu ích được tích hợp sẵn, 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ị các giao diện người dùng khác nhau, cho thấy các bàn phím ảo khác nhau, 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.
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ì một 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 để cho thấy hộp này đã được đánh dấu.
Bạn có thể chọn nhiều loại khác. Chúng ta sẽ xem xét kỹ hơn ở một 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 bình luận.
Trong trường hợp này, sẽ rấ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
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 để chọn?
Bạn có thể 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 chế độ điều khiển biểu mẫu khác, bạn kết nối chế độ điều khiển này với một <label> bằng thuộc tính id và đặt cho chế độ điều khiển này một tên riêng biệt 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 lựa chọn đều có một thuộc tính value riêng biệt, vì vậy, bạn có thể phân biệt các lựa chọn này khi xử lý dữ liệu biểu mẫu.
Văn bản bên trong phần tử option 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 dùng lựa chọn nào?
Trình duyệt sẽ 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 lựa chọn khác.
Chọn trước một lựa chọn
Bạn có thể chọn trước một lựa chọn bằng thuộc tính selected. Đây sẽ trở thành giá trị mặc định, bất kể thứ tự xác định các phần tử <option>.
Nhóm các nút điều khiển biểu mẫu
Đôi khi, bạn cần nhóm các chế độ kiểm soát biểu mẫu. Bạn có thể dùng phần tử <fieldset> để thực hiện việc đó.
<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 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> đều cần một phần tử <legend>, giống như mọi chế độ kiểm soát biểu mẫu đều cần một phần tử <label> được 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 chế độ kiểm soát biểu mẫu phải 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 chế độ kiểm soát biểu mẫu, bạn có thể thắc mắc về cách 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> cùng với tất cả dữ liệu từ các chế độ điều khiển biểu mẫu.
Bạn cũng có thể dùng phần tử <input> với type="submit" thay vì phần tử <button>. Đầu vào có giao diện và hoạt động giống như <button>.
Thay vì 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 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 của bạn
Kiểm tra kiến thức của bạn về các phần tử biểu mẫu
Làm cách nào để kết nối <label> với một chế độ kiểm soát biểu mẫu?
for='color' vào ngày <label> và name='color' vào ngày <input>.for='color' vào ngày <label> và id='color' vào ngày <input>.id='color' vào ngày <label> và for='color' vào ngày <input>.name='color' vào ngày <label> và for='color vào ngày <input>.Bạn sử dụng thành phần kiểm soát biểu mẫu nhiều dòng để làm gì?
<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> có type='submit'.