HTML - Phần 8: Thẻ Form trong HTML

Tổng quan về thẻ <form>

Thẻ <form> trong HTML là một thẻ chứa các thành phần nhập liệu thẻ <input> nhằm lấy các thông tin từ người dùng nhập vào, và gửi đến server.

Có thể ứng dụng trong nhiều trường hợp:

• Mẫu đăng ký thành viên.
• Mẫu đăng nhập.
• Mẫu bình luật hoặc đăng bài.
• Mẫu đặt hàng
• ...

Ví dụ về <form> đăng nhập

<form id="loginForm">
    EMAIL<br />
    <input type="text" name="email" value="" /><br />
    PASSWORD<br/>
    <input type="text" name="password" value="" /><br />
    <button type="submit" form="loginForm" value="Submit">Đăng nhập</button>
</form>

Cấu trúc của thẻ <form>

Thẻ <form> trong HTML có cấu trúc như sau:

<form name="..." action="..." method="...">
    ...
    Các thành phần của form
    ...
</form>

Các thuộc tính của form:

• name: tên của form.
• action: chỉ định action sẽ nhận dữ liệu từ khi form có sự kiện click button submit.
• method: xác định phương thức truyền dữ liệu (POST, GET).

Nguyên tắc hoạt động của form

Form được thiết kế nhằm mục đích đưa dữ liệu từ người dùng nhập vào form một web page trên server bằng cấu hình đường dẫn thông qua action và cách gửi dữ liệu thông qua thuộc tính method:

• Dữ liệu cần truyền phải nằm trong cặp thẻ <form></form>.
• Dữ liệu cần truyền phải nhập vào các form field (các thẻ <input>).
• Dữ liệu chỉ được truyền đi khi nhấn button submit.

Ví dụ form đăng nhập đơn giản:

<form action="https://training.stdio.vn/login" method="get">
    EMAIL<br />
    <input type="text" name="email" /><br />
    PASSWORD<br />
    <input type="password" name="password" /><br />
    <input type="submit" value="Đăng nhập">
</form>

Kết quả chạy trên trình duyệt.

EMAIL

PASSWORD

Sau khi nhấn Đăng nhập (Submit) thì các dữ liệu được nhập trong các thẻ input text, password được gửi lên server với:

• Đường dẫn từ server sẽ xử lý là: action="https://training.stdio.vn/login"
• Phương thức nhập dữ liệu là: method="get"

* Lưu ý: Việc xây dựng 1 đường dẫn hỗ trợ đăng nhập như https://training.stdio.vn/login sẽ là công việc của Back-end.

Thuộc tính method của form quy định cách mà form sẽ gửi dữ liệu như thế nào, thông thường có hai giá trị là post và get. 

get

Các dữ liệu truyền đi hiển thị rõ ràng trên đường dẫn, ví dụ nhập:

• email: training@stdio.vn
• password: 123456
• Sau đó nhấn submit, đường dẫn gửi đầy đủ sẽ là: https://training.stdio.vn/login?email=training@stdio.vn&password=123456

Phương thức gửi dạng GET không phù hợp với các yêu cầu đòi hỏi tính bảo mật dữ liệu, do đường dẫn trên sẽ hiển thị rất rõ ràng trên trình duyệt web.

post

Cũng giống như get là truyền dữ liệu từ form, nhưng với post các dữ liệu của form được truyền ngầm và chỉ sử dụng được 1 lần. Khi truyền đi, đường dẫn hiển thị sẽ là: https://training.stdio.vn/login

Bài chung series

• HTML - Phần 0: Trang Web Đầu Tiên</a >
• HTML - Phần 1: Cơ Bản về HTML</a >
• HTML - Phần 2: Các Thẻ Định Dạng Văn Bản</a >
• HTML - Phần 3: Thẻ Liên Kết trong HTML</a >
• HTML - Phần 4: Các Thẻ Định Dạng Danh Sách</a >
• HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio</a >
• HTML - Phần 6: Các Thẻ Input trong HTML</a >
• HTML - Phần 7: Thẻ Table trong HTML</a >
• HTML - Phần 8: Thẻ Form trong HTML</a >