Các phần tử form trong HTML - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Các phần tử form trong HTML

HTML5

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên 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>

Hiển thị trên trình duyệt

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.

Hiển thị trên trình duyệt

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>

Hiển thị trên trình duyệt

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.

Thẻ Mô tả
 <form>  định nghĩa mẫu HTML cho dữ liệu nhập vào của người dùng
 <input>  định nghĩa dữ liệu nhập vào
 <textarea>  định nghĩa dữ liệu nhập trên nhiều dòng (vùng văn bản)
 <label>  định nghĩa một nhãn cho một phần tử <input>
 <fieldset>  các phần tử liên quan đến nhóm trong một biểu mẫu
 <legend>  xác định phụ đề cho phần tử <fieldset>
 <select>  xác định một drop-down list
 <optgroup>  xác định một nhóm các tùy chọn liên quan trong drop-down list
 <option>  định nghĩa một tùy chọn trong drop-down list
 <button>  xác định nút có thể nhấp
<datalist>  (*)  chỉ định một danh sách các tùy chọn được xác định trước cho dữ liệu nhập vào
<keygen>  (*)  xác định trường tự sinh key-pair (đối với các biểu mẫu)
<output>  (*)  xác định kết quả tính toán

 

Tham khảo thêm 2 khóa học hữu ích do giảng viên quốc tế trường FPT Arena giảng dạy: