Đáp án: C. value: Đúng. Thuộc tính value xác định giá trị mặc định của phần tử <input>. Khi trang web được tải, nội dung trong thuộc tính value sẽ được hiển thị sẵn trong ô nhập liệu.

Đáp án: D. Khi sử dụng **<input type="image">**, thuộc tính widthvàheightsẽ điều chỉnh kích thước của ảnh được hiển thị, tương tự như khi sử dụng thẻ<img>`.

Đáp án: A.  Đây là hai thuộc tính chính xác để thiết lập khoảng giá trị cho phần tử <input type="number">

Đáp án: A, D: Đúng; B, C: Sai.

A. Đúng. Thẻ <fieldset> thường được sử dụng để nhóm các phần tử trong một biểu mẫu lại với nhau, và thẻ <legend> dùng để đặt tiêu đề cho nhóm đó. Điều này giúp cải thiện trải nghiệm người dùng và làm cho biểu mẫu trở nên dễ đọc hơn

B. Sai. Mặc dù cả hai đều có thể tạo nút bấm, nhưng thẻ <button> có thể chứa nhiều nội dung phức tạp hơn (ví dụ: văn bản, hình ảnh), trong khi thẻ <input> chỉ tạo ra một nút bấm đơn giản với văn bản. Thẻ <button> cũng cho phép định dạng và xử lý linh hoạt hơn, chẳng hạn như in đậm, in nghiêng:

C. Sai. Phần tử <select> có thể cho phép chọn nhiều giá trị nếu thêm thuộc tính multiple. Khi không có thuộc tính multiple, nó chỉ cho phép chọn một giá trị duy nhất.

D. Đúng. Phần tử <select> và nhóm các phần tử <input type="radio"> đều cho phép chọn một giá trị trong các tùy chọn cho trước. Tuy nhiên, nhóm radio buttons thường được sử dụng khi cần hiển thị tất cả các lựa chọn cùng lúc, còn <select> thường dùng khi số lượng lựa chọn lớn và muốn tiết kiệm không gian hiển thị.

A. Đúng. Thẻ <input type="number"> chỉ cho phép nhập các giá trị số. Nếu người dùng cố gắng nhập chữ, trình duyệt sẽ không chấp nhận giá trị này. Tuy nhiên, tùy vào trình duyệt, nếu người dùng nhập ký tự không hợp lệ, có thể không hiển thị cảnh báo tức thì, nhưng giá trị không hợp lệ sẽ không được gửi trong biểu mẫu.

B. Sai. Trong một biểu mẫu HTML, bạn có thể sử dụng nhiều thẻ <fieldset> nếu cần nhóm các phần tử thành nhiều nhóm logic khác nhau. Không có giới hạn nào quy định mỗi biểu mẫu chỉ được sử dụng một <fieldset>. Ví dụ, bạn có thể có các <fieldset> cho "Thông tin cá nhân" và "Thông tin liên hệ" trong cùng một biểu mẫu

C. Sai. Giá trị value của các nút radio không ảnh hưởng đến khả năng chọn cùng lúc. Điều kiện để hai radio buttons không thể chọn cùng lúc là chúng phải có cùng một name. Nếu hai radio buttons có cùng thuộc tính name, người dùng chỉ có thể chọn một trong hai, dù giá trị của chúng giống nhau hay khác nha

D. Đúng. Cả <input type="checkbox"> và <select multiple> đều cho phép người dùng chọn nhiều giá trị cùng lúc. Khi sử dụng <select multiple>, người dùng sẽ chọn từ danh sách thả xuống thay vì tích vào nhiều ô checkbox. Điều này giúp tiết kiệm không gian giao diện khi có nhiều tùy chọn.

Hướng dẫn: Bảng chỉ có ba trường thông tin, em có thể sử dụng ba phần tử <input> tương ứng với mỗi loại thông tin. Cụ thể:

<h2>Biểu mẫu thu thập thông tin</h2>

<form action="/submit" method="post" enctype="multipart/form-data">

<label for="tenMon">Tên món ăn:</label><br>

<input type="text" id="tenMon" name="tenMon" required><br><br>

          <label for="anhMinhHoa">Tải tệp hình ảnh:</label><br>

<input type="file" id="anhMinhHoa" name="anhMinhHoa" accept="image/*" required><br><br>

<label for="giaTien">Giá tiền:</label><br>

<input type="number" id="giaTien" name="giaTien" required min="0" step="0.01"><br><br>

          <input type="submit" value="Gửi">

</form>

 </body>

</html>

– Tên món ăn – text

– Hình ảnh – Cần tải tệp để cập nhật hình ảnh đặt type=“file”.

– Giá tiền – đặt là number để đảm bảo giá trị nhập vào dưới dạng số.

Sau khi thu thập thông tin qua biểu mẫu, em có thể lưu trữ các dữ liệu này vào một bảng trong cơ sở dữ liệu, hoặc hiển thị lại trong một bảng HTML khác trên trang web để xem lại thông tin mà người dùng đã nhập.

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 {

           

            margin: 20px;

            color: #333;

        }

        fieldset {

            border: 1px solid #ccc;

            padding: 20px;

            margin-bottom: 20px;

        }

        legend {

            font-weight: bold;

           

            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>