1. Biểu mẫu web
Khái niệm
Biểu mẫu web hay phần tử form của HTML là một công cụ dùng để thu thập dữ liệu. Dữ liệu được người dùng nhập vào biểu mẫu (form) và xử lí tại chỗ hoặc gửi về máy chủ.
Cấu trúc chung của một biểu mẫu web:
<form>
các phần tử của biểu mẫu
</form>Các phần tử thường dùng trong biểu mẫu:
input: Xác định vùng nhập dữ liệu. Cú pháp như sau:
<input id="mã_định_danh" type="loại_input" name="tên_input">label: Định nghĩa nhãn cho vùng nhập dữ liệu. Cú pháp:
<label for="mã_định_danh_của_input_tương_ứng">Tên_nhãn</label>select: Tạo danh sách lựa chọn. Cú pháp của phần tử select:
<select id="mã_định_danh" name="tên_select">
<option value="giá_trị">giá_trị_lựa_chọn</option>
</select>Ví dụ sử dụng phần tử select tạo một danh sách chọn gồm có 3 lựa chọn như sau:
<form>
<label for="monhoc">Chọn môn học:</label>
<select id="monhoc" name="monhoc">
<option value="toan">Toán</option>
<option value="ly">Lý</option>
<option value="hoa">Hóa</option>
<option value="sinh">Sinh</option>
<option value="van">Văn</option>
<option value="anh">Anh</option>
</select>
</form>
textarea: Xác định vùng nhập văn bản nhiều dòng. Cách sử dụng:
<textarea id="mã_định_danh" name="tên_textarea" rows="số_dòng" cols="số_cột">
Nội_dung
</textarea>Ngoài ra còn có các phần tử như:
fieldset: Nhóm các phần tử liên quan.legend: Thêm tiêu đề cho nhóm các phần tử.
Một số loại dữ liệu (type) thông dụng của phần tử input
| Type | Ý nghĩa |
|---|---|
type="text" | Tạo trường nhập văn bản |
type="password" | Tạo trường nhập mật khẩu |
type="radio" value="Nam" | Tạo ô chọn 1 giá trị duy nhất |
type="checkbox" value="Toán" | Tạo ô chọn nhiều giá trị |
type="button" value="Nút" | Tạo nút bấm |
type="file" | Tạo nút chọn tệp tin |
type="submit" value="Gửi thông tin" | Tạo nút gửi thông tin |
Câu hỏi củng cố kiến thức
Điểm khác biệt của radio, checkbox và select là gì?
Radio và checkbox là hai kiểu trong phần tử input còn select là một phần tử select. Nếu số lượng lựa chọn không quá nhiều thường dùng radio, và nếu số lượng lớn hơn thì dùng select. Checkbox dùng để chọn nhiều giá trị mỗi giá trị có dạng có chọn hoặc không chọn
Viết câu lệnh để thêm một nút có tên Quên mật khẩu vào biểu mẫu.
Có thể sử dụng một trong hai câu lệnh: <input type="button" value="Quên mật khẩu">
hoặc<button>Quên mật khẩu</button>
2. Thực hành tạo biểu mẫu
Nhiệm vụ 1: Tạo biểu mẫu nhập thông tin món ăn
Yêu cầu: Tạo biểu mẫu nhập thông tin các món ăn.
Hướng dẫn:
- Tạo tiêu đề cho biểu mẫu:
<h2>Thông tin món ăn</h2> - Tạo biểu mẫu:
<form></form> - Tạo các cặp
labelvàinputcho các thông tin: Tên món ăn, Đơn giá, Số lượng.
Sử dụng công cụ viết code online để viết: https://otth.vn/codeweb/
Code hoàn chỉnh:
<!DOCTYPE html>
<html>
<head>
<title>Thông tin món ăn</title>
</head>
<body>
<h2>Thông tin món ăn</h2>
<form>
<label for="tenmonan">Tên món ăn:</label>
<input type="text" id="tenmonan" name="tenmonan"><br><br>
<label for="dongia">Đơn giá:</label>
<input type="text" id="dongia" name="dongia"><br><br>
<label for="soluong">Số lượng:</label>
<input type="text" id="soluong" name="soluong"><br><br>
</form>
</body>
</html>Nhiệm vụ 2: Tạo biểu mẫu nhập thông tin đăng kí môn thi tốt nghiệp
Yêu cầu: Tạo biểu mẫu để nhập thông tin đăng kí môn thi tốt nghiệp.
Hướng dẫn:
- Xác định thông tin cần cung cấp:
- Họ và tên:
type="text" - Số căn cước công dân:
type="number" - Ngày sinh:
type="date" - Giới tính:
type="radio" - Các môn thi:
type="checkbox" - Tổ hợp môn:
type="radio" - Nút gửi:
type="submit"
- Họ và tên:
- Thêm các phần tử vào biểu mẫu.
- Bổ sung tiêu đề và nhóm các thông tin.
Code hoàn chỉnh: (để được kết quả như hình 12.3 SGK)
<!DOCTYPE html>
<html>
<head>
<title>Đăng kí môn thi tốt nghiệp</title>
</head>
<body>
<h2>Đăng kí môn thi tốt nghiệp</h2>
<form>
<label for="hoten">Họ và tên:</label>
<input type="text" id="hoten" name="hoten"><br><br>
<label for="cccd">CCCD:</label>
<input type="number" id="cccd" name="cccd"><br><br>
<label for="ngaysinh">Ngày sinh:</label>
<input type="date" id="ngaysinh" name="ngaysinh"><br><br>
<label>Giới tính:</label>
<input type="radio" id="nam" name="gioitinh" value="Nam">
<label for="nam">Nam</label>
<input type="radio" id="nu" name="gioitinh" value="Nữ">
<label for="nu">Nữ</label><br><br>
<label>Môn thi:</label><br>
<input type="checkbox" id="toan" name="monthi" value="Toán">
<label for="toan">Toán</label>
<input type="checkbox" id="van" name="monthi" value="Văn">
<label for="van">Văn</label>
<input type="checkbox" id="ngoaingu" name="monthi" value="Ngoại ngữ">
<label for="ngoaingu">Ngoại ngữ</label><br><br>
<label for="tohop">Tổ hợp:</label>
<select id="tohop" name="tohop">
<option value="khtn">Khoa học tự nhiên</option>
<option value="khxh">Khoa học xã hội</option>
</select><br><br>
<input type="submit" value="Gửi thông tin">
</form>
</body>
</html>Câu hỏi trắc nghiệm (dạng D1 và D2) Tin học 12 bài 12: tạo biểu mẫu
Bảng xếp hạng
| Hạng | Họ tên | Điểm số | Thời gian |
|---|---|---|---|
| 1 |
ly
1 lần thi
|
54/100
|
10 phút 4 giây |
| 2 |
Ng dep hoc ngu
1 lần thi
|
33/100
|
53 giây |
| 3 |
Mai Hạnh Dung
1 lần thi
|
23/100
|
2 phút 32 giây |
