Nội dung bài viết
Đăng ký học lập trình C++
Tại STDIO bạn được dạy nền tảng lập trình tốt nhất.
Đăng ký học
Chắc hẳn chúng ta rất quen thuộc với "khung nhập liệu" điền thông tin để đăng kí thành viên hay đăng kí tài khoản, đăng nhập trên website. Thực chất đó là thẻ form và tập hợp các thẻ input trong html mà tôi đã hướng dẫn ở phần trước. Thì trong bài viết này tôi sẽ cùng các bạn tìm hiểu cấu trúc cuả thẻ form cũng như cách sử dụng của nó nhử thế nào.

Giới thiệu

Chắc hẳn chúng ta rất quen thuộc với "khung nhập liệu" điền thông tin để đăng kí thành viên hay đăng kí tài khoản, đăng nhập trên website. Thực chất, đó là thẻ form và tập hợp các thẻ input trong html mà tôi đã hướng dẫn ở phần trước. Trong bài viết này tôi sẽ cùng các bạn tìm hiểu cấu trúc của thẻ form cũng như cách sử dụng của nó như thế nào?.

Tiền đề bài viết

Bài viết nằm trong CHƯƠNG TRÌNH TỰ HỌC HTML của STDIO.VN :: stdio.vn do tác giả Nguyễn Nghĩa biên soạn.

Đối tượng hướng đến

Bài viết hướng đến những lập trình viên mới tiếp cận với lập trình web và đã xem qua các bài viết về Lập trình HTM căn bản.

Tổng quan về form

<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 thông tin từ người dùng được website thu nhận và xử lý ở phía server.

Hình ảnh dưới đây là form đăng kí thành viên của stdio.vn

ss_1

Thông thường chúng ta sử dụng  thẻ <form> cho các form đăng kí tài khoản, thành viên hay đăng nhập trên website.

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

 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. Thông thường là một trang web (web page) nằm ở phía server.
  • 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ế ra nhằm mục đích chính là dữ liệu từ người dùng nhập vào form phải được submit lên một web page trên server chỉ định bởi thuộc tính action của form. Vậy để làm được mục đích này thì form cần có những yêu cầu như sau:

  • 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="upload.php" 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.

ss_2

Sau khi nhấn submit (Đăng nhập) thì các dữ liệu được nhập trong các thẻ input text, password được gửi lên server với web page là upload.php, và web page này sẽ nhận dữ liệu và xử lý theo yêu cầu.

Lưu ý: mọi input nhập dữ liệu các bạn phải đặt tên cho nó thông qua thuộc tính name, để web page trên server có thể lấy được dữ liệu.

Cách thức truyền dữ liệu của form

Ví dụ trên các bạn có thấy lạ lẩm khi thấy method="get" hay không? Và nó là cái gì?. Tôi sẽ giải thích ngay sau đây.

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 get

get

Các dữ liệu được truyền đi được hiển thị lên URL của trình duyệt và dữ liệu truyền đi phụ thuộc vào độ dài đối đa của URL.

Ví dụ trên tôi nhập email: author@stdio.vn và password: 123456 sau đó nhấn submit, trên thanh trình duyệt sẽ thấy như sau:

ss_3

Các bạn thấy mặc dù tôi nhập mật khẩu, nhưng khi tôi nhấn sumbit thì trên trình duyệt vẩn hiển thị thông tin về mật khẩu, cho nên không có tính bảo mật. Giải pháp khắc phục ở đây là dùng post thay vì dùng get.

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à dữ liệu truyền đi không phụ thuộc vào URL.

Tương tự ví dụ trên nhưng ở đây tôi dùng method post và nhấn submit các bạn sẽ thấy là dữ liệu được truyền đi không được hiển thị trên trình duyệt nên có tính bảo mật hơn.

ss_4

Ngoài ra để có thể hiểu rõ post và get hơn các bạn có thể xem bài viết Phương Thức Truyền Và Nhận Dữ Liệu POST, GET Trong PHP.

Lời kết

Qua bài viết này tôi hy vọng các bạn nắm rõ được bản chất của thẻ form trong html. Và đây cũng là bài viết cuối cùng trong CHƯƠNG TRÌNH TỰ HỌC HTML. Mong rằng qua những bài viết từ đầu tới giờ các bạn có thể vận dụng được kiến thức học được áp dụng vào website của một cách tối nhất. Tiếp theo chuổi bài này sẽ là chuổi bài về CSS và Javascript giúp các bạn có thể thiết kế giao diện đẹp hơn và thao tác động với html thông qua Javascripts.

Nếu có mất cứ câu hỏi thắc mắc nào, các bạn có thể liên hệ tác giả Nguyễn Nghĩa.

THẢO LUẬN