Bài 13. Nhận thông tin từ người dùng với thẻ form và input
Các thẻ HTML đã học đều dùng để đưa nội dung ra cho người xem đọc. Bài này đi theo chiều ngược lại: dùng cặp thẻ <form> cùng các thẻ <input>, <label>, <textarea>, <select> để tạo biểu mẫu - nơi người xem gõ dữ liệu vào và gửi đi.
- Chân trời sáng tạoTin học 12 (Khoa học máy tính) - Bài F5. Tạo biểu mẫu trong trang webtr. 94
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài F5. Tạo biểu mẫu trong trang webtr. 127
- Cánh DiềuTin học 12 (Khoa học máy tính) - Chủ đề F · Bài 6. Tạo biểu mẫutr. 59
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề F · Bài 6. Tạo biểu mẫutr. 59
- Cánh DiềuTin học 12 (Khoa học máy tính) - Chủ đề F · Bài 7. Thực hành tạo biểu mẫutr. 65
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề F · Bài 7. Thực hành tạo biểu mẫutr. 65
Xem thêm 2 quyển
- Kết nối tri thứcTin học 12 (Khoa học máy tính) - Bài 12. Tạo biểu mẫutr. 67–70
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 12. Tạo biểu mẫutr. 67
Bắt đầu bằng một hình dung
Câu lạc bộ Tin học của trường tuyển thành viên mới. Bạn lớp trưởng dán lên bảng tin một tờ giấy A4 kẻ sẵn mấy cột: họ tên, lớp, số điện thoại, buổi rảnh, lí do muốn tham gia. Ai muốn vào thì ra ghi tên.
Mới được hai ngày mà tờ giấy đã thành một mớ hỗn độn. Có bạn viết chữ nhỏ quá, đọc mãi không ra là 12A1 hay 12A4. Có bạn quên hẳn cột số điện thoại, đến lúc cần gọi thì chịu. Có bạn ghi lí do dài quá, chữ tràn sang cả dòng của người khác. Đến chiều thứ Sáu thì một cơn mưa tạt vào hành lang, nửa tờ giấy nhoè mực, coi như mất trắng danh sách.
Cô giáo chủ nhiệm gợi ý: sao các em không làm hẳn một trang đăng kí trên mạng? Trên đó, mỗi thông tin có một ô riêng biệt, ai cũng gõ vào đúng chỗ của mình. Ô nào bắt buộc mà bỏ trống thì máy nhắc ngay, không cho gửi. Cột lớp thì làm thành một danh sách bấm vào chọn, khỏi lo viết sai. Ô lí do thì cho rộng ra vài dòng để viết thoải mái.
Cả nhóm làm theo. Chỉ cần một địa chỉ trang web dán lên nhóm chat của trường, tối hôm đó đã có hơn bốn mươi bạn điền xong, dữ liệu về gọn gàng một chỗ, không nhoè, không thiếu, không đọc nhầm. Bài học hôm nay sẽ chỉ cho bạn cách dựng đúng trang đăng kí như vậy.
Nội dung bài học
- 1) Biểu mẫu là gì và vì sao phải có cặp thẻ <form>
- 2) Thẻ <input>: một thẻ nhưng rất nhiều kiểu ô nhập
- 3) Bốn thuộc tính phải thuộc lòng: name, value, placeholder, required
- 4) Nhãn <label>, ô nhiều dòng <textarea> và danh sách thả xuống <select>
- 5) Nút gửi và một biểu mẫu đăng kí hoàn chỉnh
Tóm tắt lý thuyết cần nhớ
- Biểu mẫu là phần trang web dùng để nhận dữ liệu người dùng nhập; mọi ô nhập phải nằm trong cặp thẻ
<form>, vớiactionchỉ nơi xử lí dữ liệu vàmethodchọn cách gửi (gethiện trên thanh địa chỉ,postthì không). <input>là thẻ tự đóng, kiểu ô nhập do thuộc tínhtypequyết định:text,password,number,email,date,checkbox(chọn nhiều),radio(chọn một, các nút cùng nhóm phải trùngname).nameđặt tên cho dữ liệu gửi đi (thiếunamelà mất dữ liệu),valueđặt giá trị sẵn có,placeholderchỉ là chữ mờ gợi ý không được gửi,requiredbắt buộc phải điền.<label>dùngfortrùngidcủa ô để bấm nhãn là nhảy vào đúng ô;<textarea>cho ô nhiều dòng,<select>cùng các<option>cho danh sách thả xuống; nút gửi viết bằng<input type="submit">hoặc<button>, và chỉ nên hỏi những thông tin thật sự cần thiết.
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. |
| option | óp-sần | một lựa chọn Là một dòng lựa chọn nằm bên trong ô select. |
| 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. |
| button | bát-tần | nút bấm Là cái nút để bấm cho máy làm một việc gì đó, như nút 'Gửi' hay 'Đăng nhập'. |
| fieldset | phiu-sét | khung gom nhóm Là cái khung có viền bao quanh, dùng để gom nhiều ô nhập cùng nhóm lại với nhau. |
| legend | le-giừn | tiêu đề khung Là dòng tiêu đề nằm trên khung fieldset, cho biết khung đó nói về điều gì. |
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ó đủ 25 câu, chấm điểm tự động và giải thích từng câu sai.
<table>...</table><div>...</div><form>...</form><label>...</label>
<form> là ranh giới của một biểu mẫu: chỉ những ô nhập nằm bên trong nó mới được gom dữ liệu và gửi đi khi bấm nút gửi. <table> dùng để trình bày dữ liệu theo hàng cột, <div> chỉ là khối gom nhóm để dàn bố cục - cả hai đều không có khả năng gửi dữ liệu. <label> chỉ tạo nhãn mô tả cho một ô nhập chứ không bao cả biểu mẫu.<input> quyết định ô nhập đó là ô gõ chữ, ô mật khẩu, ô chọn ngày hay ô tích chọn?typenamevalueid
<input> nhưng nó biến hoá thành nhiều kiểu ô nhập khác nhau tuỳ giá trị của type (text, password, date, checkbox...). name đặt tên cho dữ liệu gửi đi, value đặt giá trị sẵn có, còn id chỉ là định danh riêng để <label> hoặc CSS trỏ tới - không thuộc tính nào trong ba cái đó làm đổi kiểu ô nhập.<input type="radio"> cho ba mức đánh giá, nhưng khi thử thì người dùng lại tích được cả ba nút cùng lúc. Nguyên nhân hợp lí nhất là gì?- Thiếu thuộc tính
placeholderở cả ba nút nên trình duyệt không nhóm chúng lại được - Ba nút đó chưa được đặt chung trong một cặp thẻ
<label>nên chúng không loại trừ nhau - Ba nút đó đang thiếu thuộc tính
requirednên trình duyệt cho phép chọn thoải mái - Ba nút đó có giá trị
namekhác nhau nên trình duyệt coi chúng là ba nhóm riêng biệt
name để biết các nút radio nào thuộc cùng một nhóm và loại trừ lẫn nhau; name khác nhau nghĩa là mỗi nút thành một nhóm riêng nên tích được hết. placeholder chỉ là chữ mờ gợi ý và không dùng cho radio; <label> chỉ tạo nhãn mô tả; còn required chỉ bắt buộc phải chọn chứ không hề quy định số mục được chọn.- a)
<input>là thẻ tự đóng, không cần viết thẻ đóng</input>ở phía sau.Đúng - b)Thuộc tính
placeholdervừa hiện chữ mờ gợi ý trong ô, vừa là tên dùng để nhận biết dữ liệu khi biểu mẫu được gửi đi.Sai - c)Cặp thẻ
<textarea>dùng để tạo ô nhập nhiều dòng, thích hợp cho những nội dung dài như lời nhắn hay góp ý.Đúng - d)Muốn tạo một danh sách thả xuống để chọn một mục, ta viết một thẻ
<input>vớitypemang giá trịdropdown.Sai
- (a) Đúng -
<input>không bao nội dung nào bên trong nên được viết dưới dạng thẻ tự đóng, giống<img>hay<br>. - (b) Sai -
placeholderchỉ là chữ mờ gợi ý cho người nhìn và không được gửi đi; tên nhận biết dữ liệu luôn lấy từ thuộc tínhname. - (c) Đúng -
<textarea>là cặp thẻ mở và đóng, tạo khung nhập nhiều dòng, có thể chỉnh kích thước bằngrowsvàcols. - (d) Sai - danh sách thả xuống được tạo bằng cặp thẻ
<select>chứa các thẻ<option>bên trong;typecủa<input>không hề có giá trịdropdown.
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 đủ, 25 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.