Form HTML thu thập dữ liệu người dùng: ô văn bản, danh sách thả xuống, checkbox... Form được bao bởi thẻ <form> và dùng <input> để tạo các điều khiển.
Form cho phép người dùng tương tác, gửi dữ liệu lên server hoặc xử lý bởi trình duyệt. Hướng dẫn này trình bày cách xây dựng form hoàn chỉnh qua ví dụ form liên hệ quán cà phê "Three Brothers".
Các Phần Tử Trong Form
Form có thể chứa: ô văn bản một dòng, hộp văn bản nhiều dòng, danh sách thả xuống, checkbox, nút bấm, radio button. Hầu hết dùng thẻ <input> (trừ textarea, button).
Sau khi submit, dữ liệu có thể: gửi lên server hoặc xử lý bởi trình duyệt.
Trước khi code, hãy thiết kế: thu thập dữ liệu gì? Giữ form đơn giản để người dùng hoàn thành.
Thẻ <form>
Bao quanh toàn bộ form. Cú pháp:
<form> /* các phần tử */ </form>
Thường dùng hai thuộc tính: action (URL xử lý) và method (GET/POST).
Phần Tử <input>
Điều khiển nhập liệu chính. Cú pháp:
<input type="loại" id="id_duy_nhat" name="ten_truong">
type xác định kiểu: text, email, password, radio, checkbox, submit... id dùng để nhận diện, name bắt buộc để gửi dữ liệu.
Ví dụ trường Tên và Email:
<form> <label for="name">Tên:</label><br> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email"> </form>
Thuộc Tính name
Mọi điều khiển form phải có name, nếu không dữ liệu không được gửi đi.
Thẻ <label>
Gán nhãn cho điều khiển, hỗ trợ screen reader. Thuộc tính for trỏ đến id của input:
<label for="name">Tên:</label> <input type="text" id="name" name="name">
Radio Button
Cho chọn một trong vài lựa chọn. Dùng type="radio", cùng name để nhóm. Ví dụ hỏi khách hàng:
<p>Bạn đã đến quán chưa?</p> <input type="radio" id="yes" name="customer" value="yes"> <label for="yes">Có</label><br> <input type="radio" id="no" name="customer" value="no"> <label for="no">Không</label>
Giá trị value là dữ liệu gửi lên server.
Thẻ <textarea>
Dùng cho văn bản dài (như tin nhắn). Phải có thẻ đóng/mở. Ví dụ:
<label for="message">Tin nhắn:</label><br> <textarea id="message" name="message">Nội dung mặc định...</textarea>
Thuộc tính rows, cols kiểm soát kích thước.
Nút Submit
Gửi form. Cú pháp: <input type="submit" value="Gửi">. Cần chỉ định action trên thẻ <form> để biết gửi đâu.
<form action="/xu-ly.php" method="POST"> ... các trường ... <input type="submit" value="Gửi"> </form>
Gửi Form: action & method
Thuộc Tính action
URL của trang xử lý (form handler). Mặc định là trang hiện tại nếu thiếu.
Thuộc Tính method
Phương thức HTTP: GET (mặc định) hoặc POST. Luôn dùng POST cho dữ liệu nhạy cảm vì GET hiển thị dữ liệu trên URL.
<form action="/xu-ly.php" method="POST">
Kết Luận
Form là tính năng cốt lõi để thu thập dữ liệu. Hướng dẫn đã trình bày: thẻ form, input, label, radio, textarea, submit, và cách gửi dữ liệu an toàn. Bạn đã sẵn sàng thiết kế form HTML chuyên nghiệp!