Biểu mẫu 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

Biểu mẫu 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ử <form>

Phần tử HTML <form> định nghĩa một hình thức được sử dụng để thu thập dữ liệu của người dùng:

<form>
.
form elements
.
</form>

Một biểu mẫu HTML chứa các phần tử của biểu mẫu. Các phần tử biểu mẫu là các loại phần tử đầu vào khác nhau như văn bản, checkboxes, các button…

Phần tử <input>

Phần tử <input> là phần tử biểu mẫu quan trọng 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. Dưới đây là một số ví dụ:

Type  Mô tả
 <input type=”text”>  định nghĩa một dòng nhập văn bản
 <input type=”radio”>  định nghĩa một radio button (cho việc lựa chọn nhiều phương án)
 <input type=”submit”>  định nghĩa một summit button (cho việc gửi đi dữ liệu)

Dữ liệu nhập vào

<input type=”text”> định nghĩa một dòng cho phép nhập vào dữ liệu văn bản:

<form>
First name:<br>
<input type=”text” name=”firstname”><br>
Last name:<br>
<input type=”text” name=”lastname”>
</form>

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

First name: Last name:

Lưu ý: biểu mẫu chính không hiển thị và độ dài mặc định của trường văn bản là 20 ký tự.

Radio Button

<input type=”radio”> định nghĩa một radio button. Các radio button cho phép người dùng chọn một trong nhiều sự lựa chọn:

<form>
<input type=”radio” name=”gender” value=”male” checked> Male<br>
<input type=”radio” name=”gender” value=”female”> Female<br>
<input type=”radio” name=”gender” value=”other”> Other
</form>

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

Male Female Other

Submit Button

<input type = “submit”> định nghĩa một nút để gửi dữ liệu biểu mẫu tới một trình xử lý mẫu. Trình xử lý mẫu thông thường là máy chủ vớ tập lệnh để xử lý dữ liệu đầu vào.

Trình xử lý biểu mẫu được chỉ định trong thuộc tính action của biểu mẫu:

<form action=”/action_page.php”>
First name:<br>
<input type=”text” name=”firstname” value=”Mickey”><br>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit” value=”Submit”>
</form>

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

First name: Last name:

Thuộc tính action

Thuộc tính action xác định hành động sẽ được thực hiện khi form được gửi. Thông thường, dữ liệu biểu mẫu được gửi đến một trang web trên máy chủ khi người dùng nhấp chuột vào nút submit.

Trong ví dụ trên, dữ liệu biểu mẫu được gửi đến một trang trên máy chủ có tên “/action_page.php”. Trang này chứa một kịch bản phía máy chủ xử lý dữ liệu biểu mẫu:

<form action=”/action_page.php”>

Nếu thuộc tính action bị bỏ qua, hành động được đặt thành trang hiện hành.

Thuộc tính method

Thuộc tính method xác định phương thức HTTP (GET hoặc POST) để sử dụng khi gửi dữ liệu biểu mẫu:

<form action=”/action_page.php” method=”get”>

hoặc

<form action=”/action_page.php” method=”post”>

Khi nào sử dụng GET?

Phương pháp mặc định khi gửi dữ liệu biểu mẫu là GET. Tuy nhiên, khi sử dụng GET, dữ liệu biểu mẫu sẽ được hiển thị trong trường địa chỉ trang:

/action_page.php?firstname=Mickey&lastname=Mouse

Lưu ý: GET không được sử dụng khi gửi thông tin nhạy cảm. GET thích hợp nhất cho các số liệu ngắn, không nhạy cảm, bởi vì nó có giới hạn về kích thước.

Khi nào sử dụng POST?

Luôn sử dụng POST nếu dữ liệu biểu mẫu chứa thông tin nhạy cảm hoặc cá nhân. Phương pháp POST không hiển thị dữ liệu biểu mẫu được gửi trong trường địa chỉ trang.

POST không có giới hạn kích thước, và có thể được sử dụng để gửi một lượng lớn dữ liệu.

Thuộc tính name

Mỗi dữ liệu đầu vào phải có thuộc tính name được gửi. Nếu thuộc tính name bị bỏ qua, dữ liệu của trường đầu vào đó sẽ không được gửi đi.

Ví dụ này sẽ chỉ gửi trường nhập đầu tiên “Last name”:

<form action=”/action_page.php”>
First name:<br>
<input type=”text” value=”Mickey”><br>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit” value=”Submit”>
</form>

Biểu mẫu dữ liệu nhóm với <fieldset>

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

<form action=”/action_page.php”>
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type=”text” name=”firstname” value=”Mickey”><br>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit” value=”Submit”>
</fieldset>
</form>

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

Personal information:

First name: Last name:

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

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

 

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: