Thực hành: Tham khảo một số biểu mẫu thu thập thông tin khi em đăng kí sử dụng một dịch vụ nào đó

Trang trước Trang sau

Sách bài tập Tin học 12 Bài 12: Tạo biểu mẫu - Kết nối tri thức

Câu 12.14 trang 35 SBT Tin học 12: Thực hành: Tham khảo một số biểu mẫu thu thập thông tin khi em đăng kí sử dụng một dịch vụ nào đó (thư điện tử, thư viện, phiếu khảo sát...) và viết biểu mẫu để thực hiện.

Quảng cáo

Lời giải:

Hướng dẫn: Thực hiện các bước giống như trong Nhiệm vụ 2 của bài thực

hành trên lớp.

Bước 1: Xác định các đầu mục thông tin cần thu thập.

Bước 2: Với mỗi loại thông tin, xác định loại phần tử phù hợp nhất.

Bước 3: Lần lượt thêm các phần tử theo cấu trúc đã học, chú ý sử dụng các thuộc tính for, id, name và value phù hợp để đảm bảo các đối tượng đã thêm thực hiện như mong đợi.

Bước 4: Chỉnh lại cách trình bày như cỡ chữ, màu chữ,... hay nhóm các nội dung thành nhóm bằng thẻ <fieldset> và <legend>.

Giải thích:

1. Thẻ <form>: Xác định biểu mẫu thu thập dữ liệu.

action="/register": Đường dẫn nơi dữ liệu sẽ được gửi để xử lý đăng ký.

method="POST": Sử dụng phương thức POST để gửi dữ liệu một cách an toàn.

2. Họ và Tên: Sử dụng thẻ <input type="text"> để yêu cầu người dùng nhập họ tên.

3.Tuổi: Sử dụng thẻ <input type="number"> để yêu cầu người dùng nhập tuổi trong khoảng từ 1 đến 100.

4. Email: Sử dụng thẻ <input type="email"> để yêu cầu người dùng nhập địa chỉ email hợp lệ.

5. Số điện thoại: Sử dụng thẻ <input type="tel"> với mẫu số điện thoại Việt Nam (10 chữ số).

6. Mật khẩu: Sử dụng thẻ <input type="password"> để yêu cầu người dùng nhập mật khẩu, dữ liệu này sẽ không hiển thị khi nhập.

7. Giới tính: Sử dụng thẻ <input type="radio"> để lựa chọn giới tính.

8. Nhận thông báo: Sử dụng thẻ <input type="checkbox"> để cho phép người dùng chọn có muốn nhận thông báo qua email hay không.

9. Điều khoản sử dụng: Sử dụng thẻ <input type="checkbox"> để yêu cầu người dùng đồng ý với điều khoản sử dụng dịch vụ trước khi đăng ký.

10. Nút gửi: Sử dụng thẻ <input type="submit"> để gửi dữ liệu biểu mẫu.

Lưu ý:

Biểu mẫu này rất phổ biến và có thể được sử dụng để đăng ký tài khoản cho bất kỳ dịch vụ trực tuyến nào, như email, dịch vụ thư viện, khảo sát trực tuyến.

Trong thực tế, bạn có thể tùy chỉnh biểu mẫu để thêm các trường dữ liệu cụ thể hơn tùy theo yêu cầu của dịch vụ.

<!DOCTYPE html>

<html lang="vi">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Biểu mẫu Đăng ký</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 20px;

            color: #333;

        }

        fieldset {

            border: 1px solid #ccc;

            padding: 20px;

            margin-bottom: 20px;

        }

        legend {

            font-weight: bold;

            font-size: 1.2em;

            color: #0066cc;

        }

        label {

            display: block;

            margin: 10px 0 5px;

        }

        input[type="text"],

        input[type="number"],

        input[type="email"],

        input[type="tel"],

        input[type="password"] {

            width: 100%;

            padding: 8px;

            margin-bottom: 10px;

            border: 1px solid #ccc;

            border-radius: 4px;

        }

        input[type="submit"] {

            background-color: #0066cc;

            color: white;

            padding: 10px 15px;

            border: none;

            border-radius: 4px;

            cursor: pointer;

        }

        input[type="submit"]:hover {

            background-color: #005bb5;

        }

    </style>

</head>

<body>

<h2>Đăng ký Sử dụng Dịch vụ</h2>

<form action="/register" method="POST">

    <fieldset>

        <legend>Thông tin cá nhân</legend>

        <label for="hoTen">Họ và Tên:</label>

        <input type="text" id="hoTen" name="hoTen" required>

        <label for="tuoi">Tuổi:</label>

        <input type="number" id="tuoi" name="tuoi" min="1" max="100" required>

        <label for="email">Email:</label>

        <input type="email" id="email" name="email" required>

        <label for="soDienThoai">Số điện thoại:</label>

        <input type="tel" id="soDienThoai" name="soDienThoai" pattern="[0-9]{10}" required placeholder="10 chữ số">

        <label for="matKhau">Mật khẩu:</label>

        <input type="password" id="matKhau" name="matKhau" required>

        <label>Giới tính:</label>

        <input type="radio" id="nam" name="gioiTinh" value="Nam" required>

        <label for="nam">Nam</label>

        <input type="radio" id="nu" name="gioiTinh" value="Nữ" required>

        <label for="nu">Nữ</label>

    </fieldset>

    <fieldset>

        <legend>Tùy chọn</legend>

        <label>

            <input type="checkbox" name="nhanThongBao" value="1"> Tôi muốn nhận thông báo qua email

        </label>

        <label>

            <input type="checkbox" name="dongY" required> Tôi đồng ý với điều khoản sử dụng dịch vụ

        </label>

    </fieldset>

    <input type="submit" value="Đăng ký">

</form>

</body>

</html>

Quảng cáo

Lời giải sách bài tập Tin học 12 Bài 12: Tạo biểu mẫu hay khác:

Quảng cáo
Quảng cáo

Xem thêm các bài giải sách bài tập Tin học lớp 12 Kết nối tri thức hay, chi tiết khác:

Xem thêm các tài liệu học tốt lớp 12 hay khác:

ĐỀ THI, GIÁO ÁN, GÓI THI ONLINE DÀNH CHO GIÁO VIÊN VÀ PHỤ HUYNH LỚP 12

Bộ giáo án, đề thi, bài giảng powerpoint, khóa học dành cho các thầy cô và học sinh lớp 12, đẩy đủ các bộ sách cánh diều, kết nối tri thức, chân trời sáng tạo tại https://tailieugiaovien.com.vn/ . Hỗ trợ zalo VietJack Official

Giáo án, bài giảng powerpoint Văn, Toán, Lí, Hóa....

4.5 (243)

799,000đs

199,000 VNĐ

1000 Đề thi bản word THPT quốc gia cá trường 2023 Toán, Lí, Hóa....

4.5 (243)

799,000đ

199,000 VNĐ

Đề thi thử DGNL (bản word) các trường 2023

4.5 (243)

799,000đ

199,000 VNĐ

xem tất cả
Trang trước Trang sau
Giải bài tập lớp 12 Kết nối tri thức khác
Học cùng VietJack
Tài liệu giáo viên