Bài 25: Các phần tử trong Form html

Chương này mô tả tất cả các yếu tố hình thức HTML.

---

Phần tử <Input>

Các yếu tố hình thức quan trọng nhất là <input> phần tử.

<Input> yếu tố có thể thay đổi theo nhiều cách, tùy thuộc vào các loại thuộc tính.

	Tất cả các loại đầu vào HTML được bao gồm trong chương tiếp theo.

---

<Select> Element (Drop-Down List)

Các <select> yếu tố xác định một danh sách thả xuống:

Thí 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 <option> yếu tố xác định các tùy chọn để lựa chọn.

Danh sách này thường sẽ hiển thị mục đầu tiên là chọn.

Bạn có thể thêm một thuộc tính lựa chọn để xác định một lựa chọn được xác định trước.

Thí dụ

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

---

Các <textarea> phần tử

Các <textarea> yếu tố định nghĩa một lĩnh vực đầu vào đa dòng (một vùng văn bản):

Thí dụ

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

Đây là cách mã HTML trên sẽ được hiển thị trong một trình duyệt:

---

<Button> phần tử

Phần tử <button> định nghĩa một nút bấm:

Thí dụ

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Đây là cách mã HTML trên sẽ được hiển thị trong một trình duyệt:

 

---

HTML5 Form Elements

HTML5 được thêm vào các yếu tố hình thức sau đây:

• <Datalist>
• <Keygen>
• <Output>

	Theo mặc định, trình duyệt không hiển thị nguyên tố chưa biết. yếu tố mới sẽ không phá hủy trang của bạn.

---

HTML5 <datalist> phần tử

Các <datalist> chỉ rõ một danh sách các tùy chọn được xác định trước cho một <input> phần tử.

Người dùng sẽ thấy một danh sách thả xuống của tùy chọn xác định trước khi dữ liệu đầu vào.

Danh sách thuộc tính của thẻ <input> yếu tố, phải tham khảo các thuộc tính id của phần tử <datalist>.

Thí dụ

Một <input> phần tử với giá trị được xác định trước trong một <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>

---

HTML5 <keygen> phần tử

Mục đích của <keygen> phần tử là để cung cấp một cách an toàn để xác thực người dùng.

Các <keygen> chỉ rõ một lĩnh vực máy phát điện cặp khóa trong một hình thức.

Khi các mẫu được gửi, hai phím được tạo ra, một tư nhân và một công cộng.

Các khóa riêng được lưu trữ tại địa phương, và các khóa công khai được gửi đến máy chủ.

Các khóa công khai có thể được sử dụng để tạo ra một chứng chỉ khách hàng để xác thực người dùng trong tương lai.

Thí dụ

Một hình thức với một lĩnh vực keygen:

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

---

HTML5 <output> phần tử

Các <output> yếu tố đại diện cho các kết quả của một phép tính (như một thực hiện bởi một kịch bản).

Thí dụ

Thực hiện tính toán và hiển thị kết quả trong một <output> yếu tố:

<form action="action_page.asp"
  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>

---

HTML Form Elements

= Mới trong HTML5.

Tag	Description
<form>	Defines an HTML form for user input
<input>	Defines an input control
<textarea>	Defines a multiline input control (text area)
<label>	Defines a label for an <input> element
<fieldset>	Groups related elements in a form
<legend>	Defines a caption for a <fieldset> element
<select>	Defines a drop-down list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<button>	Defines a clickable button
<datalist>	Specifies a list of pre-defined options for input controls
<keygen>	Defines a key-pair generator field (for forms)
<output>	Defines the result of a calculation