Bài 12. Tạo biểu mẫu trang 34

1.1

Trả lời câu hỏi 1.1 trang 34 Bài 1 SBT Tin học 12 Kết nối tri thức

Để tạo một ô nhập văn bản trong biểu mẫu, em có thể sử dụng những phần tử nào?

A. <input>.

B. <textarea>.

C. <fieldset>.

D. <data>.

Lời giải chi tiết:

Đáp án: A và B

A. Đúng. Thẻ <input> có thể được sử dụng để tạo nhiều loại ô nhập khác nhau, bao gồm ô nhập văn bản đơn. Để tạo ô nhập văn bản, bạn sẽ cần thiết lập thuộc tính type là text.

B. Đúng. Thẻ <textarea> được sử dụng để tạo một ô nhập văn bản có thể chứa nhiều dòng. Đây là lựa chọn tốt cho việc nhập văn bản dài hoặc nhiều dòng.

1.2

Trả lời câu hỏi 1.2 trang 34 Bài 1 SBT Tin học 12 Kết nối tri thức

Những câu lệnh nào sau đây tạo một nút gửi trong biểu mẫu?

A. <button type="button">.

B. <input type="reset">.

C. <button type="submit">.

D. <input type="submit">.

Lời giải chi tiết:

Đáp án: C và D.

C. Đúng. Thẻ <button> với thuộc tính type="submit" tạo ra một nút gửi, và khi được nhấn, nó sẽ gửi dữ liệu của biểu mẫu tới máy chủ.

D. Đúng. Thẻ <input> với thuộc tính type="submit" cũng tạo ra một nút gửi. Khi nhấn nút này, dữ liệu trong biểu mẫu sẽ được gửi đi.

1.3

Trả lời câu hỏi 1.3 trang 34 Bài 1 SBT Tin học 12 Kết nối tri thức

Để tạo một ô chọn danh sách thả xuồng trong biểu mẫu, em sử dụng câu lệnh nào dưới đây?

A. <input type="select">.

B. <input type="dropdown">.

C. <select>.

D. <dropdown>.

Lời giải chi tiết:

Đáp án: C. Thẻ <select> được sử dụng để tạo một danh sách thả xuống trong biểu mẫu. Bên trong thẻ <select>, bạn sẽ dùng các thẻ <option> để định nghĩa các lựa chọn có sẵn.

1.4

Trả lời câu hỏi 1.4 trang 34 Bài 1 SBT Tin học 12 Kết nối tri thức

Thuộc tính nào được sử dụng để xác định một phần tử <input> là bắt buộc phải điền thông tin?

A. required.

B. mandatory.

C. necessary.

D. compulsory.

Lời giải chi tiết:

Đáp án: A. Thuộc tính required được sử dụng trong HTML để chỉ định rằng người dùng phải nhập dữ liệu vào trường đó trước khi gửi biểu mẫu. Nếu trường này không được điền, trình duyệt sẽ không cho phép gửi biểu mẫu và thường sẽ hiển thị một thông báo nhắc nhở.

1.5

Trả lời câu hỏi 1.5 trang 34 Bài 1 SBT Tin học 12 Kết nối tri thức

Hoàn thiện câu lệnh sau để tạo nhãn cho một phần tử <input> có id là CCCD:

<label________=_________>Họ và tên:</label>

Lời giải chi tiết:

<label for=“CCCD”>Họ và tên:</label> Điều này cho phép người dùng dễ dàng nhận diện trường nhập liệu mà nhãn này đại diện.

1.6

Trả lời câu hỏi 1.6 trang 34 Bài 1 SBT Tin học 12 Kết nối tri thức

Hai thuộc tính liên kết phân tử <label> và <input> tương ứng là

A. input, id.

B. for, id.

C. input, name.

D. for, name.

Lời giải chi tiết:

Đáp án: B. for là thuộc tính trong thẻ <label> liên kết với phần tử <input>.

id là thuộc tính trong thẻ <input> được sử dụng để xác định phần tử mà thẻ <label> đang mô tả.

Đây là hai thuộc tính cần thiết để tạo ra mối liên kết giữa phần tử nhãn (<label>) và phần tử đầu vào (<input>).

1.7

Trả lời câu hỏi 1.7 trang 34 Bài 1 SBT Tin học 12 Kết nối tri thức

Hoàn thiện đoạn mã dưới đây và giải thích lí do.

<label___________=-"deXuat"> Các đề xuất để cải tiến môn học:</label><br>

<____________________________________="deXuat"></_____________>

Lời giải chi tiết:

<label for="deXuat">Các đề xuất để cải tiến môn học:</label><br>

<input type="text" id="deXuat" name="deXuat">

Giải thích: <label>: Phần này định nghĩa nhãn cho trường nhập liệu. Sử dụng thuộc tính for để liên kết nhãn với trường nhập liệu, giúp người dùng hiểu rõ hơn về nội dung cần điền.

<textarea>: Đây là phần tử cho phép người dùng nhập nhiều dòng văn bản. Các thuộc tính:

id: xác định duy nhất trường nhập liệu.

name: tên của trường khi gửi biểu mẫu.

Sử dụng <br>: Để tạo khoảng cách giữa nhãn và ô nhập liệu.

Việc hoàn thiện đoạn mã này sẽ giúp thu thập ý kiến đóng góp từ người học một cách hiệu quả hơn.

1.8

Trả lời câu hỏi 1.8 trang 35 Bài 1 SBT Tin học 12 Kết nối tri thức

Thuộc tính nào xác định giá trị mặc định cho một phần tử <input> và được hiển thị sẵn khi tải biểu mẫu

A. default.

B. name.

C. value.

D. init.

Lời giải chi tiết:

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

1.9

Trả lời câu hỏi 1.9 trang 35 Bài 1 SBT Tin học 12 Kết nối tri thức

Thuộc tính width và height của phần tử <input> chỉ có tác dụng khi thuộc tính type là:

A. text.

B. button.

C. range.

D. image.

Lời giải chi tiết:

Đáp án: D. Khi sử dụng **<input type="image">**, thuộc tính width và height sẽ đ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>`.

1.10

Trả lời câu hỏi 1.10 trang 35 Bài 1 SBT Tin học 12 Kết nối tri thức

Để thiết lập khoảng giá trị cho phần tử <input type="number"...> ta dùng thuộc tính nào sau đây?

A. min và max.

B. range.

C. Cả hai phương án A và B đều đúng.

D. Cả hai phương án A và B đều sai.

Lời giải chi tiết:

Đá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">

1.11

Trả lời câu hỏi 1.11 trang 35 Bài 1 SBT Tin học 12 Kết nối tri thức

Mỗi phương ăn sau đây là đúng hay sai?

A. Thẻ <fieldset> thường được dùng cùng với thẻ <legend>.

B. Nút bấm tạo bởi thẻ <input> và thẻ <button> là giống hệt nhau, chỉ khác nhau về cách viết.

C. Phần tử select chỉ cho phép chọn một giá trị trong các giá trị của một danh sách thả xuống.

D. Trong một biểu mẫu đang dùng các phần tử <input type="radio" ...> để thu

thập một loại thông tin, ta có thể thay các phần tử này bằng một phần tử select.

Lưu ý:

- Thẻ <button> có thể định dạng (in đậm, in nghiêng,...) cho dòng chữ xuất hiện trên nút bẩm, thẻ <input> thì không.

- Để chọn nhiều giá trị ta thêm vào thẻ thuộc tính multiple.

- Phần tử radio cho phép chọn một trong các phương án cho sẵn. Tương tự như vậy, phần tử select cho phép chọn một trong các phương án có sẵn theo dạng danh sách thả xuống.

Lời giải chi tiết:

Đá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ị.

1.12

Trả lời câu hỏi 1.12 trang 35 Bài 1 SBT Tin học 12 Kết nối tri thức

Mỗi phương án sau đây là đúng hay sai?

A. Không thể nhập giá trị chữ vào ô nhập <input type="number">.

B. Mỗi biểu mẫu chỉ được dùng tồi đa một <fieldset›.

C. Hai <input type="radio" ...> không thể chọn cùng lúc nều có value bằng nhau.

D. Tập hợp các <input type="checkbox" ..> có thể được thay bằng một <select multiple ...>.

Lời giải chi tiết:

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.

1.13

Trả lời câu hỏi 1.13 trang 35 Bài 1 SBT Tin học 12 Kết nối tri thức

Thực hành: Hãy tạo một biểu mẫu để thu thập thông tin cho báng đã tạo trong Câu 11.12.

Lời giải chi tiết:

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.

1.14

Trả lời câu hỏi 1.14 trang 35 Bài 1 SBT Tin học 12 Kết nối tri thức

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.

Lời giải chi tiết:

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>