Thẻ Form Trong HTML | Học Lập Trình Cùng

Trang chủ » Form Trong Web Là Gì » Thẻ Form Trong HTML | Học Lập Trình Cùng

Có thể bạn quan tâm

NỘI DUNG BÀI VIẾT

Toggle
  • Phần tử <form>
    • Phần tử <input>
      • Thẻ nhập Text
      • Thẻ nhập Radio Button
    • Nút Submit
    • Thuộc tính Action
    • Thuộc tính Method
      • Sử dụng GET khi nào?
      • Sử dụng POST khi nào?
    • Thuộc tính Name
  • Nhóm dữ liệu trong Form với <fieldset>
  • Phần code trang “action_page.php”
    • Các thuộc tính của Form trong HTML
  • Kết luận
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ểuMô 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:

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.

<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:

<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:

Họ đệm: Tên:

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:

Thông tin cá nhân: Họ đệm: Tên: 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ínhMô tả
accept-charsetChỉ định bảng mã được sử dụng trong form gửi (mặc định: theo bảng mã của trang).
actionChỉ định một địa chỉ (url) sẽ gửi dữ liệu trên form tới (mặc định: trang gửi).
autocompleteChỉ đị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 đó.
enctypeChỉ định mã hoá dữ liệu gửi đi (Mặc định: url-encoded).
methodChỉ định phương thức HTTP được sử dụng khi gửi form (mặc định: GET).
nameChỉ đị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).
novalidateChỉ định trình duyệt sẽ không hợp lệ cho form.
targetChỉ đị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.

Chia sẻ

Bài viết liên quan

Từ khóa » Form Trong Web Là Gì