BÀI 12.
TẠO BIỂU MẪU

Sử dụng thẻ HTML để tạo biểu mẫu trong trang web

1. BIỂU MẪU WEB
Biểu mẫu là gì?

Web
Server

Biểu mẫu (form): công cụ để người
dùng nhập dữ liệu vào trang web.

www.facebook.com/
login.asp
abcd@gmail.com
12345678

1. BIỂU MẪU WEB
Cách tạo biểu mẫu

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

 action: trang web xử lí dữ liệu
 method: phương thức gửi dữ liệu
• GET
• POST

Web
Server

1. BIỂU MẪU WEB
Cách tạo biểu mẫu

Web
Server

1. BIỂU MẪU WEB
Các phần tử của biểu mẫu

1. BIỂU MẪU WEB
Các phần tử của biểu mẫu
 label
 input
• text
• password
• date
• radio
• checkbox
• file
• button
• submit
 select
 textarea
 fieldset

1. BIỂU MẪU WEB
Các phần tử của biểu mẫu
 label
 input
• text
• password
• date
• radio
• checkbox
• file
• button
• submit
 select
 textarea
 fieldset




Họ tên:
‣ : tạo trường nhập văn bản
‣ : tạo trường nhập mật khẩu
‣ : tạo trường nhập ngày tháng
‣ id: mã định danh
‣ name: tên
‣ : tạo nhãn cho các phần tử khác
‣ for: mã định danh của phần tử tương ứng

1. BIỂU MẪU WEB
Các phần tử của biểu mẫu
 label
 input
• text
• password
• date
• radio
• checkbox
• file
• button
• submit
 select
 textarea
 fieldset

Nam
Nữ






‣ : tạo ô chọn 1 giá trị duy nhất
‣ : tạo ô chọn nhiều giá trị
‣ id: mã định danh
‣ name: tên
‣ value: giá trị

1. BIỂU MẪU WEB
Các phần tử của biểu mẫu
 label
 input
• text
• password
• date
• radio
• checkbox
• file
• button
• submit
 select
 textarea
 fieldset




‣ : tạo nút chọn tệp tin để tải lên máy chủ
‣ : tạo nút bấm
‣ : tạo nút gửi thông tin đến máy chủ
‣ id: mã định danh
‣ name: tên
‣ value: giá trị hiển thị trên nút bấm

1. BIỂU MẪU WEB
Các phần tử của biểu mẫu
 label
 input
• text
• password
• date
• radio
• checkbox
• file
• button
• submit
 select
 textarea
 fieldset


Bóng đá
Bóng bàn
Bóng rổ
Bóng chuyền
Cầu lông
Bơi lội
Võ thuật

‣ < select>: tạo danh sách các lựa chọn

1. BIỂU MẪU WEB
Các phần tử của biểu mẫu
 label
 input
• text
• password
• date
• radio
• checkbox
• file
• button
• submit
 select
 textarea
 fieldset

Thông tin cá nhân:

<br>

Thông tin cá nhân:

>
‣ : tạo vùng nhập văn bản có nhiều dòng và cột<br>‣ <fieldset>: nhóm các phần tử có liên quan<br><br>1. Điểm khác biệt giữa radio, checkbox và select là gì?<br>Điểm khác biệt:<br>• radio: một kiểu của phần tử input, chọn một giá trị trong các giá trị<br>có sẵn, radio đi theo nhóm, số lựa chọn ít<br>• checkbox: một kiểu của phần tử input, chọn một hoặc nhiều giá trị<br>với mỗi giá trị dưới dạng có/không, các checkbox độc lập với nhau<br>• select: phần tử select, chọn một giá trị trong các giá trị có sẵn, số lựa<br>chọn lớn<br><br>2. Hãy viết câu lệnh để thêm một nút có tên “Quên mật khẩu”<br>vào biểu mẫu.<br><form><br><input type="button" value= "Quên mật khẩu"><br></form><br><br>2. Hãy viết câu lệnh để thêm một nút có tên “Quên mật khẩu”<br>vào biểu mẫu.<br><form><br><input type="button" value="Quên mật khẩu"</button><br></form><br><br>2. THỰC HÀNH TẠO BIỂU MẪU<br>Nhiệm vụ 1: Tạo biểu mẫu<br>Yêu cầu<br>Tạo biểu mẫu để nhập thông tin các món ăn (Hình 12.2)<br><br>2. THỰC HÀNH TẠO BIỂU MẪU<br>Nhiệm vụ 1: Tạo biểu mẫu<br><br>2. THỰC HÀNH TẠO BIỂU MẪU<br>Nhiệm vụ 2: Tạo biểu mẫu<br>Yêu cầu<br>Tạo biểu mẫu để nhập thông tin đăng<br>kí môn thi tốt nghiệp (Hình 12.3)<br><br><form><br><h2><br><fieldset><br><br><input type=“text”><br><input type=“text”><br><br><label><br><br><input type=“date”><br><input type=“radio”><br><input<br>type=“checkbox”><br><br><select><br><br><input type=“submit”><br>Bước 1. Phân tích biểu mẫu<br><br>Bước 2. Tạo biểu mẫu<br><br>Bước 3. Bổ sung thẻ <h1> và thẻ <fieldset><br><br>LUYỆN TẬP<br>Lần lượt tạo các loại phần tử form và các phần tử input với<br>những loại dữ liệu khác nhau và liệt kê ra ba ví dụ có thể sử<br>dụng của từng loại.<br>Một số ví dụ khi sử dụng:<br>• text: địa chỉ, sở thích, tên trường, …<br>• password: mật khẩu, mã OTP, câu hỏi bảo mật khi lấy lại tài khoản, …<br>• radio: chọn lớp, khối thi, lựa chọn hình thức nộp học phí, …<br>• checkbox: chọn các môn chuyên để học tập, các loại sách, phim ưa<br>thích, …<br>• button: nút bấm tải về, cập nhật, quên mật khẩu, chuyển trang, …<br>• file: tải tệp ảnh đăng kí, bài thi, ảnh căn cước, …<br><br>VẬN DỤNG<br>1. Tạo một biểu mẫu đăng kí thành viên câu lạc<br>bộ.<br><br>Tạo một biểu mẫu đăng kí thành viên câu lạc bộ<br><br>VẬN DỤNG<br>Sửa lại mã nguồn của trang web đã viết trong Nhiệm vụ 2, Bài 11<br>để thêm một liên kết cho cụm từ Đăng kí. Khi nháy chuột vào liên<br>kết, trang web đã viết ở Câu 1 sẽ được hiển thị trong iframe.<br><html><br><head><br><meta charset="UTF-8"><br></head><br><body><br><h2>Câu lạc bộ ngoại khóa Trường Nguyễn Bỉnh Khiêm</h2><br>[<a href="the_thao.html" target="iframe">Câu lạc bộ Thể thao</a>]<br>[<a href="nghe_thuat.html" target="iframe">Câu lạc bộ Nghệ thuật</a>]<br>[<a href= "registration-form.html" target="iframe">Đăng ký</a>]<br><iframe name="iframe" width="650" height="650"></iframe><br></body><br></html><br><br>Thêm một liên kết cho cụm từ Đăng kí để liên kết đến trang web biểu mẫu đăng kí câu lạc bộ<br><br>THANK<br>YOU! </div> </div> </div> </div> </div> <div align="center" style="position:relative;"> </div> <div id="comments" class="comments">  <div style="display:none;" class="form_error" id="error_for_cm_content"> ↓   ↓</div> </div> <form method="post" action="/"><input type="hidden" name="entry_id" id="entry_id" value="14436488" /><textarea name="cm_content" id="cm_content"> Gửi ý kiến

Hãy thử nhiều lựa chọn khác

Bài 6. Biểu mẫu

Bài 6. Biểu mẫu

Bài 6. Biểu mẫu

Bài 6. Biểu mẫu

Bài 6. Biểu mẫu

Bài 6. Biểu mẫu

---

Còn nữa...