NỘI DUNG BÀI VIẾT
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) |
Thẻ nhập Text
<input type=”text”> định nghĩa một trường nhập dữ liệu 1 dòng cho text:
<!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:
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.
<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:
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:
<html> <body> <form action="action_page.php"> Họ đệm:<br> <input type="text" name="txtHoDem" value="Nguyễn Tuấn"><br> Tên:<br> <input type="text" name="txtTen" value="Anh"><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=Nguyễn+Tuấn&txtTen=Anh
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”?:
<!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>.
<!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="Nguyễn Tuấn"><br> Tên:<br> <input type="text" name="lastname" value="Anh"><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”
<!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>
Đâ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). |
Kết luận
Qua đây là một số chia sẻ về thẻ form trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.
Các bạn có thể tham khảo các bài viết hay về HTML tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
