WebVN Cộng đồng web Việt Nam
Thẻ form
Thẻ form trong HTML được sử dụng để lấy các thông tin do người dùng nhập vào.
Để tạo một form trong HTML, chúng ta sử dụng thẻ <form> như sau:
|
1 2 3 4 5 |
<form> . Các thành phần trong form . </form> |
Thẻ <input>
<input> là thẻ quan trọng nhất trong form.
Cùng một thẻ <input> nhưng tùy thuộc vào thuộc tính type mà cho ra rất nhiều cách hiển thị cũng như sự tương tác khác nhau với người dùng.
Đây là những kiểu type mà chúng ta sẽ sử dụng trong bài:
| Kiểu | Miêu tả |
|---|---|
| text | Ô để người dùng nhập liệu |
| radio | Tạo một nút radio (nhiều chọn một) |
| submit | Tạo một nút submit (gửi thông tin từ form đi) |
Kiểu Text
<input type=”text”> giúp bạn tạo một khung để người dùng nhập dữ liệu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body> <form> Họ:<br> <input type="text" name="firstname"> <br> Tên:<br> <input type="text" name="lastname"> </form> <p>Lưu ý: mặc định bản thân form không hiển thị ra bên ngoài, chỉ các thành phần trong form hiển thị.</p> <p>Chiều dài khung nhập liệu kiểu text mặc định là 20 ký tự.</p> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Họ:
Tên:
Lưu ý: Mặc định, bản thân thẻ form không hiển thị ra ngoài và chiều dài khung nhập liệu kiểu text là 20 ký tự.
Kiểu radio
<input type=”radio”> giúp bạn tạo một nút nhấn radio.
Nút radio chỉ cho phép người dùng chọn MỘT trong số các lựa chọn:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <form> <input type="radio" name="sex" value="male" checked>Nam <br> <input type="radio" name="sex" value="female">Nữ </form> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Nam
Nữ
Kiểu submit
<input type=”submit”> giúp bạn tạo một nút nhấn để gửi thông tin mà người dùng đã nhập vào.
Những thông tin này sau đó sẽ được gửi tới máy chủ để xử lý và trả về kết quả.
Thuộc tính action của form sẽ quyết định thông tin được gửi đi đâu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Họ:<br> <input type="text" name="firstname" value="Nguyen"> <br> Tên:<br> <input type="text" name="lastname" value="A"> <br><br> <input type="submit" value="Gửi"> </form> <p>Nếu bạn nhấn vào nút "Gửi", dữ liệu trong form sẽ được chuyển tới trang "action_page.php".</p> </body> </html> |
Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:
Thuộc tính action
Thuộc tính action xác định địa chỉ mà thông tin sẽ được gửi đi để xử lý.
Cách phổ biến nhất để người dùng gửi thông tin từ form lên máy chủ là nhấn vào nút submit.
Bình thường, thông tin sẽ được gửi tới một trang cụ thể trên máy chủ.
Trong ví dụ ở trên, trang xử lý đã được quy định trong thẻ form:
|
1 |
<form action="/demo/action_page.php"> |
Nếu thuộc tính action không được thiết lập, mặc định thông tin sẽ được gửi tới trang hiện tại.
Thuộc tính method
Thuộc tính method quy định phương thức (POST hoặc GET) dữ liệu sẽ được chuyển đi khi người dùng nhấn nút submit trong form:
|
1 |
<form action="/demo/action_page.php" method="GET"> |
hoặc
|
1 |
<form action="/demo/action_page.php" method="POST"> |
Khi nào sử dụng GET
GET là phương thức mặc định, sử dụng khi form không có chứa những thông tin quan trọng, ví dụ như khi tìm kiếm.
Khi bạn sử dụng GET, toàn bộ dữ liệu trong form sẽ hiển thị trên thanh địa chỉ:
|
1 |
action_page.php?firstname=Nguyen&lastname=A |
Khi nào sử dụng POST
Bạn nên sử dụng phương thức POST khi form dùng để cập nhật dữ liệu hoặc chứa những thông tin nhạy cảm (như mật khẩu).
POST bảo mật hơn vì dữ liệu chuyển đi không hiển thị trên thanh địa chỉ.
Thuộc tính name
Để thông tin gửi đi chính xác, mỗi thẻ input cần phải thiết lập thuộc tính name.
Trong ví dụ dưới đây, khi submit chỉ có dữ liệu có name là “lastname” được gửi đi:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Họ:<br> <input type="text" value="Nguyen"> <br> Tên:<br> <input type="text" name="lastname" value="A"> <br><br> <input type="submit" value="Gửi"> </form> <p>Sau khi bạn nhấn "Gửi", dữ liệu sẽ được gửi tới trang "action_page.php".</p> <p>Họ sẽ không được gửi đi khi nhấn submit bởi vì thẻ input này không có thuộc tính name.</p> </body> </html> |
Phân nhóm dữ liệu với thẻ <fieldset>
Thẻ <fieldset> dùng để nhóm những dữ liệu có liên quan tới nhau vào một form.
Thẻ <legend>dùng để đặt tên các nhóm dữ liệu trong thẻ <fieldset>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> <fieldset> <legend>Thông tin cá nhân:</legend> Họ:<br> <input type="text" name="firstname" value="Nguyen"> <br> Tên:<br> <input type="text" name="lastname" value="A"> <br><br> <input type="submit" value="Gửi"> </fieldset> </form> </body> </html> |
Các thuộc tính khác trong form
Thẻ <form> trong HTML khi thiết lập hết tất cả các thuộc tính sẽ giống như dưới đây:
|
1 2 3 4 5 6 |
<form action="/demo/action_page.php" method="GET" target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate> . các thành phần trong form . </form> |
Danh sách các thuộc tính trong form:
| Thuộc tính | Miêu tả |
|---|---|
| accept-charset | Quy định bộ mã ký tự khi gửi thông tin đi (mặc định: sử dụng mã ký tự của trang). |
| action | Quy định địa chỉ (url) nhận dữ liệu khi submit form (mặc định: gửi tới trang hiện tại). |
| autocomplete | Dùng để lưu những dự liệu đã nhập, lần sau bạn chỉ cần chọn dữ liệu thay vì nhập lại từ đâu (mặc định: on). |
| enctype | Quy định kiểu mã hóa khi gửi dữ liệu (mặc định: url-encoded). |
| method | Quy định phương thức gửi dữ liệu khi submit form (mặc định: GET). |
| name | Quy định tên để nhận dạng dữ liệu. |
| novalidate | Thông báo với trình duyệt không cần kiểm tra tính hợp lệ của dữ liệu trong form. |
| target | Quy định cửa sổ trình duyệt sẽ nhận dữ liệu (mặc định: _self). |
