HTML5 đưa ra những phần tử form mới

HTML5 đưa ra những phần tử form (form elements) mới sau:

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

Lưu ý: Một vài trình duyệt chưa hỗ trợ cho những phần tử này.

Phần tử <datalist>

Thẻ <datalist> lưu một danh sách sẵn.
Người dùng sẽ thấy một danh sách các tùy chọn hiện ra, sau đó ta click chọn một dòng thì dữ liệu đó sẽ được nhập vào thẻ input.
Trong thẻ input ta sử dụng thuộc tính list để nó nhận biết được datalist.

Các trình duyệt hỗ trợ : Opera, Chrome, Firefox

Ví dụ

Tạo một trường nhập liệu lấy dữ liệu từ datalist:

<input list="browsers"> 
<datalist id="browsers"> 
  <option value="Internet Explorer"> 
  <option value="Firefox"> 
  <option value="Chrome"> 
  <option value="Opera"> 
  <option value="Safari"> 
</datalist>  

Phần tử <keygen>

Phần tử <keygen> được tạo ra nhằm mục đích tạo sự bảo mật cho việc xác thực người dùng.
Thẻ <keygen> định ra một cặp khóa trong form.
Khi ta nhấn gửi dữ liệu, 2 mã khóa được tạo ra, một khóa private(riêng tư) và một khóa public(công cộng).
Khóa private được lưu ở máy người dùng còn khóa public được gửi đến máy server. Sau này khóa public sẽ được dùng để chứng thực người dùng.

Các trình duyệt hỗ trợ : Opera, Chrome, Firefox, Safari

Ví dụ

Tạo một form có bảo mật bằng <keygen>

<form action="demo_keygen.asp" method="get"> 
Username: <input type="text" name="usr_name"> 
Encryption: <keygen name="security"> 
<input type="submit"> 
</form>  

Phần tử <output>

Tượng trưng cho kết quả của một phép tính (ví dụ như phép tính bằng script).

Các trình duyệt hỗ trợ : Opera, Chrome, Firefox, Safari

Ví dụ
Thực hiện tính và xuất ra kết quả bằng phần tử <output>:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50">100  +
<input type="number" name="b" value="50">=
<output name="x" for="a b"></output>
</form>