Bài giảng HTML-DHTML-Javascript - Bài 04: Thẻ nhập dữ liệu - Lê Quang Lợi

Lê Quang Lợi 
Bài 04: Thẻ nhập dữ liệu 
Nội dung 
» Nhập dữ liệu 
» Thẻ Form 
» Phương thức Get/Post 
» Các thẻ nhập dữ liệu 
» Bài tập 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
4.1 Thẻ form 
» Thẻ form: Chứa/đóng gói dữ liệu cho các thẻ nhập dữ liệu 
» Cú pháp: 
 Thẻ 
» Chứa các thẻ nhập dữ liệu: input, select, textarea, radio. 
» Thuộc tính: 
• method: Post hoặc get chỉ định cách truyền dữ liệu 
• action: thể hiện trang cần thực thi dữ liệu gửi lên 
» Sự kiện onSubmit(); => Quá trình gửi dữ liệu 
» Hàm submit: Submit(); => thực hiện gửi dữ liệu (tự gọi) 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
4.1 Thẻ form 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
<form name=“frm” method=“post” 
action=“”> First name: 
Last name: 
Thẻ nhập dữ liệu 
dạng text 
4.2 Phương thức trong thẻ Form 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» Post: thể hiện dữ liệu được đóng gói theo mảng và bảo mật 
• Giửi các dữ liệu trong các thể nhập liệu theo mảng 
• Mảng dữ liệu: tên/giá trị 
• Kích thước dữ liệu tối đa 2Gigabyte 
» Get dữ liệu được đính kèm cùng URL (không bảo mật) 
• gửi dữ liệu theo dạng mảng 
• mảng dữ liệu dạng: tên=giatri&tên=giatri 
• kích thước tối đa: 256 ký tự 
4.3 Thẻ thể hiện trường nhập dữ liệu 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» Thẻ cho phép người dùng thao tác với giao diện 
» Cung cấp các dữ liệu gửi về phía server 
» Thẻ dạng input: nhập dữ liệu dạng cơ bản 
» Type: 
o Văn bản: text, password, hidden, file 
o Chọn phần tử:radio,checkbox 
o Lệnh: button,submit, reset 
» Tên cho thẻ: được gửi cùng với dữ liệu 
» Value: giá trị văng bản trong thẻ 
4.3 Thẻ thể hiện trường nhập dữ liệu 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» Cho phép nhập dữ liệu dạng văn bản theo dòng 
Thẻ Công dụng Ví dụ 
Text Nhập dữ liệu dạng text 
Hidden Thẻ ẩn chứa dữ liệu 
file Cho phép người dùng tải file 
password Nhập dữ liệu dạng mật khẩu 
4.3 Thẻ thể hiện trường nhập dữ liệu 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
 Thẻ cho phép lựa chọ giá trị 
Thẻ Công dụng Ví dụ 
Radio Dữ liệu đơn lựa chọn 
Checkbox Dữ liệu đa lựa chọn 
 male 
 Female 
 I have a bike 
 I heve a Car 
4.3 Thẻ thể hiện trường nhập dữ liệu 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
 - Thực thi hành động của form 
Thẻ Công dụng Ví dụ 
Button Nút nhấn thông thường 
Submit Nút nhấn gọi hàm submit 
Reset Nút khôi phục giá trị ban đầu 
4.3 Thẻ thể hiện trường nhập dữ liệu 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» Select và option: Thể hiện dạng lựa chọn theo menu xổ xuống 
• Select: thể hiện dạng menu 
• Option: thể hiện phần tử tương ứng với giá trị 
Ví dụ 
» Textarea: thể hiện dữ liệu nhập nhiều dòng 
Ví dụ: 
 Volvo 
 Saab 
 Opel 
 Audi 
4.3 Thẻ thể hiện trường nhập dữ liệu 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» Toàn bộ các thẻ nhập dữ liệu thì cần cài đặt các thuộc tính sau 
 Value: Chứa dữ liệu người dùng nhập/chọn 
 Name: chứa tên trường nhập dữ liệu cùng dữ liệu 
» Các thẻ nhập dữ liệu muốn gửi lên phía server cần phải đặt 
trong thẻ form 
» Các thẻ nằm bên ngoài thẻ form tương ứng thì không gửi dữ 
liệu 
4.3 Thẻ thể hiện trường nhập dữ liệu 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» Label: thể hiện nhãn của thẻ nhập dữ 
Ví dụ: name 
» Legend: thể hiện gom nhóm các trường dữ liệu với nhau 
 Personalia: 
 Name: 
 Email: 
 Date of birth: 
4.3 Thẻ thể hiện trường nhập dữ liệu 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript