Phần tử <form> trong HTML có thể chứa một hoặc nhiều phần tử biểu mẫu sau:
- <input>
- <label>
- <select>
- <textarea>
- <button>
- <fieldset>
- <legend>
- <datalist>
- <output>
- <option>
- <optgroup>
1. Phần tử <input> trong HTML
Một trong những phần tử biểu mẫu được sử dụng nhiều nhất là phần tử <input>
Phần tử <input> có thể được hiển thị theo một số cách, tùy thuộc vào kiểu thuộc tính
Ví dụ:
2. Phần tử <label> trong HTML
Phần tử <label> xác định nhãn cho một số phần tử biểu mẫu
Phần tử <label> giúp cho người dùng trình đọc màn hình, vì trình đọc màn hình sẽ đọc to nhãn khi người dùng tập trung vào phần tử đầu vào
Phần tử <label> cũng khiến người dùng gặp khó khăn khi nhấp vào các vùng rất nhỏ (chẳng hạn như nút radio hoặc checkbox) – bởi vì khi người dùng nhấp vào văn bản trong phần tử <label>, nó sẽ chuyển nút radio/checkbox
Thuộc tính for của <label> nên bằng với thuộc tính id của <input> vì nó là yếu tố để ràng buộc chúng lại với nhau
3. Phần tử <select> trong HTML
Phần tử <select> xác định danh sách thả xuống
Ví dụ:
Phần tử <option> xác định một tùy chọn có thể được chọn
Theo mặc định, mục đầu tiên trong danh sách thả xuống sẽ được chọn
Để xác định một tùy chọn đã chọn trước, hãy thêm thuộc tính selected vào tùy chọn
Ví dụ:
Ta có thể sử dụng thuộc tính size để chỉ định số lượng giá trị hiển thị
Ví dụ:
Ta có thể sử dụng thuộc tính multiple để cho phép người dùng chọn nhiều giá trị
Ví dụ:
4. Phần tử <textarea> trong HTML
Phần tử <textarea> xác định trường nhập nhiều dòng (vùng văn bản)
Thuộc tính rows xác định số có thể nhìn thấy các dòng trong một vùng văn bản
Thuộc tính cols xác định chiều rộng hữu hình của một vùng văn bản
Ví dụ:
Bạn cũng có thể xác định kích thước của vùng văn bản bằng cách sử dụng CSS
Ví dụ:
5. Phần tử <button> trong HTML
Phần tử <button> xác định một nút có thể nhấp
Ví dụ:
Lưu ý: Luôn chỉ định kiểu thuộc tính cho phần tử <button>. Các trình duyệt khác nhau có thể sử dụng các kiểu mặc định khác nhau cho phần tử <button>
6. Phần tử <fieldset> và <legend> trong HTML
Phần tử <fieldset> được sử dụng để nhóm dữ liệu liên quan trong một biểu mẫu
Phần tử <legend> xác định chú thích cho phần tử <fieldset>
Ví dụ:
7. Phần tử <datalist> trong HTML
Phần tử <datalist> chỉ định danh sách các tùy chọn được xác định trước cho một phần tử <input>
Người dùng sẽ thấy danh sách thả xuống gồm các tùy chọn được xác định trước khi họ nhập dữ liệu
Các thuộc tính list của phần tử <input>, phải tham khảo các thuộc tính id của phần tử <datalist>
Ví dụ:
8. Phần tử <output> trong HTML
Phần tử <output> đại diện cho kết quả của một phép tính (giống như một phép tính được thực hiện bởi tập lệnh)
Ví dụ: