Các phần tử form trong html

Trong bài đọc này, chúng ta sẽ mô tả tất cả các phần tử form khác nhau trong HTML.

Các phần tử <form> HTML

Phần tử HTML <form> có thể chứa một hoặc nhiều các phần tử biểu mẫu sau.

<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>

Phần tử <input>

Một trong những phần tử biểu mẫu được sử dụng nhiều nhất chính là phần tử <input>.

Phần tử <input> có thể được hiển thị theo các dạng khác nhau, tùy thuộc vào thuộc tính type được thiết lập.

Ví dụ

<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">

Xem kết quả

Tất cả các giá trị khác nhau của thuộc tính type được đề cập trong bài tiếp theo.

Phần tử <label>

Chúng ta lưu ý việc sử dụng phần tử <label> trong ví dụ trên.

Thẻ <label> định nghĩa một nhãn mang yếu tố mô tả về mặt hình thức cho các phần tử khác.

Phần tử <label> này hữu ích cho người dùng các phần mềm đọc chữ trên màn hình, vì trình đọc màn hình sẽ đọc to nhãn label nhắc người dùng tập trung vào phần tử đầu vào input.

Phần tử <label> cũng giúp người dùng đỡ khó khăn hơn khi nhấp vào các vùng rất nhỏ (chẳng hạn như nút radio hoặc hộp kiểm) - bởi vì khi người dùng nhấp vào văn bản trong phần tử <label>, nó sẽ chuyển cú nhấp đó sang các nút radio/hộp kiểm.

Giá trị của thuộc tính for của thẻ <label> nên giống với giá trị thuộc tính id của thẻ <input> để ràng buộc chúng lại với nhau.

Phần tử <select>

Phần tử <select> xác định một danh sách thả xuống.

Ví dụ

 <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>

Xem kết quả

Phần tử <option> xác định 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 sẽ được chọn trước tiên.

Để thay đổi tùy chọn mặc định, chúng ta thêm thuộc tính selected vào thẻ <option>.

Ví dụ

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

Xem kết quả

Chúng ta thêm thuộc tính size để chỉ định số lượng giá trị hiển thị cho thẻ <select>.

Ví dụ

 <select id="cars" name="cars" size="3">

Xem kết quả

Thêm thuộc tính multiple để cho phép người dùng lựa chọn nhiều giá trị.

Ví dụ

<select id="cars" name="cars" size="4" multiple="multiple">

Xem kết quả

Phần tử <textarea>

Phần tử <textarea> xác định trường nhập nhiều dòng (vùng văn bản).

Ví dụ

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

Xem kết quả

Thuộc tính rows xác định số dòng có thể nhìn thấy trong một vùng văn bản.

Thuộc tính cols xác định chiều rộng hữu hình của một vùng văn bản.

Chúng ta cũng có thể xác định kích thước của vùng văn bản bằng cách sử dụng CSS.

Ví dụ

<textarea name="message" style="width:200px;height:400px;">
The cat was playing in the garden.
</textarea>

Xem kết quả

Phần tử <Button>

Phần tử <button> xác định một nút có thể nhấp.

Ví dụ

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

Xem kết quả

Luôn chỉ định thuộc tính type cho phần tử button. Các trình duyệt khác nhau có thể sử dụng các kiểu hiển thị mặc định khác nhau cho phần tử button.

Phần tử <fieldset> và <legend>

Phần tử <fieldset> được sử dụng để nhóm các dữ liệu liên quan trong một biểu mẫu.

Phần tử <legend> xác định chú thích cho phần tử <fieldset>.

Ví dụ

<fieldset>
    <legend>Thông tin cá nhân</legend>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
        <input type="submit" value="Submit">
  </fieldset>

Xem kết quả

Phần tử <datalist>

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

Người dùng sẽ thấy danh sách thả xuống gồm các tùy chọn được xác định trước khi họ nhập dữ liệu.

Giá trị của thuộc tính list của phần tử <input>, phải giống với giá trị của thuộc tính id của phần tử <datalist>.

Ví dụ

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

Xem kết quả

Phần tử <output>

Phần tử <output> đại diện cho kết quả của một phép tính (giống như một phép tính được thực hiện bởi tập lệnh).

Ví dụ

<form action="action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range" id="a" name="a" min="0" max="100" 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>