Biểu mẫu HTML

Biểu mẫu HTML được sử dụng để thu thập các loại dữ liệu nhập vào khác nhau của người dùng.

Thẻ <form>

Biểu mẫu HTML được sử dụng để thu thập dữ liệu nhập vào của người dùng.

Thẻ <form> định nghĩa biểu mẫu HTML:

Ví dụ

<form>
 .
Các phần tử biểu mẫu
 .
</form>

Biểu mẫu HTML chứaCác yếu tố biểu mẫu。

Các yếu tố biểu mẫu là các loại yếu tố input khác nhau, hộp kiểm, nút chọn một trong số các tùy chọn, nút gửi, v.v.

Các yếu tố <input>

<input> Các yếu tố là quan trọng nhấtCác yếu tố biểu mẫu。

Các hình thái của thẻ <input> rất nhiều, tùy thuộc vào type Thuộc tính.

Đây là các loại được sử dụng trong chương này:

Loại Mô tả
text Định nghĩa nhập văn bản thông thường.
radio Định nghĩa nút chọn một trong số các tùy chọn (chọn một trong số các lựa chọn)
submit Định nghĩa nút gửi (gửi biểu mẫu)

Ghi chú:Bạn sẽ học thêm về các loại nhập vào trong hướng dẫn này sau.

Nhập văn bản

<input type="text"> Định nghĩa đểNhập văn bảntrường nhập một dòng:

Ví dụ

<form>
 Tên đầu:<br>
<input type="text" name="firstname">
<br>
 Tên họ:<br>
<input type="text" name="lastname">
</form>

Hãy thử ngay

Nó sẽ xuất hiện như thế này trong trình duyệt:

Tên:


Họ:

Ghi chú:Biểu mẫu本身 không thể nhìn thấy. Hơn nữa, chiều rộng mặc định của trường văn bản là 20 ký tự.

Nút chọn một trong số các tùy chọn giới tính nhập vào

<input type="radio"> Định nghĩaNút chọn một trong số các tùy chọn giới tính。

Nút chọn một trong số các tùy chọn giới tính cho phép người dùng chọn một trong số các tùy chọn có sẵn:

Ví dụ

<form>
<input type="radio" name="sex" value="male" checked>Nam
<br>
<input type="radio" name="sex" value="female">Nữ
</form>

Hãy thử ngay

Nút chọn một trong số các tùy chọn giới tính sẽ xuất hiện như thế này trong trình duyệt:

Nam

Nữ

Nút gửi

<input type="submit"> Định nghĩa để gửiChương trình xử lý biểu mẫu（form-handler）Gửinút biểu mẫu của biểu mẫu.

Chương trình xử lý biểu mẫu thường là trang web máy chủ chứa đoạn mã để xử lý dữ liệu nhập vào.

Chương trình xử lý biểu mẫu ở trong action Định nghĩa trong thuộc tính:

Ví dụ

<form action="action_page.php">
Tên đầu:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Tên họ:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Hãy thử ngay

Nó sẽ xuất hiện như thế này trong trình duyệt:

Tên:


Họ:


Thuộc tính Action

Thuộc tính actionĐịnh nghĩa hành động được thực hiện khi gửi biểu mẫu.

Cách thông thường để gửi biểu mẫu đến máy chủ là sử dụng nút gửi.

Thường thì biểu mẫu sẽ được gửi đến trang web trên máy chủ web.

Trong ví dụ trên, đã chỉ định một đoạn mã của máy chủ để xử lý biểu mẫu được gửi:

<form action="action_page.php">

Nếu bỏ qua thuộc tính action, action sẽ được thiết lập thành trang web hiện tại.

Thuộc tính Method

Thuộc tính methodĐịnh nghĩa phương thức HTTP được sử dụng để gửi biểu mẫu (GET hoặc POST)

<form action="action_page.php" method="GET">

hoặc:

<form action="action_page.php" method="POST">

Khi nào nên sử dụng GET?

Bạn có thể sử dụng GET (mặc định):

Nếu việc gửi biểu mẫu là bị động (ví dụ như tìm kiếm của công cụ tìm kiếm), và không có thông tin nhạy cảm.

Khi bạn sử dụng GET, dữ liệu biểu mẫu sẽ hiển thị trong thanh địa chỉ trang web:

action_page.php?firstname=Mickey&lastname=Mouse

Ghi chú:GET rất phù hợp cho việc gửi một lượng nhỏ dữ liệu. Trình duyệt sẽ đặt giới hạn dung lượng.

Khi nào nên sử dụng POST?

Bạn nên sử dụng POST:

Nếu biểu mẫu đang cập nhật dữ liệu hoặc chứa thông tin nhạy cảm (ví dụ như mật khẩu).

POST an toàn hơn vì dữ liệu được gửi trong thanh địa chỉ trang web không thể nhìn thấy.

Thuộc tính Name

Mỗi trường nhập phải được thiết lập một thuộc tính name để có thể gửi đúng.

Ví dụ này chỉ sẽ gửi trường nhập "Tên họ":

Ví dụ

<form action="action_page.php">
Tên đầu:<br>
<input type="text" value="Mickey">
<br>
Tên họ:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Hãy thử ngay

Sử dụng <fieldset> để nhóm dữ liệu biểu mẫu

<fieldset> Thẻ được kết hợp để nhóm dữ liệu liên quan trong biểu mẫu.

<legend> Thẻ <fieldset> được sử dụng để định nghĩa tiêu đề của phần tử.

Ví dụ

<form action="action_page.php">
<fieldset>
<legend>Thông tin cá nhân:</legend>
Tên đầu:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Tên họ:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

Hãy thử ngay

Mã HTML trên trình duyệt sẽ hiển thị như thế này:

Thông tin cá nhân:
Tên:


Họ:


Thuộc tính biểu mẫu HTML

Đối tượng <form> HTML, đã thiết lập tất cả các thuộc tính có thể, trông như thế này:

Ví dụ

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
Các phần tử biểu mẫu
 .
</form>

Dưới đây là danh sách thuộc tính của <form>:

Thuộc tính Mô tả
accept-charset Định nghĩa bộ mã ký tự được sử dụng trong biểu mẫu được gửi (mặc định: bộ mã ký tự trang).
action Định nghĩa địa chỉ gửi biểu mẫu (URL) (trang gửi).
autocomplete Định nghĩa trình duyệt nên tự động hoàn thành biểu mẫu (mặc định: mở).
enctype Định nghĩa mã mã hóa dữ liệu được gửi (mặc định: mã hóa url).
method Định nghĩa phương pháp HTTP được sử dụng để gửi biểu mẫu (mặc định: GET).
name Định nghĩa tên biểu mẫu được nhận diện (đối với DOM sử dụng: document.forms.name).
novalidate Định nghĩa trình duyệt không xác thực biểu mẫu.
target Định nghĩa mục tiêu địa chỉ trong thuộc tính action (mặc định: _self).

Ghi chú:Bạn sẽ học thêm về thuộc tính trong các phần sau.