Các yếu tố hình thức HTML

本章描述所有 HTML 表单元素。

<input> 元素

最重要的表单元素是 <input> 元素。

<input> 元素根据不同的 type 属性，可以变化为多种形态。

Chú ý:下一章讲解所有 HTML 输入类型。

<select> 元素（下拉列表）

<select> 元素定义下拉列表:

Mô hình

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

Thử nghiệm ngay

<option> 元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

您能够通过添加 selected 属性来定义预定义选项。

Mô hình

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

Thử nghiệm ngay

<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）：

Mô hình

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

Thử nghiệm ngay

Mã HTML trên được hiển thị trong trình duyệt như sau:

The cat was playing in the garden.

yếu tố <button>

<button> yếu tố định nghĩa nútnút:

Mô hình

<button type="button" onclick="alert('Hello World!')">Nhấn tôi!</button>

Thử nghiệm ngay

Mã HTML trên được hiển thị trong trình duyệt như sau:

Yếu tố biểu mẫu HTML5

HTML5 đã tăng cường các yếu tố biểu mẫu sau:

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

Chú ý:Mặc định, trình duyệt sẽ không hiển thị các yếu tố không biết. Các yếu tố mới sẽ không phá hủy trang của bạn.

Yếu tố <datalist> của HTML5

<datalist> yếu tố xác định danh sách các tùy chọn trước định trước của yếu tố

người dùng sẽ thấy danh sách các tùy chọn trước định trước khi họ nhập dữ liệu.

của yếu tố list Thuộc tính phải tham chiếu yếu tố <datalist> của id Thuộc tính.

Mô hình

Thiết lập giá trị trước định trước của yếu tố <input> thông qua <datalist>:

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

Thử nghiệm ngay