Các thuộc tính của Form trong HTML

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.

1. HTML Form là gì?

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ẻform kế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ấu trúc như sau:

1 2 3

<form method="post/get" action="url_access_when_submit">     <!-- Các thẻ input bên trong --> </form>

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ẻ input hoặc select hoặc textarea dù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ẻ HTML của form  và 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óm input, textarea và nhóm select, 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ính type củ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:

STT	Tên thẻ	Mô tả
1	1 2 3 <input type="text"/> hoặc <input type="textbox"/>	Nhập dữ liệu ở dạng một dòng.
2	1 <input type="radio"/>	Chỉ chọn một giá trị.
3	1 <input type="checkbox"/>	Có thể chọn nhiều giá trị.
4	1 <textarea></textarea>	Nhập dữ liêu ở dạng nhiều dòng.
5	1 <input type="password"/>	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	1 2 3 <select>     <option>Value</option> </select>	Dữ liệu show ra dạng lựa chọn xổ xuống.
7	1 <input type="submit"/>	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	1 <input type="reset" />	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	1 <input type="button" />	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ọng của Form trong các ứng dụng website 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ới PHP để 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.