Khi truy xuất trang web, người dùng không chỉ xem nội dung mà còn muốn tương tác với trang web, chẳng hạn nhập vào nội dung mới. Em hãy nêu một số tình huống mà em thường tương tác với trang web và mô tả cụ thể các thao tác này.
Bài F5. Tạo biểu mẫu trong trang web
Khởi động (SGK Chân trời sáng tạo - Trang 127)
Thảo luận (1)
Câu hỏi mục 1 (SGK Chân trời sáng tạo - Trang 127)
Em hãy kể tên một số biểu mẫu phổ biến trên các trang web.
Thảo luận (1)Hướng dẫn giảiMột số biểu mẫu phổ biến trên các trang web như: nhập dữ liệu văn bản, số, email, mật khẩu, chọn phương thức thanh toán, chọn phương án, nháy chuột vào nút nhấn…
(Trả lời bởi Nguyễn Việt Dũng)
Câu hỏi mục 2 (SGK Chân trời sáng tạo - Trang 130)
Em hãy thêm vào biểu mẫu trong các ví dụ trên những thành phần sau:
a) Hộp văn bản để người dùng nhập địa chỉ email.
b) Hộp kiểm để người dùng chọn thêm một câu lạc bộ.
c) Nút nhấn để xoá dữ liệu hiện có trên biểu mẫu.
Thảo luận (1)Hướng dẫn giảia. Hộp văn bản để người dùng cập nhập địa chỉ emai.
Code như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kỉ yếu lớp 12A</title>
</head>
<body>
<h1>Biểu mẫu góp ý</h1>
<form method="POST">
<label for="noten"Ho ten:</label> <br ng tại
<input type="text" id="hoten" name="hoten" ><br>
<label for="lop">Nhập địa chỉ mail: </label><br>
<input type="text" id="lop" name="lop"><br>
</form>
</body>
</html>
Kết quả:
Em hãy thêm vào biểu mẫu trong các ví dụ trên những thành phần sau: a. Hộp văn bản để người dùng cập nhập địa chỉ emai. (ảnh 1)
b. Hộp kiểm để người dùng chọn thêm một câu lạc bộCode như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kỉ yếu lớp 12A</title>
</head>
<body>
<p>Chọn câu lạc bộ bạn đang tham gia:</p>
<input type="checkbox" id="clbbongda" name="caulacbo"> <label for="clbbongda">CLB Bóng đá</label><br>
<input type="checkbox" id="clbvovinam" name="caulacbo"> <label for="clbvovinam">CLB Vovinam</label><br>
<input type="checkbox" id="clbvannghe" name="caulacbo"> <label for="clbvannghe">CLB Văn nghệ</label><br>
</body>
</html>
c. Nhấn nút để xoá dữ liệu hiện có trên biểu mẫu.
Code như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kỉ yếu lớp 12A</title>
</head>
<body>
<p>Nhập ý kiến đóng góp của bạn:</p>
<textarea id= "ykien" name="ykien" rows="10" cols="30"> </textarea><br>
<button type="submit">Gửi</button>
</body>
</html>
Kết quả:
Em hãy thêm vào biểu mẫu trong các ví dụ trên những thành phần sau: a. Hộp văn bản để người dùng cập nhập địa chỉ emai. (ảnh 2)
(Trả lời bởi Nguyễn Việt Dũng)
Luyện tập 1 (SGK Chân trời sáng tạo - Trang 130)
Em hãy nêu khái niệm biểu mẫu web và một số ví dụ biểu mẫu thông dụng.
Thảo luận (1)Hướng dẫn giảiBiểu mẫu web là thành phần để người dùng nhập dữ liệu vào web. Người dùng có thể tương tác với web thông qua biểu mẫu theo nhiều cách thức khác nhau như nhập dữ liệu văn bản, số, email, mật khẩu hoặc chọn nhiều phương án, nháy chuột vào nút nhấn.
(Trả lời bởi Nguyễn Việt Dũng)
Luyện tập 2 (SGK Chân trời sáng tạo - Trang 130)
Thảo luận với bạn và kể tên một số thành phần nhập liệu trên biểu mẫu web và thẻ HTML tương ứng để tạo các thành phần đó.
Thảo luận (1)Hướng dẫn giảiMột số thành phần nhập liệu trên biểu mẫu web và thẻ HTML tương ứng để tạo các thành phần đó:
- Biểu mẫu web được tạo từ thẻ <from>
- Thẻ <label> được dùng hiển thị tên nhãn cho các thẻ khác của biểu mẫu như <input>, <textarea> giúp người dùng dễ nhận biết cách thành phần khi thao tác.
- Thẻ <imput> có các thuộc tính: id, name, for, type…
- Thẻ <textarea> để tạo hộp văn bản cho phép nhập nhiều dòng.
(Trả lời bởi Nguyễn Việt Dũng)
Luyện tập 3 (SGK Chân trời sáng tạo - Trang 130)
Theo em, tên, giá trị và ý nghĩa của những thuộc tính trong thẻ <input> là gì?
Thảo luận (1)Hướng dẫn giảiTên, giá trị và ý nghĩa của những thuộc tính trong thẻ <input) là:
- Thuộc tính type được chỉ định là tex cho biết hộp văn bản này chỉ cho phép nhập một dòng.
- Thuộc tính id dùng để chỉ định mã định danh của thẻ <input> nhằm phần biệt với các thẻ <input> khác. Trong một biểu mẫu, thuộc tính <id> thường được dùng để để xác định một phần tử cụ thể để thao tác với CSS hoặc Java, thuộc tính name thường được dùng để xác định dữ liệu của phần tử khi gửi biểu mẫu lên máy chủ.
- Thuộc tính name của hai thẻ <input> được chỉ định cùng một giá trị (dinhhuong) để hai nút tròn cùng thuộc một nhóm phương án chung, khi người dùng chọn một phương án thì các phương án còn lại sẽ tự động huỷ chọn.
(Trả lời bởi Nguyễn Việt Dũng)
Vận dụng 1 (SGK Chân trời sáng tạo - Trang 131)
Bổ sung mã lệnh HTML vào tệp login.html để thêm các thành phần nhập liệu sau:
a) Hộp kiểm có nhãn Ghi nhớ cho lần đăng nhập sau.ao
b) Đường liên kết Quên mật khẩu? để điều hướng đến trang web recovery.html.
c) Thay đổi kiểu chữ và màu sắc các thành phần của biểu mẫu trong tệp login.html vừa tạo.
Thảo luận (1)Hướng dẫn giảiSử dụng thẻ <input) và chỉ định giá trị number cho thuộc tính type để tạo hộp văn bản nhập số thử tự. Để chuyển đến trang web cauhoi.html, em chèn thêm thuộc tính action vào thẻ <form>: <form action="cauhoi.html">.
Sử dụng thẻ <input) và chỉ định giá trị file cho thuộc tính type để tạo nút nhấn chọn tập trên máy tính.
Sử dụng thẻ <select> và <option> để tạo hộp danh sách chọn lớp.
(Trả lời bởi Nguyễn Việt Dũng)
Vận dụng 2 (SGK Chân trời sáng tạo - Trang 131)
Tạo biểu mẫu web để người dùng là học sinh làm bài kiểm tra với các yêu cầu sau:a) Trang web thongtin.html có biểu mẫu gồm 3 hộp văn bản nhập họ tên, lớp, số thứ tự trong lớp và nút nhấn để chuyển đến trang web cauhoi.html.b) Trang web cauhoi.html có biểu mẫu gồm 3 câu hỏi trắc nghiệm, mỗi câu có 4 phương án lựa chọn, một câu hỏi tự luận và nút nhấn để chọn tệp bài làm tự luận trên máy tính.c) Tìm hiểu cách tạo hộp danh sách chọn lớp để thay thế cho hộp văn bản nhập lớp.Gợi ý:Sử dụng thẻ input v...
Đọc tiếp
Tạo biểu mẫu web để người dùng là học sinh làm bài kiểm tra với các yêu cầu sau:
a) Trang web thongtin.html có biểu mẫu gồm 3 hộp văn bản nhập họ tên, lớp, số thứ tự trong lớp và nút nhấn để chuyển đến trang web cauhoi.html.
b) Trang web cauhoi.html có biểu mẫu gồm 3 câu hỏi trắc nghiệm, mỗi câu có 4 phương án lựa chọn, một câu hỏi tự luận và nút nhấn để chọn tệp bài làm tự luận trên máy tính.
c) Tìm hiểu cách tạo hộp danh sách chọn lớp để thay thế cho hộp văn bản nhập lớp.
Gợi ý:
Sử dụng thẻ <input> và chỉ định giá trị number cho thuộc tính type để tạo hộp văn bản nhập số thứ tự. Để chuyển đến trang web cauhoi.html, em chèn thêm thuộc tính action vào thẻ <form>: <form action="cauhoi.html">.
Sử dụng thẻ <input> và chỉ định giá trị file cho thuộc tính type để tạo nút nhấn chọn tệp trên máy tính.
Sử dụng thẻ <select> và <option> để tạo hộp danh sách chọn lớp.
Thảo luận (1)Hướng dẫn giải
