Thẻ form là một trong những thẻ quan trọng nhất trong HTML, giữ vai trò tương tác giữa người dùng và trang web. Các thao tác trao đổi nội dung như đăng nhập, đăng ký, bình luận đều thông qua form và các thành phần khác liên quan.
- Code mẫu
- Trình duyệt hỗ trợ
- Các thành phần trong form
- Các thuộc tính
- Xử lý form
Code mẫu<form action="#" method="get">
Họ và tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="quequan"><br />
<input type="submit" value="Submit">
</form>
Kết quả:
Trình duyệt hỗ trợThẻ form được tất cả các trình duyệt thông dụng hỗ trợ, trong đó có
Chrome, FireFox, Opera, Safari và IE.
- Thẻ dùng nhiều nhất trong form là thẻ <input>, có rất nhiều input type khác nhau, bạn có thể tham khảo thêm bài 9 thẻ input hay dùng và bài dùng các input mới để tạo form trong HTML5;
- Thẻ <textarea> chuyên dùng để nhập
dữ liệu văn bản dài;
- Thẻ select & radio button và checkbox để tạo các chọn lựa;
- Thẻ <fieldset> dùng để nhóm các trường liên quan đến nhau trong
form;
- Thẻ <label> để đặt tên cho các trường;
Các thuộc tính2 thuộc tính quan trọng hàng đầu trong form là action và method. Thuộc tính action: <form action="xuly.php" method="get">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="quequan"><br />
<input type="submit" value="Submit">
</form>
Thuộc tính action dùng để xác định địa chỉ trang web mà những dữ liệu được nhập vào được gửi đến và xử lý, tùy vào ngôn ngữ lập trình web mà bạn
có thể thấy đuôi file là php hoặc asp – Đoạn code ở form trên có nghĩa là thông tin về họ tên và quê quán được gửi tới file xuly.php
Thuộc tính method: <form action="xuly.php" method="post">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="quequan"><br />
<input type="submit" value="Submit">
</form>
Thuộc tính method dùng để xác định cách thức dữ liệu được đẩy lên. Có 2 giá trị cho method: - get: dữ liệu sẽ được đưa lên và nhìn thấy được qua URL (và bạn sẽ thấy
cặp tên=giá trị được gắn vào địa chỉ web), vì URL có chiều dài tối đa khoảng 3000 ký tự nên phương thức này không dành để gửi dữ liệu lớn. Ngoài ra vì dữ liệu đầu vào hiện trên URL nên phương thức này cũng không thích hợp với dữ liệu nhạy cảm – thí dụ như password. Tất nhiên ở phía ngược lại nó hợp với dữ liệu không nhạy cảm, chẳng hạn như các truy vấn tìm kiếm.
- post: không giới hạn dung lượng dữ liệu, thích hợp với dữ liệu nhạy cảm, password
chắc chắn phải dùng phương thức post.
- Vấn đề đầu tiên của form là chuẩn hóa dữ liệu, bạn có thể dùng HTML5 hoặc/và cách truyền thống là dùng JavaScript để chuẩn hóa.
- Vấn đề thứ hai là xử lý form bằng ngôn ngữ lập trình web. Trước đây tôi có viết bài
xử lý form ngay tại trang trong PHP có thể hữu ích cho bạn.
Khi làm web với HTML hoặc sau này bạn có học các ngôn ngữ lập trình khác để làm web thì việc tạo các form đăng nhập, form nhập dữ liệu sẽ là rất phổ biến. Ở đây chúng ta đang trong series học HTML cơ bản nên mình sẽ chỉ nói đến việc tạo form trong
HTML thôi nhé. Ở bài viết này, mình sẽ giới thiệu với bạn cặp thẻ tạo form trong HTML và các thuộc tính đi kèm với cặp thẻ đó giúp bạn hiểu rõ được các sử dụng. Để tạo form trong HTML chúng ta sẽ sử dụng cặp thẻ <form> </form> và cặp thẻ <input />
để khai báo các trường nhập liệu. Với cặp thẻ <form> </form> chúng ta sẽ có 1 vài thuộc tính quan trọng cần khai báo và cặp thẻ <input /> chúng ta cũng sẽ có các thuộc tính kèm theo. Trước khi đi vào tìm hiểu chi tiết các thẻ và các thuộc tính thì bạn hãy xem qua đoạn code tạo form đăng nhập trong HTML sau để thấy rõ cấu trúc. <form action="#" method="post" name="dang-nhap">
Tên đăng nhập: <input type="text" name="username" placeholder="Nhập tên đăng nhập" /> <br />
Mật khẩu: <input type="password" name="password" placeholder="Nhập mật khẩu" /> <br />
<input type="submit" name="submit" value="Đăng nhập" />
</form> Thẻ form và các thuộc tínhTrong ví dụ trên bạn cũng thấy, trong thẻ form
chúng ta sẽ có các thuộc tính như sau:
- action: Khai báo đường dẫn đến 1 trang xử lý dữ liệu sau khi người gửi dữ liệu.
- method: Khai báo phương thức gửi dữ liệu. Có 2 tùy chọn là get và post.
- name: Đặt tên cho form.
Các thuộc tính trên sẽ cần các ngôn ngữ lập trình khác để xử lý còn với HTML thì bạn không cần quan tâm đến các thuộc tính đó nhưng khi tạo form thì bạn nhớ là vẫn phải khai báo các thuộc tính
đó. Tham khảo thêm - Thuộc tính STYLE trong HTML
- Thẻ a trong HTML – Thẻ tạo link liên kết trong HTML
- Thẻ Table trong HTML – Thẻ tạo bảng trong HTML
Thẻ input và các thuộc tínhThẻ input dùng để cho người dùng có thể nhập hoặc chọn các thông tin. Thẻ input trong HTML hiện tại có 23 kiểu nhập dữ liệu khác nhau. Để lựa chọn kiểu nhập dữ liệu bạn sẽ phải khai báo trong thuộc tính type. 23 giá trị của thuộc tính type: - button: Hiển thị dạng nút nhấn.
- checkbox: Hiển thị dạng hộp kiểm.
- file: Hiển thị
dạng chọn file.
- hidden: Hiển thị dạng ẩn.
- image: Hiển thị dạng hình.
- password: Hiển thị dạng password.
- radio: Hiển thị dạng chọn lựa.
- reset: Hiển thị dạng phục hồi.
- submit: Hiển thị dạng submit.
- text: Hiển thị dạng text.
- color: Hiển thị dạng màu.
- date: Hiển thị dạng ngày.
- datetime: Hiển thị dạng ngày và thời gian.
- datetime-local: Hiển thị dạng ngày và thời gian của vùng.
- email: Hiển thị dạng email.
- month: Hiển thị dạng tháng.
- number: Hiển thị dạng số.
- range: Hiển thị dạng dãy.
- search: Hiển thị dạng tìm kiếm.
- tel: Hiển thị dạng số điện thoại.
- time:
Hiển thị dạng thời gian.
- url: Hiển thị dạng đường dẫn.
- week: Hiển thị dạng tuần.
Đó là các giá trị của thuộc tính type trong thẻ input. Ngoài ra còn có các thuộc tính khác mà mình không thể thống kế hết ra ở đây được. Bạn có thể xem thêm các thuộc tính của thẻ input ở đây. Để tạo form trong HTML chỉ cần làm đơn
giản vậy thôi. Bạn có thể tự mình làm 1 form để luyện cho nhớ lâu hơn nhé. Hi vọng với những kiến thức mình chia sẻ sẽ giúp ích cho bạn trong việc học HTML và làm web với HTML. Chúc bạn thành công! Internet là nơi mình học được những gì về Wordpress, SEO, SEM, MMO và kiến thức máy tính. Những chia sẻ của mình là những thứ mình học được và đã làm thành công, có thể nó chưa được hoàn hảo nhưng nó sẽ hữu ích với bạn. | 
