I. Lý thuyết trọng tâm

1. Biểu mẫu web là gì?

1.1. Khái niệm

Biểu mẫu web (hay còn gọi là phần tử form trong HTML) là công cụ được sử dụng để thu thập dữ liệu từ người dùng. Khi người dùng nhập thông tin vào biểu mẫu, dữ liệu có thể được xử lý ngay tại trình duyệt hoặc gửi về máy chủ để xử lý.

Trong quá trình sử dụng Internet, chúng ta thường xuyên gặp các biểu mẫu web khi thực hiện các thao tác như đăng ký tài khoản, đặt mua hàng trực tuyến, tìm kiếm thông tin hay điền phiếu khảo sát.

1.2. Hai thành phần của biểu mẫu web

Một biểu mẫu web đầy đủ bao gồm hai thành phần chính:

Lưu ý: Thành phần thứ hai không thuộc phạm vi ngôn ngữ HTML nên không được đề cập trong bài học này.

1.3. Cấu trúc cơ bản của thẻ form

Biểu mẫu web được tạo bởi thẻ <form> với cấu trúc như sau:

<form>
    các phần tử của biểu mẫu
</form>

Bên trong thẻ form, chúng ta sẽ đặt các phần tử khác nhau tùy theo yêu cầu về thông tin cần thu thập.

1.4. Các phần tử thường dùng trong biểu mẫu

Các phần tử của biểu mẫu được chia thành hai nhóm:

• Nhóm phần tử chính: input, label, select, textarea
• Nhóm phần tử bổ sung: fieldset, legend, datalist…

Trong đó, phần tử input là phần tử quan trọng nhất của biểu mẫu.

2. Các phần tử của biểu mẫu

2.1. Phần tử label (nhãn)

Phần tử label được sử dụng để định nghĩa nhãn mô tả cho các phần tử nhập liệu.

Cấu trúc:

<label for="mã_định_danh_của_input_tương_ứng">Tên_nhãn</label>

Giải thích:

• Thuộc tính for chứa giá trị trùng với thuộc tính id của phần tử input tương ứng
• Khi người dùng nhấp chuột vào nhãn, con trỏ sẽ tự động được đưa vào vùng nhập liệu của input tương ứng

Ví dụ:

<label for="username">Tên đăng nhập:</label>
<input id="username" type="text" name="username">

Trong ví dụ trên, khi nhấp vào dòng chữ “Tên đăng nhập:”, con trỏ sẽ tự động nhảy vào ô nhập liệu.

2.2. Phần tử input (vùng nhập dữ liệu)

Phần tử input xác định vùng để người dùng nhập dữ liệu. Đây là thẻ đơn, không cần thẻ kết thúc.

Cấu trúc:

<input id="mã_định_danh" type="loại_input" name="tên_input">

Các thuộc tính quan trọng:

Lưu ý quan trọng: Phần tử input chỉ dùng để nhập dữ liệu. Muốn có thông tin mô tả về nội dung cần nhập, phải tạo kèm phần tử label.

2.3. Các loại input (type) thông dụng

Thuộc tính type quyết định kiểu dữ liệu và cách hiển thị của phần tử input. Dưới đây là bảng tổng hợp các loại type thường gặp:

Một số ví dụ cụ thể:

<!-- Ô nhập tên -->
<label for="name">Họ tên:</label>
<input id="name" type="text" name="fullname">

<!-- Ô nhập mật khẩu -->
<label for="pass">Mật khẩu:</label>
<input id="pass" type="password" name="password">

<!-- Chọn giới tính (chỉ chọn 1) -->
<input type="radio" name="gender" value="Nam"> Nam
<input type="radio" name="gender" value="Nữ"> Nữ

<!-- Chọn môn học yêu thích (chọn nhiều) -->
<input type="checkbox" name="subject" value="Toan"> Toán
<input type="checkbox" name="subject" value="Van"> Văn
<input type="checkbox" name="subject" value="Anh"> Anh

<!-- Nút gửi thông tin -->
<input type="submit" value="Đăng ký">

2.4. Phần tử select (danh sách thả xuống)

Phần tử select cho phép người dùng chọn một trong các lựa chọn từ danh sách thả xuống. Mỗi lựa chọn được định nghĩa bằng thẻ option.

Cấu trúc:

<select id="mã_định_danh" name="tên_select">
    <option value="giá_trị_1">Lựa chọn 1</option>
    <option value="giá_trị_2">Lựa chọn 2</option>
    <option value="giá_trị_3">Lựa chọn 3</option>
</select>

Ví dụ thực tế:

<label for="class">Lớp: </label>
<select id="class" name="class">
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select>

Khi hiển thị, người dùng sẽ thấy một ô với giá trị mặc định. Nhấp vào ô sẽ hiện ra danh sách các lựa chọn để chọn.

2.5. Phần tử textarea (vùng nhập văn bản nhiều dòng)

Phần tử textarea được sử dụng khi cần tạo vùng nhập văn bản có nhiều dòng, phù hợp cho việc nhập nội dung dài như ý kiến, nhận xét, mô tả sản phẩm.

Cấu trúc:

<textarea id="mã_định_danh" name="tên_textarea" rows="số_dòng" cols="số_cột">Nội_dung</textarea>

Giải thích các thuộc tính:

• rows: Số dòng hiển thị của vùng nhập
• cols: Số cột (độ rộng) của vùng nhập
• Phần Nội_dung giữa thẻ mở và thẻ đóng sẽ được hiển thị sẵn trong vùng nhập

Ví dụ:

<label for="comment">Ý kiến của bạn:</label>
<textarea id="comment" name="comment" rows="5" cols="40">Nhập ý kiến tại đây...</textarea>

Lưu ý: Nếu không đặt nội dung nào giữa cặp thẻ, vùng nhập văn bản sẽ là vùng trắng.

2.6. Phần tử fieldset và legend (nhóm các phần tử)

Phần tử fieldset được sử dụng để nhóm các phần tử có liên quan trong biểu mẫu bằng cách vẽ một đường viền hình chữ nhật bao quanh.

Phần tử legend được đặt bên trong fieldset để tạo tiêu đề cho nhóm.

Cấu trúc:

<fieldset>
    <legend>Tên nhóm</legend>
    các phần tử trong nhóm
</fieldset>

Ví dụ:

<fieldset>
    <legend>Thông tin cá nhân</legend>
    <label for="name">Họ tên:</label>
    <input id="name" type="text" name="name"><br>
    <label for="email">Email:</label>
    <input id="email" type="text" name="email">
</fieldset>

Kết quả sẽ hiển thị một khung bao quanh các phần tử với tiêu đề “Thông tin cá nhân” ở góc trên.

3. So sánh radio, checkbox và select

Ba phần tử này đều dùng để người dùng lựa chọn, nhưng có những điểm khác biệt quan trọng:

Khi nào dùng loại nào?

• radio: Khi có ít lựa chọn (2-5) và người dùng chỉ được chọn một
• checkbox: Khi người dùng có thể chọn nhiều hoặc không chọn gì
• select: Khi có nhiều lựa chọn (>5) và cần tiết kiệm không gian hiển thị

Thầy Phạm Thành Danh

(Người kiểm duyệt, ra đề)

Chức vụ: Trưởng ban biên soạn môn Tin Học THPT

Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1

Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa