1. Biểu mẫu là gì?
Biểu mẫu (form) là thành phần của trang web chứa các điều khiển (ô nhập văn bản, nút chọn, hộp kiểm, danh sách chọn, nút bấm…) để người dùng nhập dữ liệu và gửi dữ liệu đó đến máy chủ hoặc chương trình xử lí.
Biểu mẫu được tạo bởi cặp thẻ <form>…</form>, các điều khiển đặt bên trong:
<form action="xu-ly.php" method="post"> ... cac dieu khien nhap du lieu ... </form>
action: địa chỉ chương trình (trang) nhận và xử lí dữ liệu khi biểu mẫu được gửi.method: cách gửi dữ liệu.getgắn dữ liệu vào cuối địa chỉ URL (nhìn thấy được);postgửi dữ liệu trong nội dung yêu cầu, không hiện trên URL, dùng cho mật khẩu, dữ liệu dài.
2. Các điều khiển thường dùng
2.1 Thẻ input
Thẻ <input> là thẻ rỗng; thuộc tính type quyết định kiểu điều khiển:
| Giá trị type | Điều khiển tạo ra |
|---|---|
text | Ô nhập một dòng văn bản. |
password | Ô nhập mật khẩu, kí tự gõ vào bị che. |
email, number, date | Ô nhập thư điện tử, số, ngày; trình duyệt kiểm tra định dạng. |
radio | Nút chọn: trong các nút cùng name, chỉ chọn được một. |
checkbox | Hộp kiểm: có thể chọn nhiều hộp cùng lúc. |
submit | Nút gửi dữ liệu của biểu mẫu. |
reset | Nút đưa các ô về giá trị ban đầu. |
Một số thuộc tính quan trọng của các điều khiển:
name: tên của dữ liệu khi gửi đi; điều khiển không cónamethì dữ liệu không được gửi.value: giá trị gửi đi (vớiradio,checkbox) hoặc chữ hiện trên nút (vớisubmit,reset).placeholder: chữ gợi ý mờ trong ô khi chưa nhập;required: bắt buộc nhập;checked: chọn sẵn.
2.2 Nhãn, danh sách chọn, vùng văn bản, nút
<label for="id">: nhãn mô tả cho điều khiển cóidtương ứng; bấm vào nhãn cũng chọn được điều khiển.<select>chứa các<option>: danh sách thả xuống để chọn một mục.<textarea>…</textarea>: vùng nhập văn bản nhiều dòng;rows,colsđặt số dòng, số cột.<button type="submit">Gửi</button>: nút bấm, có thể thay cho<input type="submit">.<fieldset>và<legend>: nhóm các điều khiển liên quan và đặt tiêu đề cho nhóm.
3. Ví dụ minh hoạ
Viết biểu mẫu đăng kí câu lạc bộ gồm: họ tên (bắt buộc), giới tính (chọn một), môn yêu thích (chọn nhiều), khối lớp (danh sách chọn), ý kiến (nhiều dòng) và nút Gửi.
Lời giải · 2 bước
<form action="dang-ky.php" method="post">
<label for="ten">Ho ten:</label>
<input type="text" id="ten" name="hoten" required>
<br>
Gioi tinh:
<input type="radio" name="gt" value="nam"> Nam
<input type="radio" name="gt" value="nu"> Nu
<br>
Mon yeu thich:
<input type="checkbox" name="mon" value="tin"> Tin
<input type="checkbox" name="mon" value="toan"> Toan
<br>
<label for="khoi">Khoi:</label>
<select id="khoi" name="khoi">
<option value="10">Lop 10</option>
<option value="11">Lop 11</option>
<option value="12">Lop 12</option>
</select>
<br>
<textarea name="ykien" rows="3" cols="30"></textarea>
<br>
<input type="submit" value="Gui">
</form>Bước 2
Hai nút radio có cùng name="gt" nên chỉ chọn được một; các hộp checkbox chọn được nhiều. Thuộc tính for của nhãn trùng với id của ô nhập. Nhấn Gui thì dữ liệu được gửi tới dang-ky.php theo phương thức post.
4. Lưu ý và lỗi hay gặp
- Các nút
radiocùng nhóm phải có cùngname; đặtnamekhác nhau thì chọn được nhiều nút cùng lúc. - Quên
namethì dữ liệu của điều khiển đó không được gửi đi. forcủa<label>phải khớp vớiid(không phảiname) của điều khiển.<input>là thẻ rỗng;<textarea>,<select>,<button>phải có thẻ đóng.- Không dùng
method="get"cho mật khẩu vì dữ liệu hiện trên thanh địa chỉ.
5. Câu hỏi ôn tập
Nêu ý nghĩa hai thuộc tính action và method của thẻ <form>.
Gợi ý trả lời
action cho biết nơi nhận và xử lí dữ liệu; method cho biết cách gửi (get hoặc post).
Phân biệt type="radio" và type="checkbox".
Gợi ý trả lời
radio: trong nhóm cùng name chỉ chọn một; checkbox: chọn được nhiều hoặc không chọn.
Viết điều khiển nhập mật khẩu bắt buộc, có tên matkhau.
Gợi ý trả lời
<input type="password" name="matkhau" required>
Muốn người dùng viết nhận xét dài nhiều dòng thì dùng điều khiển nào?
Gợi ý trả lời
Dùng <textarea>…</textarea>, có thể đặt rows, cols.