Bài 6. Thêm biểu mẫu vào trang web
Đến đây trang web của dự án đã có đầu trang, thân trang, chân trang và menu điều hướng đầy đủ. Nhưng trang mới chỉ nói với người xem, chưa lắng nghe họ. Bài này ta thêm một biểu mẫu (form) để người xem gửi lại thông tin: đăng ký, góp ý hay liên hệ với nhóm.
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề E(ICT) · Bài 6. Tạo biểu mẫu cho trang web và xuất bản websitetr. 152
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài E7. Sử dụng Map, Forms và các thiết lập trang webtr. 90
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 27. Biểu mẫu trên trang webtr. 147
Bắt đầu bằng một hình dung
Trang web câu lạc bộ Sách của nhóm Lan giờ đã khá chỉn chu: có ảnh biểu tượng, các khu giới thiệu, danh sách sự kiện, thanh menu bấm sang từng trang mượt mà. Cả nhóm mang ra khoe với cô chủ nhiệm câu lạc bộ.
Cô xem xong gật gù khen đẹp, rồi hỏi một câu làm cả nhóm ngớ người: 'Thế bạn nào muốn xin vào câu lạc bộ thì làm sao hả các em? Trên trang có chỗ nào để bạn ấy điền tên, lớp, rồi bấm gửi cho nhóm mình không?' Lan nhìn lại trang: từ trên xuống dưới chỉ toàn chữ và ảnh để đọc, tuyệt nhiên không có một ô trống nào cho người xem gõ vào.
Huy chợt nhớ hồi đăng ký thi học sinh giỏi trên mạng: có cái khung với mấy ô điền họ tên, lớp, email, chọn môn thi, cuối cùng bấm một nút là xong. 'Mình cần đúng cái khung đó,' Huy nói. Cái khung để người xem điền thông tin rồi gửi đi ấy chính là biểu mẫu, thứ ta đưa vào trang hôm nay.
Nội dung bài học
- 1) Biểu mẫu giúp trang web lắng nghe người xem
- 2) Khung biểu mẫu và nút gửi
- 3) Các loại trường nhập thông tin
- 4) Nhãn gắn với ô nhập giúp dễ dùng
Tóm tắt lý thuyết cần nhớ
- Biểu mẫu (
form) mở luồng ngược để người xem nhập và gửi thông tin về cho chủ trang, thay vì chỉ đọc - Mọi biểu mẫu cần ô nhập (
input,textarea...) và nút gửi (submit) gói chung trong thẻform - Chọn đúng loại trường:
text,email,radio(chọn một),checkbox(chọn nhiều),select,textarea(đoạn dài) - Nhãn (
label) gắn với ô nhập quaforkhớpidgiúp dễ dùng và thân thiện với trợ năng
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| input (HTML) | in-pút | ô nhập liệu Là ô trống để người dùng gõ thông tin vào, như ô điền tên hoặc mật khẩu. |
| label (thẻ HTML) | lê-bồ | nhãn ô nhập Là dòng chữ ghi tên cho một ô nhập, để người dùng biết ô đó cần điền gì. |
| select (HTML) | si-léc | ô chọn xổ xuống Là ô bấm vào sẽ xổ xuống một danh sách cho ta chọn, như chọn lớp hay chọn màu. |
| textarea | tếch-e-ri-a | ô nhập nhiều dòng Là ô nhập chữ cỡ lớn, cho phép gõ nhiều dòng như viết một đoạn văn. |
| form (thẻ HTML) | phom | biểu mẫu Thẻ bọc cả cụm ô nhập và nút gửi. |
| submit | sấp-MÍT | gửi biểu mẫu Nút kết thúc biểu mẫu: gom mọi thứ vừa nhập rồi gửi đi. |
Câu hỏi trắc nghiệm có đáp án
Mấy câu mẫu để bạn tự kiểm tra ngay. Trong ứng dụng, bài này có đủ 22 câu, chấm điểm tự động và giải thích từng câu sai.
mainformfooterimg
form, nhờ đó khi bấm gửi thì mọi ô nhập bên trong đi cùng nhau một lượt. main là thân trang chứa nội dung chính để đọc, footer là chân trang chứa thông tin phụ, còn img chỉ để chèn một hình ảnh, không dùng để bọc biểu mẫu.- Ô văn bản thường (
text) - Ô chọn một trong nhiều (
radio) - Vùng văn bản nhiều dòng (
textarea) - Ô email (
email)
email được trình duyệt hiểu là để điền địa chỉ email nên có thể tự nhắc khi giá trị nhập vào không đúng dạng email. Ô text chỉ nhận chuỗi bất kì mà không kiểm tra. radio dùng để chọn một trong các lựa chọn, còn textarea là khung rộng nhiều dòng cho đoạn văn dài, cả hai đều không dành cho việc nhập một địa chỉ email.- Nút gửi (nút loại
submit) - Nhãn
labelgắn với ô nhập - Vùng văn bản
textarea - Thẻ chân trang
footer
submit khi được bấm sẽ khiến trình duyệt gom hết dữ liệu trong form và gửi đi, nên nó đảm nhận việc chuyển thông tin. label chỉ là nhãn ghi rõ ô để điền gì, textarea là một ô nhập cho đoạn dài, còn footer là chân trang, không liên quan tới việc gửi biểu mẫu.- a)Thẻ
formdùng để gói các ô nhập và nút gửi của một biểu mẫu.Đúng - b)Nút gửi loại
submitkhi bấm sẽ chuyển thông tin người dùng đã điền đi.Đúng - c)Một biểu mẫu bắt buộc chỉ được có đúng một ô nhập duy nhất.Sai
- d)Ô email (
email) giúp trình duyệt nhắc khi địa chỉ nhập vào không đúng dạng.Đúng
- (a) Đúng - mọi ô nhập và nút gửi của biểu mẫu đều nằm trong thẻ
form. - (b) Đúng - nút
submitgom dữ liệu trongformrồi gửi đi. - (c) Sai - một biểu mẫu có thể có nhiều ô nhập khác nhau, ví dụ họ tên, email, lời nhắn.
- (d) Đúng - ô
emailđược trình duyệt hiểu là để nhập email nên có thể tự nhắc khi sai dạng.
Thử ngay: minh hoạ từng bước
Bấm từng bước để tự xem cơ chế hoạt động, hoặc bấm “Tự chạy” cho nó tiến mỗi giây một lần. Đổi được dữ liệu đầu vào - không cần đăng nhập.
Học trọn bài này trong ứng dụng
Bài giảng đầy đủ, 22 câu luyện tập chấm tự động, thi thử đúng cấu trúc đề tốt nghiệp (24 trắc nghiệm + 4 Đúng/Sai), bài thực hành máy tự chấm và gia sư AI giải thích chỗ sai.
Phần học miễn phí, không cần tạo tài khoản.
Bài liên quan - Ứng dụng tin học & Thiết kế web
Cùng mạch kiến thức với bài này, học nối tiếp cho chắc phần lí thuyết.