Các element trong biểu mẫu HTML - HTML Form Elements

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    10 thg 10, 2022

  • Số lượt xem

    298 lượt xem


HTML Form Elements là các element sẽ được sử dụng trong form để nhận dữ liệu của người dùng.

HTML <form> Elements

HTML <form> element có thể chứa một hoặc nhiều form element:

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

<input> Element

Một trong những element form được sử dụng nhiều nhất là element <input>.

Element <input> có thể được hiển thị theo nhiều cách, tùy thuộc vào attribute type.

Ví dụ

<label for="fname">Tên:</label>  <input type="text" id="fname" name="fname">

 

<label> Element

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

Thẻ <label> xác định nhãn cho nhiều form element.

<label> element hữu ích cho người dùng screen readers, vì screen readers sẽ đọc to nhãn khi người dùng tập trung vào element đầu vào.

<label> element cũng giúp người dùng gặp khó khăn khi nhấp vào các vùng rất nhỏ (chẳng hạn như radio button hoặc checkbox) - bởi vì khi người dùng nhấp vào văn bản trong <label> element, nó sẽ chuyển vào radio button / checkbox.

Attribute for của thẻ <label> phải bằng attribute id của <input> element để liên kết chúng với nhau.

<select> Element

Element <select> xác định danh sách thả xuống:

Ví dụ

<label for="cars">Chọn xe:</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>


Các element <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 được chọn.

Để xác định một tùy chọn đã chọn trước, hãy thêm attribute selected vào tùy chọn.

Ví dụ

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

 

Giá trị có thể nhìn thấy:

Sử dụng attribute size để chỉ định số lượng giá trị hiển thị:

<label for="cars">Chọn xe:</label>  <select id="cars" name="cars" size="3">    <option value="volvo">Volvo</option>    <option value="saab">Saab</option>    <option value="fiat">Fiat</option>    <option value="audi">Audi</option>  </select>

 

Cho phép nhiều lựa chọn:

Sử dụng attribute multiple để cho phép người dùng chọn nhiều giá trị:

Ví dụ

<label for="cars">Chọn xe:</label>  <select id="cars" name="cars" size="4" multiple>    <option value="volvo">Volvo</option>    <option value="saab">Saab</option>    <option value="fiat">Fiat</option>    <option value="audi">Audi</option>  </select>

 

<textarea> Element

Element <textare> xác định một trường đầu vào nhiều dòng (một vùng văn bản):

<textarea name="message" rows="10" cols="30">  Con mèo đang chơi ở sau.  </textarea>

Attribute row chỉ định số dòng có thể nhìn thấy trong một text area.

Attribute cols chỉ định chiều rộng có thể nhìn thấy của một text area.

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

Bạn cũng có thể xác định kích thước của text area bằng cách sử dụng CSS:

<textarea name="message" style="width:200px; height:600px;">  Con mèo đang chơi ở sau vườn  </textarea>

 

<button> Element

Element <button> xác định một nút có thể nhấp:

Ví dụ

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

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

Lưu ý: Luôn chỉ định attribute type cho button element. Các trình duyệt khác nhau có thể sử dụng các type mặc định khác nhau cho button element.

 

<fieldset> và <legend> Elements

Element <fieldset> được sử dụng để nhóm dữ liệu liên quan trong một form.

Element <legend> xác định phụ đề cho phần tử <fieldset>.

Ví dụ

<form action="/action_page.php">    <fieldset>      <legend>Nhân viên:</legend>      <label for="fname">Họ:</label><br>      <input type="text" id="fname" name="fname" value="John"><br>      <label for="lname">Tên:</label><br>      <input type="text" id="lname" name="lname" value="Doe"><br><br>      <input type="submit" value="Submit">    </fieldset>  </form>

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

Nhân viên:




 

<output> Element

Element <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" 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ổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.