Giải SGK Tin học 12 CTST Bài F5. Tạo biểu mẫu trong trang web có đáp án

Mộ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…

a. 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ả:

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ả:

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 đó:

- 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.