Bài 12. Tạo biểu mẫu
SAU BÀI HỌC NÀY EM SẼ:
Để tham gia hội chợ ẩm thực ở trường, lớp em đã tạo một website để quảng cáo sản phẩm. Em hãy thảo luận với các bạn và chọn loại phần tử HTML cần sử dụng để tạo đơn đặt hàng trên website.
1. BIỂU MẪU WEB
Hoạt động 1
Mô tả các bước mà em đã thực hiện khi đăng kí tài khoản trên một trang web nào đó.
Biểu mẫu web (form) của HTML là một công cụ để thu thập dữ liệu. Dữ liệu được người dùng nhập vào form và xử lí tại chỗ hoặc gửi về máy chủ. Ta thường gặp các biểu mẫu (form) khi đăng kí tài khoản, mua hàng, tìm kiếm thông tin,... Phần tử form là phần tử được dùng thường xuyên.
Biểu mẫu web đầy đủ có hai thành phần:
Biểu mẫu web được tạo bởi thẻ <form> có cấu trúc chung như sau:
<form>
các phần tử của biểu mẫu
</form>Các phần tử của biểu mẫu thường dùng là: input, label, select, textarea; ngoài ra còn có các phần tử khác như fieldset, legend, datalist,...
<label for= mã_định_danh_của_input_tương_ứng >Tên_nhãn< / label>Về mặt hiển thị, nhãn không có gì đặc biệt; tuy nhiên khi nháy chuột vào Tên_nhãn, con trỏ chuột sẽ được đưa vào phần tử input được xác định bởi thuộc tính for tương ứng:
<input id="mã_định_danh" type="loại_input name="tên_input"
Trong đó:
Lưu ý: Phần tử input chỉ để nhập dữ liệu, muốn có thông tin về nội dung nhập phải tạo kèm label dùng.
| Type | Ví dụ | Ý nghĩa | |
| text | type="text" | Tạo ra trường nhập văn bản. | Nhập nội dung ở đây |
| password | type="password" | Tạo ra trường nhập mật khẩu, dùng để nhập văn bản nhưng bị che thông tin. | •••• |
| radio | type="radio" value="Nam" | Tạo ra ô chọn 1 giá trị duy nhất trong các phần tử cùng tên (name). | (•) Nam |
| checkbox | type="checkbox" value="Toan" | Tạo ra ô lựa chọn giá trị có hoặc không. Mỗi ô radio và ô checkbox cần thêm thuộc tính value để ghi nhận giá trị. | |
| button | type="button" value="Nút" | Tạo ra một nút bấm. Cần thêm thuộc tính value để hiện tên trên nút. | Nút |
| file | type="file" | Tạo ra nút để chọn một tệp tin và tải lên máy chủ. | Choose File |
| submit | type="submit" value="Gửi thông tin" | Tạo ra nút để gửi thông tin đến máy chủ, trình duyệt sẽ gọi tới đường dẫn chỉ định tại thuộc tính action của thẻ <form>. Cần thêm thuộc tính value như button. | Gửi thông tin |
<select id="mã_định_danh" name= "tên_select <option value-"giá_trị">giá_trị_lựa_chon</option> <lselect>Ví dụ:
<label for= class >Lớp:</label> <select id "class name= class <option value =" <option value= 11 >11 </option> <option value 12">12</option> </select>
Hình 12.1. Ví dụ về danh sách chọn
<textarea id= mã_định_danh name= "tên textarea rows=" sõ_dòng' cols= >Nội_dung</textarea)Lưu ý: Phần Nội_dung được hiển thị trong vùng nhập; nếu không để Nội_dung trong thẻ, vùng nhập văn bản là vùng trắng.
Người dùng web cung cấp thông tin cho trang web thông qua biểu mẫu. Biểu mẫu được định nghĩa bởi thẻ <form>, chứa nhiều loại phần tử tuỳ theo yêu cầu về thông tin cần thu thập; trong đó loại phần tử quan trọng nhất là input dùng để nhập thông tin.
2. THỰC HÀNH TẠO BIỂU MẪU
Nhiệm vụ 1: Tạo biểu mẫu
Yêu cầu: Tạo biểu mẫu để nhập thông tin các món ăn (Hình 12.2).
Hướng dẫn:
Bước 1. Tạo tiêu đề cho biểu mẫu bằng thẻ heading: <h2> Thông tin món ăn</h2>.
Bước 2. Tạo một biểu mẫu bằng cặp thẻ <form></form>.
Bước 3. Trong cặp thẻ <form>, lần lượt tạo ba cặp label và input.
Mỗi thẻ <input>, ngoài việc sử dụng thuộc tính type để xác định kiểu dữ liệu cần nhập, cần thiết lập mã định danh bằng thuộc tính id để liên kết với thẻ <label> tương ứng. Ví dụ:
<label for="monan">Tên món ăn</label> <input id="monan" type="text">
Ở đây phần tử input là trường nhập dữ liệu dạng chữ, ứng với nhãn Tên món ăn. Để phần tử label được viết trên dòng mới, cần thêm thẻ <br> vào trước thẻ <label> tương ứng.
Nhiệm vụ 2: Tạo biểu mẫu
Yêu cầu: Tạo biểu mẫu để nhập thông tin đăng kí môn thi tốt nghiệp (Hình 12.3).
Hướng dẫn:
Bước 1. Xác định thông tin cần cung cấp:
Bước 3. Ngoài ra, để biểu mẫu dễ nhìn, ta bổ sung thêm tiêu đề bằng thẻ <h1> và nhóm các thông tin bằng thẻ <fieldset> bằng cách đặt tất cả các câu lệnh để hiển thị các phần tử nằm trong khung giữa cặp thẻ <fieldset> </fieldset>.
Kết quả thu được là biểu mẫu như Hình 12.3.
LUYỆN TẬP
Lần lượt tạo các loại phần tử form và các phần tử input với những loại dữ liệu