Bài 6. Tạo biểu mẫu
Nội dung lý thuyết
1. Nhập dữ liệu thông qua biểu mẫu
Vai trò: Biểu mẫu trên trang web là nơi người dùng nhập dữ liệu để gửi đến máy chủ (ví dụ: đăng nhập, đăng ký, tìm kiếm…).
Cấu trúc biểu mẫu: Biểu mẫu được khai báo bằng cặp thẻ <form>...</form>, trong đó sử dụng thuộc tính:
action: Đường dẫn đến tập lệnh xử lý dữ liệu.
method: Phương thức gửi dữ liệu (GET hoặc POST).
Ví dụ:
<form action="url" method="GET/POST"> Các điều khiển nhập dữ liệu </form>
- Phân biệt GET và POST:
GET: Dữ liệu sẽ hiển thị trên URL → không bảo mật, phù hợp tìm kiếm.
POST: Dữ liệu ẩn, bảo mật hơn → phù hợp các biểu mẫu đăng nhập.
2. Một số điều khiển hỗ trợ nhập dữ liệu thông dụng và nút lệnh
a) Nhập kí tự
HTML dùng thẻ
<input type="text">để tạo điều khiển nhập xâu kí tự (text).Cú pháp:
<input type="text" name="Tên_điều_khiển" value="Giá trị">
Ý nghĩa:
name: tên điều khiển, dùng để gửi dữ liệu.value: giá trị mặc định hiển thị trên trình duyệt.
Ví dụ:
<form action="login.php" method="POST"> Tên đăng nhập: <input type="text" name="txtTen" value="VietBach"> Email: <input type="text" name="txtEmail"> </form>
Kết quả: Hiển thị hai ô nhập văn bản cho người dùng điền thông tin.
Một số điều khiển nhập dữ liệu khác trong HTML:
Phần tử | Mục đích | Ví dụ |
|---|---|---|
textarea | Tạo ô nhập đoạn văn bản | <textarea name="Comments" rows="5" cols="60"></textarea> |
label | Gắn nhãn ý nghĩa cho điều khiển | <label>Địa chỉ email:</label> |
password | Nhập mật khẩu, che nội dung | <input type="password" name="MatKhau"> |
b) Nhập dữ liệu bằng cách lựa chọn
Radio Button – lựa chọn một trong nhiều mục
Dùng thẻ
<input type="radio">để tạo danh sách chỉ chọn một mục.Ví dụ:
<form action="feedback.php" method="POST"> <h3>Thăm dò ý kiến</h3> Thời gian tham gia ngoại khoá ngày Chủ nhật? <br> <input type="radio" name="optTime" value="Sang">Sáng <input type="radio" name="optTime" value="Chieu">Chiều <input type="radio" name="optTime" value="Toi">Tối </form>
Kết quả: Hiển thị ba lựa chọn nhưng chỉ được chọn một.
Checkbox – lựa chọn nhiều mục
- Dùng thẻ
<input type="checkbox">để tạo danh sách cho phép chọn nhiều mục. - Ví dụ:
<form action="feedback.php" method="POST"> <h3>Thăm dò ý kiến</h3> Bạn sẽ tham gia các câu lạc bộ thể thao nào? <br> <input type="checkbox" name="chkBongDa">Bóng đá <input type="checkbox" name="chkCauLong">Cầu lông <input type="checkbox" name="chkVoVua">Cờ vua </form>
Kết quả: Cho phép chọn đồng thời nhiều mục trong danh sách.
c) Nút lệnh gửi dữ liệu
HTML hỗ trợ nút gửi dữ liệu với thẻ
<input type="submit">.Cú pháp:
<input type="submit" name="Tên_điều_khiển" [value="Giá trị"]>
- Ý nghĩa:
value: nhãn nút, nếu không có sẽ hiển thị mặc định là “Submit”. - Ví dụ:
<form action=" " method="POST"> <input type="submit" name="cmd" value="Đồng ý"> </form>
- Kết quả: Tạo nút "Đồng ý", khi nhấn sẽ gửi dữ liệu đến máy chủ.
3. Một số lưu ý trong thiết kế biểu mẫu
Chọn điều khiển phù hợp: ví dụ muốn chọn một giá trị thì dùng
radio, nhiều giá trị thì dùngcheckbox.Giao diện gọn gàng, dễ hiểu, có nhãn rõ ràng (dùng
<label>để mô tả).Kiểm tra dữ liệu đầu vào: dùng JavaScript kiểm tra trước khi gửi hoặc kiểm tra phía máy chủ sau khi gửi.