Biểu mẫu¶
Tóm lược nội dung
Bài này trình bày một số phần tử HTML dùng để tạo các thành phần trong biểu mẫu web.
Khái quát¶
Biểu mẫu web
Là thành phần cho phép người dùng tương tác với trang web, chẳng hạn như:
- Nhập dữ liệu văn bản, số, email, mật khẩu.
- Chọn một hoặc nhiều phương án.
- Click chuột để nhấn nút.
Một số biểu mẫu phổ biến:
- Biểu mẫu đăng nhập
- Biểu mẫu thanh toán
- Biểu mẫu góp ý
- Biểu mẫu nhận xét, đánh giá
Phần tử tạo biểu mẫu rỗng¶
| Phần tử | Công dụng |
|---|---|
<form> |
Tạo biểu mẫu rỗng, chưa có thành phần nào |
Thuộc tính của biểu mẫu¶
| Thuộc tính | Ý nghĩa |
|---|---|
action |
URL của trang web mà biểu mẫu sẽ gửi dữ liệu đến |
method |
Phương thức gửi dữ liệu |
Các phương thức gửi dữ liệu của method:
| Đặc điểm | method="GET" |
method="POST" |
|---|---|---|
| Mục đích | Truy xuất dữ liệu | Gửi hoặc cập nhật dữ liệu |
| Vị trí của dữ liệu | Gắn kèm theo URL | Nằm trong gói tin gửi đi |
| Tính bảo mật | Dữ liệu công khai, không bảo mật | Bảo mật hơn |
| Dữ liệu đa phương tiện | Không thể gửi đi | Có thể gửi đi |
Ví dụ:
Đoạn mã sau tạo biểu mẫu góp ý nằm ở cuối trang web.
| portfolio.html | |
|---|---|
Click dòng này để xem kết xuất trang portfolio trong tab mới
Phần tử tạo nhãn và thành phần nhập liệu¶
| Phần tử | Công dụng | Ghi chú |
|---|---|---|
<label> |
Tạo label, tạm dịch là nhãn tên | Có thẻ đóng |
<input> |
Tạo ô nhập liệu, có hình dáng và tính năng tuỳ theo thuộc tính type |
Không có thẻ đóng |
<textarea> |
Tạo hộp văn bản cho phép nhập nhiều dòng | Có thẻ đóng |
Thuộc tính của <label>, <input> và <textarea>¶
| Phần tử | Thuộc tính | Ý nghĩa | Ghi chú |
|---|---|---|---|
<label> |
for |
Kết nối giữa label và input | Phải cùng giá trị với id của <input> |
<input> |
id |
- Kết nối giữa label và input - Dùng để làm việc với CSS hoặc JavaScript |
- Phải cùng giá trị với for của <label>- Phải là duy nhất trong trang web. |
<input> |
name |
Dùng để giao tiếp với máy chủ | |
<input> |
type |
Chức năng và hình dáng của input | |
<textarea> |
required |
Bắt buộc người dùng nhập dữ liệu, không được để trống |
Một số giá trị thông dụng của thuộc tính <type>:
| Giá trị | Ý nghĩa |
|---|---|
text |
Tạo hộp văn bản |
email |
Tạo ô nhập email |
password |
Tạo ô nhập mật khẩu |
radio |
Tạo nút tròn cho phép chọn một mục duy nhất |
checkbox |
Tạo ô đánh dấu (còn gọi là hộp kiểm) cho phép chọn nhiều mục |
submit |
Tạo nút nộp biểu mẫu |
Một số giá trị khác của thuộc tính <type>
| Giá trị | Ý nghĩa |
|---|---|
number |
Tạo một ô chọn số |
date |
Tạo hộp chọn ngày |
color |
Tạo hộp chọn màu |
file |
Tạo nút để chọn tập tin trên máy |
hidden |
Tạo một nơi chứa dữ liệu mà người dùng không thể nhìn thấy |
button |
Tạo nút nhấn |
reset |
Đặt lại các thành phần của biểu mẫu về giá trị mặc định |
Ví dụ:
Đoạn mã dòng 105 và 106 tạo nhãn và hộp văn bản để người dùng nhập tên.
| portfolio.html | |
|---|---|
Click dòng này để xem kết xuất trang portfolio trong tab mới
Ví dụ:
Đoạn mã dòng 108 và 109 tạo nhãn và ô nhập email.
Click dòng này để xem kết xuất trang portfolio trong tab mới
Ví dụ:
Đoạn mã dòng 111 và 112 tạo hộp văn bản cho phép người dùng nhập khối văn bản lớn.
Click dòng này để xem kết xuất trang portfolio trong tab mới
Phần tử tạo nút nhấn nộp¶
Có hai cách tạo nút nhấn để "nộp" dữ liệu của biểu mẫu lên máy chủ:
| Cách | Phần tử | Ghi chú |
|---|---|---|
| 1 | <input type="submit" value="Gửi ý kiến"> |
Không có thẻ đóng |
| 2 | <button type="submit">Gửi ý kiến</button> |
Có thẻ đóng |
Ví dụ:
Đoạn mã dòng 114 tạo nút nộp vào biểu mẫu theo cách 2.
Click dòng này để xem kết xuất trang portfolio trong tab mới
Sơ đồ tóm tắt¶
Some English words¶
| Vietnamese | Tiếng Anh |
|---|---|
| biểu mẫu | form, web form |
| hộp văn bản | textbox |
| nhãn | label |
| nộp (biểu mẫu) | submit |
| nút nhấn | button |