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ụ: