Giải SBT Tin học 12 Bài 12. Tạo biểu mẫu

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

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

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

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

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