Bài 25: Thẻ Form trong HTML
Phần tử <form>
Form trong HTML thường được sử dụng để thu thập dữ liệu đầu vào của người sử dụng. Phần tử <form> định nghĩa một Form trong HTML:
<form>
.
Các phần tử trong form
.
</form>
Các phần tử trong form có thể chứa các các kiểu phần tử khác nhau như các ô nhập dữ liệu (textboxes), các ô cho người dùng lựa chọn (checkboxes hoặc radio buttons), các nút cho người dùng kích gửi dữ liệu (submit buttons) và nhiều phần tử khác nữa.
Phần tử <input>
Phần tử <input> là một phần tử quan trọng nhất của Form. Phần tử <input> có nhiều kiểu khác nhau, phụ thuộc vào thuộc tính type. Đây là các kiểu phần tử sẽ được giới thiệu trong bài này:
| Kiểu | Mô tả |
|---|---|
| text | Định nghĩa kiểu nhập dữ liệu là ô văn bản thông thường |
| radio | Định nghĩa kiểu nhập dữ liệu là ô chọn dạng radio button (chọn một trong nhiều lựa chọn) |
| submit | Định nghĩa một nút submit (cho việc gửi dữ liệu trên form) |
 |
Bạn sẽ học nhiều hơn về các kiểu thẻ input trong các bài giới sau. |
|---|
Thẻ nhập Text
<input type=”text”> định nghĩa một trường nhập dữ liệu 1 dòng cho text:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<form>
Họ đệm:<br>
<input type="text" name="txtHoDem">
<br>
Tên:<br>
<input type="text" name="txtTen">
</form>
</body>
</html>
Kết quả sẽ hiển thị trên trình duyệt giống như sau:
Họ đệm:
Tên:
Chú ý: Bản thân form là không hiển thị. Cũng chú ý rằng độ rộng mặc định của trường text là 20 ký tự.
Thẻ nhập Radio Button
<input type=”radio”> định nghĩa một radio button. Các nút Radio cho phép người sử dụng chọn MỘT trong một danh sách giới hạn các lựa chọn.
Ví dụ
<html>
<body>
<form>
<input type="radio" name="gender" value="male" checked> Nam<br>
<input type="radio" name="gender" value="female"> Nữ<br>
<input type="radio" name="gender" value="other"> Khác
</form>
</body>
</html>
Đoạn code HTML trên sẽ được hiển thị như sau trên trình duyệt:
Nam
Nữ
Khác
Nút Submit
<input type=”submit”> định nghĩa một nút cho việc gửi dữ liệu trên Form (submitting) tới một trang khác để xử lý dữ liệu của form này (form-handler). Form-handler thường là một trang chạy ở phía server cho phép xử lý dữ liệu nhập. Form-handler được chỉ định trong thuộc tính action của form:
Ví dụ
<html>
<body>
<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Trần Hùng"><br>
Tên:<br>
<input type="text" name="txtTen" value="Dũng"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Nếu bạn kích nút “Submit” dữ liệu trên form sẽ được gửi tới trang “action_page.php”. Phía máy chủ sẽ thực hiện xử lý dữ liệu gửi và đưa ra đầu ra. Về xử lý phía server bạn có thể sử dụng ngôn ngữ lập trình PHP Đoạn code HTML ở trên sẽ được hiển thị trên trình duyệt như sau:
Thuộc tính Action
Thuộc tính action xác định hành động được thực hiện khi form được gửi đi khi người sử dụng kích nút submit. Cách phổ biến nhất khi gửi dữ liệu của form tới server là sử dụng một nút submit. Thông thường form được gửi tới một trang web chạy trên máy chủ web. Trong ví dụ trên, một script chạy ở phía server được xác định để xử lý form đã gửi:
<form action="action_page.php">
Nếu thuộc tính action bỏ qua, action sẽ được thiết lập tới trang hiện tại.
Thuộc tính Method
Thuộc tính method xác định kiểu phương thức HTTP (GET hoặc POST) được sử dụng gửi dữ liệu trên form:
<form action="action_page.php" method="get">
hoặc:
<form action="action_page.php" method="post">
Một câu hỏi đặt ra là chúng ta nên sử dụng phương thức POST hay GET? Phương thức nào tốt hơn? Chúng ta sẽ phân tích ở phần tiếp.
Sử dụng GET khi nào?
Bạn có thể sử dụng GET (mặc định phương thức này). Sử dụng GET nếu việc gửi form là thụ động (giống như bạn thực hiện truy vấn trên các máy tìm kiếm) và dữ liệu không cần mã hoá, không chứa các thông tin nhạy cảm như mật khẩu, v.v. Khi bạn sử dụng GET, dữ liệu form sẽ bị nhìn thấy trên thanh địa chỉ của trang như ví dụ dưới:
action_page.php?txtHoDem=Trần+Hùng&txtTen=Dũng
|
GET là phù hợp nhất với số lượng dữ liệu ít. Giới hạn về kích thước dữ liệu GET được thiết lập trong trình duyệt của bạn. |
|---|
Sử dụng POST khi nào?
Bạn nên sử dụng POST: Trong trường hợp nếu form cập nhật dữ liệu hoặc dữ liệu trên form gửi đi bao gồm các thông tin nhạy cảm như mật khẩu, mã thẻ ngân hàng,v.v. POST cung cấp cơ chế bảo mật hơn bởi vì dữ liệu được gửi đi không được hiển thị trên thanh địa chỉ của trang.
Thuộc tính Name
Để lấy được dữ liệu đúng khi gửi đi, mỗi trường phải có một thuộc tính name. Ví dụ này sẽ chỉ gửi trường “Họ đệm”, theo bạn tại sao lại không gửi trường “Tên”?:
Ví dụ
<!DOCTYPE html>
<html>
<body><form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Trần Hùng"><br>
Tên:<br>
<input type="text" value="Dũng"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Nhóm dữ liệu trong Form với <fieldset>
Phần từ <fieldset> nhóm dữ liệu liên quan trong một form. Phần tử <legend> xác định một phụ đề cho phần tử <fieldset>.
Ví dụ
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<fieldset>
<legend>Thông tin cá nhân:</legend>
Họ đệm:<br>
<input type="text" name="firstname" value="Dũng"><br>
Tên:<br>
<input type="text" name="lastname" value="Trần Hùng"><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Với đoạn code trên kết quả sẽ hiển thị ở trình duyệt:
Phần code trang “action_page.php”
Tìm hiểu thêm về cách lấy dữ liệu từ form dữ liệu người dùng nhập gửi tới trang nhận ở phía server.
<!DOCTYPE html>
<html charset="utf8">
<head>
<title>Trang nhận dữ liệu từ Form</title>
</head>
<body>
<h2>Dữ liệu bạn nhận đã nhận được từ Form là:</h2>
<?
echo "Họ đệm: ".$_GET["txtHoDem"]."<br>";
echo "Tên: ".$_GET["txtTen"]."<br>";
?>
</body>
</html>
Các thuộc tính của Form trong HTML
Phần tử <form> trong HTML có một tập các thuộc tính, nếu được thiết lập sẽ giống như thế này:
<form action="action_page.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
Các phần tử HTML trong form
.
</form>
Bài tập
- Tạo một form HTML sử dụng thẻ <input> kiểu nút lệnh, tên nhãn trên nút hiển thị chữ “Kích vào đây!”
- Tạo hai radio button trên form, một nút gới tính là “Nam”, một nút giới tính là “Nữ”, và cả hai có tên là “GioiTinh”
- Tạo form vơi một nút submit trên form và khi kích vào nút này sẽ nhảy tới trang “dangnhap.php”
- Tạo một form trong HTML và Chỉ định form gửi dữ liệu theo phương thức POST
Đây là danh sách các thuộc tính của <form>:
| Thuộc tính | Mô tả |
|---|---|
| accept-charset | Chỉ định bảng mã được sử dụng trong form gửi (mặc định: theo bảng mã của trang). |
| action | Chỉ định một địa chỉ (url) sẽ gửi dữ liệu trên form tới (mặc định: trang gửi). |
| autocomplete | Chỉ định cho trình duyệt tự lấy dữ liệu tự động từ dữ liệu người sử dụng đã nhập trước đâu (mặc định: on), ví dụ bạn gõ chữ vào ô nhập, nó sẽ hiện ra các gợi ý các từ bạn đã gõ vào đó. |
| enctype | Chỉ định mã hoá dữ liệu gửi đi (Mặc định: url-encoded). |
| method | Chỉ định phương thức HTTP được sử dụng khi gửi form (mặc định: GET). |
| name | Chỉ định một tên được sử dụng để nhận diện các thành phần trên form (với DOM sử dụng: document.forms.name). |
| novalidate | Chỉ định trình duyệt sẽ không hợp lệ cho form. |
| target | Chỉ định đích của một địa chỉ trong thuộc tính action (mặc định: _self). |
|
Bạn sẽ học nhiều hơn các thuộc tính trong bài học kế tiếp. |
|---|
2 phản hồi
[…] Bài này mô tả tất cả các phần tử trong Form HTML. Xem lại về phần tử Form của bài trước […]
[…] <form> […]