Chuẩn bị bộ tệp
Giải nén ZIP và mở index.html. Bộ có năm trang: trang chủ, mon_an.html, dang_ki.html, ket_qua.html và thu_input.html. Không cần tạo tài khoản hoặc cung cấp thông tin cá nhân.
Nhiệm vụ thứ nhất là biểu mẫu món ăn với tên, đơn giá và số lượng. Nhiệm vụ thứ hai là phiếu nhóm có ô text, ngày, radio, checkbox, select, textarea và nhóm fieldset. Thêm liên kết Đăng kí mẫu để mở phiếu thứ hai trong iframe.
Tạo biểu mẫu món ăn
```html
<form action="ket_qua.html" method="get">
<p><label for="ten-mon">Tên món:</label><br>
<input id="ten-mon" name="mon" type="text"></p>
<p><label for="don-gia">Đơn giá mẫu:</label><br>
<input id="don-gia" name="gia" type="number"></p>
<p><label for="so-luong">Số lượng:</label><br>
<input id="so-luong" name="luong" type="number"></p>
<input type="submit" value="Thử gửi mẫu">
</form>
```
Mở mon_an.html bằng trình soạn thảo, đối chiếu ba cặp label–input và tên trường. Nhập dữ liệu giả định “Bánh mẫu”, đơn giá 12000, số lượng 2. Chọn từng nhãn để kiểm ô tương ứng nhận sự tập trung.
Lưu UTF-8 và tải lại sau khi chỉnh mã. Nút Thử gửi mẫu chuyển tới trang đích; không mong đợi phép nhân đơn giá với số lượng vì bộ mẫu chưa có xử lí tính tiền.
Kiểm phiếu nhóm và mở trong khung
1. Mở dang_ki.html, nhập biệt danh giả định NhomMau và một ngày sinh hoạt mẫu. Chọn Sáng rồi Chiều; cuối cùng chỉ Chiều được chọn.
2. Chọn cả Đọc sách và Vẽ tranh. Chọn Nhóm B trong danh sách, nhập lớp minh họa 12C dù datalist gợi ý 12A/12B; thêm ghi chú hai dòng.
3. Kiểm fieldset có tên nhóm bằng legend. Thử Nút mẫu: mẫu chưa gắn hành vi nên không gửi. Thử gửi bằng nút submit và đọc lời giải thích tại trang đích.
4. Trở về index.html rồi chọn Đăng kí mẫu. Biểu mẫu nhóm hiện trong khung, còn tiêu đề và liên kết của trang cha vẫn giữ trong thao tác này.
```html
<a href="dang_ki.html" target="khung">Đăng kí mẫu</a>
<iframe src="mon_an.html" name="khung" title="Biểu mẫu thực hành"
width="320" height="640"></iframe>
```
target của a khớp name của iframe. Đường dẫn ảnh hay tài nguyên khác, nếu bổ sung trong trang con, vẫn xác định từ chính trang con như Bài11.
Kiểm lỗi từ vai trò từng thuộc tính
| Dấu hiệu | Cần kiểm |
|---|---|
| Chọn nhãn không tới đúng ô |for có khớp id duy nhất của ô không|
| Hai radio cùng được chọn dù chỉ cần một |name và form của hai ô|
| Ô nhập không có trong dữ liệu gửi |name và điều kiện gửi của ô|
| Nhãn lựa chọn đúng nhưng giá trị khác dự kiến |value của radio, checkbox hoặc option|
| Đăng kí mở ra ngoài khung |target và name của iframe|
Đọc và chọn câu luyện giúp kiểm hiểu cấu trúc; kết quả thực hành cần được mở và thử trên máy. Không nhận việc thấy nút Gửi là đã có hệ thống đăng kí hoạt động đầy đủ.
Bài luyện
Biểu mẫu món ăn mẫu có đơn giá 12000 và số lượng 2. Khi gửi, có chắc trang ket_qua.html tính ra 24000 không?
form không tự chọn phép tính cho các ô.
name không tự tạo thuật toán.
type number tạo ô nhập số, không tính tiền.
Đúng. Nhập số và xử lí số là hai bước riêng.
Lời giải
12000 × 2 bằng 24000 về số học, nhưng mẫu chỉ có ô nhập và trang đích tĩnh. Muốn tính tiền tự động cần xử lí phù hợp; HTML hiện có chưa thực hiện phép nhân.
Bài luyện
Hai radio Sáng và Chiều bị viết khác name nên cùng được chọn. Sửa phù hợp là gì?
Trùng id không tạo nhóm radio đúng.
Đúng. name xác định nhóm, id và value có vai trò riêng.
password không đáp ứng lựa chọn một buổi.
Nhãn không sửa quan hệ nhóm.
Lời giải
Để các radio loại trừ nhau trong mẫu, chúng cần cùng nhóm name trong cùng form. Mỗi ô vẫn có id riêng để gắn label và value riêng để phân biệt dữ liệu lựa chọn.
Bài luyện
Đăng kí mẫu cần mở dang_ki.html trong iframe name="khung". Liên kết nào đúng?
Đúng. href chọn tài liệu, target chọn khung mang tên tương ứng.
a dùng href, không dùng src để tạo đích liên kết.
Đây là tham chiếu vị trí trong trang, chưa mở tài liệu đăng kí.
target đang là tên khác khung của mẫu.
Lời giải
href phải trỏ tệp dang_ki.html. target khung khớp name khung của iframe, nên tài liệu được mở trong khung đã tạo, thay vì chỉ cuộn tới một id.
Đang học