Thẻ form trong HTML

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

<form action="#" 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>

Kết quả:

Họ tên:
Quê quán:

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.

Các thành phần trong form

• 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ính

2 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.

Xử lý form

• 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.