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ụn𓆉g 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ín♏h 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&g✱t; đượ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ử <inpu🐷t> 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___________=-"deXu🌃at"> Các đề xuất để cải tiến môn học:</label><br>

<💮;____________________________________="deXuat"&꧟gt;</_____________>

Lời giải chi tiết:

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

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

G𒐪iả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 tr𒁃ang 35 Bài 1 SBT Tin học 12 Kết nối tri t🍎hứ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 valu💟e 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 traꦚng 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 ản🃏h đượ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="numbe🅠r"...> 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ử <i🐈nput 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ẻ <l🐭egend>.

B. Nút bấm tạo bởi thẻ &lt;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ể địnღh 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ẻ t෴huộ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ự📖 nᩚᩚᩚᩚᩚᩚ⁤⁤⁤⁤ᩚ⁤⁤⁤⁤ᩚ⁤⁤⁤⁤ᩚ𒀱ᩚᩚᩚhư 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ẻ &lt;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&gt; 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 t💟huộ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 &lt;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" ..&gt; có thể được thay bằng một <select multiple ...&✅gt;.

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 để h💝ai 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ànꦜh: 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 t😼rường thông tin, em có thể sử dụng ba phần tử <inpu💖t> 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-d𒊎ata🍸">

          <label for="tenMon">Tên món ăn:</♔label><br&g🍒t;

          <input type="text" id="tenMon" name="tenMon" required>&l🎉t;br&gt;

          <br>

       ꦆ   <label for="anhMinhHoa">Tải tệp hình ảnh:</label>;&🎃lt;br>

          <input type="file" id="anhMinhHoa" n🔜ame="anhMinhHoa"

          ac𓃲cept="image/*" required><br><br>

          <label for="giaTien">Giá tiền:</label&gt;&💮lt🀅;br>

🍨          <input type="🔯number" id="giaTien" name="giaTien" required

          min="0" step="0.01"><br><bꦜr>

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

met🦄hod="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🦩 tro🉐ng 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 t��hẻ <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ẻ &𝐆lt;input type="radio"&🍨gt; để lựa chọn giới tính.

8. Nhận thông báo: Sử dụng thẻ <input type="checkbox"> để 🎃cho pꦰhé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 k🤡hi đăng ký.

10. Nút gửi: Sử dụng thẻ &𓆏lt;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="wꦰidth=dev🌠ice-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"&gt;Tuổi:</labeꦿl>

        <input type="number"♎ id="tuoi" name="tuoi" min="1" max="100" requir🌃ed&gt;

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

        <input typ♏e="email" id="email" name="email" required>

        <label for="soDienThoai">Số điện🦋 thoại:</label&g🔜t;

        <i𝔍nput type="tel" id="soDienThoai" name="soDi💜enThoai" pattern="[0-9]{10}" required placeholder="10 chữ số">

        &lt;label for="m♓atKhau">Mật khẩu:</label>

        <input🎐 type="password" id="matKhau" name="matKhau" required&gt;

        <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&ℱgt;

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

    </fieldset>

    <fieldset>

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

        <label>

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

        </label>

        <label>

            𒊎<input type="checkbox" n𝐆ame="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>