Khóa học HTML - Bài 23 - Xử lý các phần tử trong FORM

Các phần tử trong Form HTML

= bao gồm HTML5.

Thẻ	Mô tả
<form>	Xác định 01 form HTML để người dùng nhập liệu
<input>	Xác định 01 điều khiển nhập liệu
<textarea>	Xác định 01 điều khiển nhập liệu có nhiều dòng.
<label>	Xác định 01 nhãn cho phần tử <input>
<fieldset>	Nhóm các phần tử liên quan trong 01 form.
<legend>	Xác định tiêu đề cho 01 phần tử <fieldset>
<select>	Xác định 01 menu sổ xuống.
<optgroup>	Xác định 01 nhóm các tùy chọn liên quan trong 01 menu sổ xuống.
<option>	Xác định 01 tùy chọn trong 01 menu sổ xuống.
<button>	Xác định 01 nút bấm.
<datalist>	Xác định 01 danh sách các tùy chọn cho các điều khiển nhập liệu.
<keygen>	Xác định a key-pair generator field (for forms)
<output>	Xác định kết quả của 01 phép tính.

Bài này mô tả tất cả phần tử trong form HTML.

---

Phần tử <input>

Phần tử form quan trọng nhất là <input>.

Phần tử <input> có thể hiển thị bằng nhiều các, tùy vào thuộc tính attribute.

Tất cả các thể loại input sẽ được đề cập trong bài tiếp theo.

---

Phần tử <select>

Phần tử <select> xác định 01 danh sách sổ xuống:

Ví dụ:

<select name="bike">
  <option value="toyota">Toyota</option>
  <option value="honda">Honda</option>
  <option value="suzuki">Suzuki</option>
  <option value="yamaha">Yamaha</option>
</select>

Phần tử <option> xác định 01 lựa chọn.

Mặc định, mục đầu tiên trong danh sách sổ xuống sẽ được lựa chọn.

Để xác định mục được lựa chọn đầu tiên, ta thêm thuộc tính selected trong thẻ option:

Ví dụ:

<option value="toyota" selected>Toyota</option>

Phần tử <textarea>

Phần tử <textarea> xác định vùng nhập liệu có nhiều dòng.

Ví dụ:

<textarea name="message" rows="10" cols="30">
Hôm nay mồng 8 tháng 3.
</textarea>

Thuộc tính rows xác định số dòng hiển thị của 01 đối tượng text area.

Thuộc tính cols xác định bề rộng hiển thị của đối tượng text area.

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

---

Phần tử <button>

Phần tử <button> xác định 01 nút bấm.

Ví dụ:

<button type="button" onclick="alert('Xin chào!')">
Bấm vào đây!
</button>

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

---

Phần tử HTML5 Form

HTML5 bổ sung thêm các phần tử sau:

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

Ghi chú: Trình duyệt không hiển thị những phần tử mà nó không nhận biết. Những phần tử mới không được hỗ trợ trong các trình duyệt cũ sẽ không phá hủy trang web của bạn.

---

Phần tử HTML5 <datalist>

Phần tử <datalist> xác định 01 danh sách gồm các tùy chọn định trước cho 01 thẻ <input>

Người sử dụng sẽ thấy 01 danh sách sổ xuống các tùy chọn khi họ nhập liệu.

Thuộc tính list của phần tử <input> phải trùng với 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ử HTML5 <keygen>

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

Phần tử <keygen> xác định 01 cặp a key-pair generator field trong 01 form.

Khi form được gửi đi, 02 khóa được so khớp với nhau , 01 cái là private và 01 cái là public.

Khóa private được lưu nội bộ trên máy user, và khóa public được gửi đến máy chủ.

Khóa public có thể được sử dụng để tạo 01 chứng chỉ phía máy người dùng để chứng thực người dùng sau này.

Ví dụ:

01 form với 01 field được with a keygen field:

<form action="action_page.php">
  Họ và Tên: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

---

Phần tử HTML5 <output>

Phần tử <output> hiển thị kết quả của 01 tính toán (giống như được thực hiện bởi 01 đoạn CODE).

Ví dụ:

Thực hiện 01 phép tính và hiển thị kết quả ra thẻ <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>

Tác giả: #drM

Nguồn: Sưu Tầm