BÀI 6. TẠO BIỂU MẪU
KHỞI ĐỘNG
Trên màn hình soạn thảo email có một số ô điều khiển nhập dữ liệu, em hãy cho biết tên và chứ năng của các điều khiển đó.
Giải rút gọn:
Các chức năng chính của giao diện soạn email:
1. Người nhận:
- To: Nhập địa chỉ email người nhận chính.
- Cc: Nhập địa chỉ email những người nhận bản sao (nhìn thấy được).
- Bcc: Nhập địa chỉ email những người nhận bản sao bí mật (không hiển thị cho người khác).
2. Nội dung email:
- Chủ đề: Nhập tiêu đề ngắn gọn cho email.
- Nội dung: Nhập nội dung chính của email.
3. Tùy chọn:
- Đính kèm: Đính kèm tệp vào email.
- Gửi: Gửi email sau khi hoàn tất.
- Lưu nháp: Lưu email dưới dạng bản nháp.
- Cài đặt: Mở cài đặt bổ sung (định dạng, kiểu gửi...).
1. NHẬP DỮ LIỆU THÔNG QUA BIỂU MẪU
2. MỘT SỐ ĐIỀU KHIỂN HỖ TRỢ NHẬP DỮ LIỆU THÔNG DỤNG VÀ NÚT LỆNH
HOẠT ĐỘNG
Em hãy phân biệt sự khác nhau giữa việc nhập dữ liệu cho ô “Địa chỉ người nhận” và ô “Nội dung” khi soạn thảo email.
Giải rút gọn:
"Địa chỉ người nhận" là nơi bạn nhập địa chỉ email của người nhận, trong khi "Nội dung" là nơi bạn nhập nội dung chính của email mà bạn muốn gửi đi.
3. MỘT SỐ LƯU Ý TRONG THIẾT KẾ BIỂU MẪU
LUYỆN TẬP
Em hãy soạn thảo văn bản HTML để tạo biểu mẫu với các điều khiển nhập liệu như ở hình 6.
Giải rút gọn:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Đăng ký tham gia Hội thao</title>
</head>
<body>
<h1>Đăng ký tham gia Hội thao</h1>
<form action="/action_page.php" method="post">
<label for="hoten">Họ và tên:</label>
<input type="text" id="hoten" name="hoten" required><br>
<br>
<label for="email">Địa chỉ email:</label>
<input type="email" id="email" name="email" required><br>
<br>
<label for="lop">Lớp:</label>
<input type="radio" id="lop10" name="lop" value="lop10" checked>
<label for="lop10">Lớp 10</label>
<input type="radio" id="lop11" name="lop" value="lop11">
<label for="lop11">Lớp 11</label>
<input type="radio" id="lop12" name="lop" value="lop12">
<label for="lop12">Lớp 12</label><br>
<br>
<label for="mon">Tham dự môn:</label><br>
<input type="checkbox" id="bongban" name="mon" value="bongban">
<label for="bongban">Bóng bàn</label><br>
<input type="checkbox" id="caulong" name="mon" value="caulong">
<label for="caulong">Cầu lông</label><br>
<input type="checkbox" id="covua" name="mon" value="covua">
<label for="covua">Cờ vua</label><br>
<br>
<input type="submit" value="Đăng ký">
<input type="reset" value="Huỷ bỏ">
</form>
</body>
</html>
VẬN DỤNG
Em hãy hiệu chỉnh văn bản HTML trong bài Luyện tập để chỉ cho phép chọn một môn thể thao trong danh sách các môn thể thao được gợi ý.
Giải rút gọn:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Đăng ký tham gia Hội thao</title>
</head>
<body>
<h1>Đăng ký tham gia Hội thao</h1>
<form action="/action_page.php" method="post">
<label for="hoten">Họ và tên:</label>
<input type="text" id="hoten" name="hoten" required><br>
<br>
<label for="email">Địa chỉ email:</label>
<input type="email" id="email" name="email" required><br>
<br>
<label for="lop">Lớp:</label>
<input type="radio" id="lop10" name="lop" value="lop10" checked>
<label for="lop10">Lớp 10</label>
<input type="radio" id="lop11" name="lop" value="lop11">
<label for="lop11">Lớp 11</label>
<input type="radio" id="lop12" name="lop" value="lop12">
<label for="lop12">Lớp 12</label><br>
<br>
<label for="mon">Tham dự môn:</label><br>
<input type="radio" id="bongban" name="mon" value="bongban">
<label for="bongban">Bóng bàn</label><br>
<input type="radio" id="caulong" name="mon" value="caulong">
<label for="caulong">Cầu lông</label><br>
<input type="radio" id="covua" name="mon" value="covua">
<label for="covua">Cờ vua</label><br>
<br>
<input type="submit" value="Đăng ký">
<input type="reset" value="Huỷ bỏ">
</form>
</body>
</html>
TỰ KIỂM TRA
Câu 1: Khai báo nào được dùng để tạo điều khiến nhập dữ liệu ô text trong biểu mẫu?
A. <input type = "text" name "txt">
B. <textfield name="txt">
C. <textinput name = "txt">
D. <input type="txtfield" name = "txt">
Giải rút gọn:
A. <input type="text" name="txt">
Để tạo một ô điều khiển nhập dữ liệu cho văn bản (text input) trong biểu mẫu, ta sử dụng phần tử <input> với thuộc tính type được đặt là "text". Đây là cách phổ biến và chính xác để tạo ô điều khiển nhập dữ liệu văn bản.
Câu 2: Mỗi phát biểu sau đây về các điều khiển nhập dữ liệu trên biểu mẫu là đúng hay sai?
a) Phần tử textarea được dùng để khai báo điều khiển nhập dữ liệu kí tự trên nhiều dòng trong biểu mẫu.
b) Phần tử input có thuộc tính type = "radio" được dùng để khai báo các mục lựa chọn cho phép người dùng có thể chọn nhiều mục chọn.
c) Phần tử input có thuộc tính type = "submit” được dùng để khai báo nút lệnh gửi dữ liệu.
d) Muốn xuống dòng khi nhập dữ liệu vào ô nhập liệu tạo bằng khai báo phần tử input có thuộc tính type="text" sử dụng phím Enter.
Giải rút gọn:
a) Đúng:
- Phần tử <textarea> được dùng để tạo ô nhập liệu văn bản nhiều dòng trong biểu mẫu.
b) Sai:
- Phần tử <input type="radio"> dùng cho các lựa chọn duy nhất, người dùng chỉ chọn được một mục.
c) Đúng:
- Phần tử <input type="submit"> tạo nút bấm gửi dữ liệu từ biểu mẫu.
d) Sai:
- Khi sử dụng <input type="text">, nhấn Enter sẽ gửi dữ liệu thay vì xuống dòng.
- Để xuống dòng, cần nhấn Shift + Enter.