Các phần tử form trong HTML

Phần tử <input>

Đây được coi là phần tử form quan trọng bậc nhất. Phần tử <input> có thể được hiển thị bằng nhiều cách, tùy thuộc vào thuộc tính type.

Phần tử <select>

Phần tử <select> định nghĩa một drop-down list: Ví dụ:

<select name=”cars”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”fiat”>Fiat</option>
<option value=”audi”>Audi</option>
</select>

Các phần tử <option> định nghĩa 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 được chọn. Để xác định tùy chọn được chọn trước, hãy thêm thuộc tính đã chọn vào tuỳ chọn:

<option value=”fiat” selected>Fiat</option>

Phần tử <textarea>

Phần tử <textarea> xác định dữ liệu nhập vào trên nhiều dòng (một vùng văn bản):

<textarea name=”message” rows=”10″ cols=”30″>
The cat was playing in the garden.
</textarea>

Thuộc tính rows xác định số dòng hiển thị của một dòng trong một vùng văn bản.

Thuộc tính cols xác định chiều rộng hiển thị của một vùng văn bản.

Phần tử <button>

Phần tử <button> xác định nút có thể nhấp được:

<button type=”button” onclick=”alert(‘Hello World!’)”>Click Me!</button>

Phần tử form trong HTML5

HTML5 có thêm các phần tử:

• <datalist>
• <keygen>
• <output>

Lưu ý: Các trình duyệt không hiển thị các phần tử không xác định. Các yếu tố mới không được hỗ trợ trong các trình duyệt cũ hơn sẽ không “phá huỷ” trang web của bạn.

Phần tử <datalist> trong HTML5

Phần tử <datalist> chỉ định một 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 một danh sách thả xuống của các tùy chọn được xác định trước khi họ nhập dữ liệu.

Thuộc tính list của phần tử <input>, phải tham chiếu đến thuộc tính id của phần tử <datalist>. Ví dụ:

<form action=”/action_page.php”>
<input list=”browsers”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
</form>

Phần tử <keygen> trong HTML5

Mục đích của phần tử <keygen> là cung cấp một cách an toàn để xác thực người dùng. Phần tử <keygen> xác định trường key-pair tự sinh trong một biểu mẫu.

Khi mẫu được gửi đi, hai phím được tạo ra, một private và một public. Private key được lưu trữ cục bộ, và public key được gửi đến máy chủ.

Public key có thể được sử dụng để tạo chứng chỉ ứng dụng khách để xác thực người dùng trong tương lai. Vì dụ form với trường keygen:

<form action=”/action_page.php”>
Username: <input type=”text” name=”user”>
Encryption: <keygen name=”security”>
<input type=”submit”>
</form>

Phần tử <output> trong HTML5

Phần tử <output> đại diện cho kết quả tính toán (như một phần được thực hiện bởi một script). Thực hiện phép tính và hiển thị kết quả trong phần tử <output>:

<form action=”/action_page.php”
oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>
0
<input type=”range” id=”a” name=”a” value=”50″>
100 +
<input type=”number” id=”b” name=”b” value=”50″>
=
<output name=”x” for=”a b”></output>
<br><br>
<input type=”submit”>
</form>

Các phần tử form trong HTML

Lưu ý: dấu * thể hiển thẻ trong HTML5.