Chọn đến phần học sinh cần nhanh chóng thông qua mục lục bằng cách click đến phần đó
Câu hỏi mở đầu trang 67
Đề bài: Để 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 hàng trên website.
Lời giải:
Để tạo đơn hàng trên website, cần sử dụng các phần tử HTML sau:
- Phần tử
<form>để bao bọc toàn bộ biểu mẫu đơn hàng. - Phần tử
<input type="text">để nhập họ tên, địa chỉ giao hàng, số điện thoại. - Phần tử
<input type="checkbox">để khách chọn các món ăn muốn đặt. - Phần tử
<input type="number">hoặc<select>để chọn số lượng của từng món. - Phần tử
<input type="radio">để chọn phương thức thanh toán (tiền mặt, chuyển khoản…). - Phần tử
<textarea>để khách hàng ghi chú thêm về đơn hàng. - Phần tử
<input type="submit">để gửi đơn hàng.
1. Biểu mẫu web
Hoạt động 1 trang 67
Đề bài: 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 đó.
Lời giải:
Các bước đăng kí tài khoản thường gặp:
- Bước 1: Truy cập trang web và chọn mục Đăng kí (Sign up).
- Bước 2: Nhập các thông tin cá nhân vào biểu mẫu: họ và tên, tên đăng nhập, địa chỉ email, mật khẩu, xác nhận lại mật khẩu, số điện thoại…
- Bước 3: Chọn giới tính, ngày sinh (nếu có).
- Bước 4: Tích vào ô đồng ý với điều khoản sử dụng của trang web.
- Bước 5: Nhấn nút Đăng kí để gửi thông tin đến máy chủ.
- Bước 6: Xác nhận tài khoản qua email hoặc mã OTP gửi về điện thoại (nếu có).
→ Đây chính là quá trình người dùng nhập dữ liệu vào biểu mẫu (form) và gửi thông tin về máy chủ.
Câu hỏi củng cố mục 1 trang 69
Đề bài:
1. Điểm khác biệt giữa radio, checkbox và select là gì?
Lời giải:
| Phần tử | Cách hiển thị | Số lượng chọn |
|---|---|---|
radio |
Nút tròn | Chỉ chọn được duy nhất một giá trị trong nhóm cùng tên (name). |
checkbox |
Ô vuông | Có thể chọn nhiều giá trị, hoặc không chọn giá trị nào. |
select |
Danh sách thả xuống (dropdown) | Chỉ chọn một giá trị từ danh sách; tiết kiệm không gian khi có nhiều lựa chọn. |
2. Hãy viết câu lệnh để thêm một nút có tên “Quên mật khẩu” vào biểu mẫu.
Lời giải:
Dùng <input> với type="button" và đặt value là tên hiển thị trên nút:
<input type="button" value="Quên mật khẩu">
Giải thích:
type="button"tạo ra một nút bấm.value="Quên mật khẩu"là văn bản hiển thị trên nút.
Luyện tập
Luyện tập trang 70
Đề bài: 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 khác nhau và liệt kê ra ba ví dụ có thể sử dụng của từng loại.
Lời giải:
Một số loại phần tử input thông dụng và ba ví dụ ứng dụng cho từng loại:
1. type="text" – Nhập văn bản ngắn
- Ví dụ 1: Nhập họ và tên.
- Ví dụ 2: Nhập địa chỉ nhà.
- Ví dụ 3: Nhập tên đăng nhập.
<input type="text" name="hoten">
2. type="password" – Nhập mật khẩu (bị che)
- Ví dụ 1: Nhập mật khẩu đăng nhập.
- Ví dụ 2: Nhập mã PIN thẻ ngân hàng.
- Ví dụ 3: Xác nhận lại mật khẩu.
<input type="password" name="matkhau">
3. type="radio" – Chọn duy nhất một giá trị
- Ví dụ 1: Chọn giới tính (Nam/Nữ).
- Ví dụ 2: Chọn nhóm máu (A/B/AB/O).
- Ví dụ 3: Chọn tổ hợp thi (KHTN/KHXH).
<input type="radio" name="gioitinh" value="Nam"> Nam
<input type="radio" name="gioitinh" value="Nữ"> Nữ
4. type="checkbox" – Chọn nhiều giá trị
- Ví dụ 1: Chọn các môn học yêu thích.
- Ví dụ 2: Chọn các sở thích cá nhân.
- Ví dụ 3: Chọn các dịch vụ đi kèm khi đặt hàng.
<input type="checkbox" name="monhoc" value="Toán"> Toán
<input type="checkbox" name="monhoc" value="Văn"> Văn
5. type="button" – Nút bấm thông thường
- Ví dụ 1: Nút “Xoá”.
- Ví dụ 2: Nút “Đặt lại”.
- Ví dụ 3: Nút “Trợ giúp”.
<input type="button" value="Xoá">
6. type="file" – Chọn tệp tin tải lên
- Ví dụ 1: Tải ảnh đại diện.
- Ví dụ 2: Tải hồ sơ ứng tuyển.
- Ví dụ 3: Nộp bài tập dạng tệp PDF.
<input type="file" name="tep">
7. type="submit" – Gửi biểu mẫu
- Ví dụ 1: Nút “Đăng kí” khi đăng kí tài khoản.
- Ví dụ 2: Nút “Gửi phản hồi” khi liên hệ.
- Ví dụ 3: Nút “Đặt hàng” khi mua hàng.
<input type="submit" value="Gửi thông tin">
Vận dụng
Vận dụng trang 70
Đề bài:
1. Tạo một biểu mẫu đăng kí thành viên câu lạc bộ.
Lời giải:
Đoạn mã tham khảo:
<!DOCTYPE html>
<html>
<head>
<title>Đăng kí thành viên câu lạc bộ</title>
</head>
<body>
<h1>Đăng kí thành viên Câu lạc bộ</h1>
<form>
<fieldset>
<legend>Thông tin thành viên</legend>
<label for="hoten">Họ và tên:</label>
<input id="hoten" type="text" name="hoten"><br>
<label for="ngaysinh">Ngày sinh:</label>
<input id="ngaysinh" type="date" name="ngaysinh"><br>
<label for="lop">Lớp:</label>
<input id="lop" type="text" name="lop"><br>
<label>Giới tính:</label>
<input type="radio" id="nam" name="gioitinh" value="Nam">
<label for="nam">Nam</label>
<input type="radio" id="nu" name="gioitinh" value="Nữ">
<label for="nu">Nữ</label><br>
<label>Câu lạc bộ muốn tham gia:</label><br>
<input type="checkbox" id="thethao" name="clb" value="Thể thao">
<label for="thethao">Thể thao</label><br>
<input type="checkbox" id="nghethuat" name="clb" value="Nghệ thuật">
<label for="nghethuat">Nghệ thuật</label><br>
<label for="lydo">Lí do tham gia:</label><br>
<textarea id="lydo" name="lydo" rows="4" cols="40"></textarea><br>
<input type="submit" value="Gửi đăng kí">
</fieldset>
</form>
</body>
</html>
Giả sử lưu tệp này với tên dang_ki.html để dùng cho câu 2.
2. Sửa lại mã nguồn của trang web đã viết trong Nhiệm vụ 2, Bài 11 để thêm một liên kết cho cụm từ “Đăng kí”. Khi nháy chuột vào liên kết, trang web đã viết ở Câu 1 sẽ được hiển thị trong iframe.
Lời giải:
Trang web ở Nhiệm vụ 2 Bài 11 là trang có chèn tệp âm thanh Quốc ca. Ta sửa lại trang này bằng cách thêm liên kết “Đăng kí” và thêm một khung <iframe> để hiển thị nội dung được liên kết.
Đoạn mã tham khảo:
<!DOCTYPE html>
<html>
<head>
<title>Trang web của lớp</title>
</head>
<body>
<h1>Trang web của lớp</h1>
<!-- Tệp âm thanh Quốc ca đã chèn ở Nhiệm vụ 2, Bài 11 -->
<audio src="music/quocca.mp3" autoplay controls></audio>
<!-- Liên kết mới thêm vào -->
<p><a href="dang_ki.html" target="khung_dang_ki">Đăng kí</a></p>
<!-- Khung iframe để hiển thị biểu mẫu -->
<iframe name="khung_dang_ki" width="600" height="500"></iframe>
</body>
</html>
Giải thích:
- Thuộc tính
href="dang_ki.html"trỏ đến biểu mẫu đăng kí đã tạo ở Câu 1. - Thuộc tính
target="khung_dang_ki"chỉ định trang web được liên kết hiển thị trong khung<iframe>cóname="khung_dang_ki", không mở ở tab mới. - Khi nháy chuột vào chữ “Đăng kí”, biểu mẫu đăng kí thành viên câu lạc bộ sẽ hiện ra bên trong khung
iframetrên trang.
Thầy Phạm Thành Danh
(Người kiểm duyệt, ra đề)
Chức vụ: Trưởng ban biên soạn môn Tin Học THPT
Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1
Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa