Biểu mẫu trong HTML - HTML Forms

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    10 thg 10, 2022

  • Số lượt xem

    466 lượt xem


HTML Forms là nơi để nhận thông tin được nhập từ người dùng. Những thông tin này sẽ được đưa đến server để xử lí.

HTML <form> element

HTML <form> element được sử dụng để tạo một HTML form cho dữ liệu nhập vào từ của người dùng:

<form>  .  form elements  .  </form>

HTML <form> element là nơi chứa cho các loại element đầu vào khác nhau, chẳng hạn như: text fields, checkboxes, radio buttons, submit buttons, v.v.

HTML <input> element

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

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

Type Mô tả
<input type="text"> Hiển thị một text input field
<input type="radio"> Hiển thị một radio button (chọn một trong nhiều lựa chọn)
<input type="checkbox"> Hiển thị một checkbox (không chọn hoặc chọn nhiều lựa chọn)
<input type="submit"> Hiển thị một submit button (submiting một form)
<input type="button"> Hiển thị một nút có thể nhấn vào

 

Text Fields

<input type="text"> element xác định trường nhập một dòng để nhập văn bản.

Ví dụ

<form>    <label for="fname">Họ:</label><br>    <input type="text" id="fname" name="fname"><br>    <label for="lname">Tên:</label><br>    <input type="text" id="lname" name="lname">  </form>

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

Họ:

Tên:

 

Lưu ý: Bản thân form không thể nhìn thấy. Cũng lưu ý rằng chiều rộng mặc định của text field vào là 20 ký tự.

 

HTML <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.

Radio Buttons

<Input type = "radio"> xác định radio button.

Các radio button cho phép người dùng chọn MỘT trong số các lựa chọn giới hạn.

Ví dụ

<p>Chọn ngôn ngữ web yêu thích của bạn:</p>    <form>    <input type="radio" id="html" name="fav_language" value="HTML">    <label for="html">HTML</label><br>    <input type="radio" id="css" name="fav_language" value="CSS">    <label for="css">CSS</label><br>    <input type="radio" id="javascript" name="fav_language" value="JavaScript">    <label for="javascript">JavaScript</label>  </form>

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

Chọn ngôn ngữ web yêu thích của bạn:



Checkboxes

<Input type = "checkbox"> xác định checkbox.

Các checkbox cho phép người dùng chọn tùy chọn KHÔNG hoặc NHIỀU tùy chọn trong một số lựa chọn giới hạn.

Ví dụ

<form>    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">    <label for="vehicle1">Tôi có xe đạp</label><br>    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">    <label for="vehicle2">Tôi có xe hơi</label><br>    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">    <label for="vehicle3">Tôi có thuyền</label>  </form>

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



Submit Button

<Input type = "submit"> xác định một nút để gửi dữ liệu form đến trình xử lý form.

Trình xử lý form thường là một file trên máy chủ có tập lệnh để xử lý dữ liệu đầu vào.

Trình xử lý form được chỉ định trong attribute action của form.

Ví dụ

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

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







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.