Thẻ

Trong lập trình Web thì form đóng vai trò rất quan trọng trong việc thu thập thông tin từ người dùng. Ví dụ khi bạn cần lấy thông tin liên hệ của khách hàng thì bạn sẽ tạo một trang contact, trong trang này có một form cho người dùng nhập thông tin của họ và nội dung liên hệ, sau đó nhấn gửi thì phía Server sẽ tiếp nhận các thông tin và lưu vào cơ sở dữ liệu.
HTML Form là tập hợp những thẻ HTML dùng để thu thập thông tin từ người dùng, nó thường được sử dụng trong các chức năng như contact, comment, login, register, ... và trong hệ thống quản lý admin [back end]. Để khai báo một form thì bắt buộc ban phải sử dụng thẻformkết hợp với một số thuộc tính của nó để cho phía Server có thể nhận được thông tin.

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

Bạn cần chú ý đến hai thuộc tính là method và acction:

  • method: giá trị của nó là POST hoặc GET, đây là cách thức gửi dữ liệu lên Server [sau này học PHP bạn sẽ được tìm hiểu]
  • action: đường dẫn xử lý khi người dùng submit form

Bên trong Form là danh sách các thẻinputhoặcselecthoặctextareadùng để thu thập thông tin, và có thể có thêm các thẻ HTML khác dùng để trang trí cho Form. Chi tiết hơn thìbạn xem phần danh sách các thẻ HTML trong Form dưới đây.

Đây là form đăng ký tài khoản mới của Google, họ đã sử dụng các thẻ HTML thông thường kết hợp với các thẻ HTMLcủa formvà CSSđể tạo nên giao diện này.

2. Các thẻ HTML thu thập thông tin trong Form

Chúng ta chia làm ba nhóm chính đó là nhóminput,textareavà nhómselect,mỗi nhóm sẽ có những loại khác nhau và chức năng khác nhau dựa vào thuộc tínhtypecủa nó.. Vì nội dung của Form khá dài nên trong bài này mình chỉ giới thiệu sơ lược, các bài sau mình sẽ đi vào chi tiết và cụ thể hơn.

Danh sách các thẻ HTML trong Form:

STTTên thẻMô tả1

Nhập dữ liệu ở dạng một dòng.

23

Có thể chọn nhiều giá trị.

4

Nhập dữ liêu ở dạng nhiều dòng.

5

Nhập dữ liệu và nó sẽ được thay thế bằng các ký tự dấu chấm đen nên người dùng không nhìn thấy được.

6

Dữ liệu show ra dạng lựa chọn xổ xuống.

7

Hiển thì một button, nếu click vào button này thì sẽ gửi dữ liệu lên Server.

8

Hiển thị một button, nếu click vào button này thì các dữ liệu trong Form sẽ được xóa hết và quay lại trạng thái ban đầu.

9

Hiển thị một button và nếu click vào sẽ không có tác dụng gì cả, vì vậy thông thường ta phải sử dụng Javascript để kết hợp với loại input này.

3. Lời kết

Như vậy bạn đã biết được ý nghĩa và tầm quan trọngcủa Form trong các ứng dụngwebsite rồi, sau này khi làm việc bạn sẽ sử dụng khá nhiều và bạn sẽ kết hợp với Javascript để tạo hiệu ứng vàkết hợp vớiPHP để lấy thông tin lưu vào cơ sở dữ liệu.

Bài tiếp theo chúng ta sẽ tìm hiểu các nhóm một cách cụ thể hơn, và bài đầu tiên chúng ta sẽ tìm hiểu về thẻinput.

Video liên quan

Chủ Đề