Bài giảng Ngôn ngữ HTML - Bài 4: Thẻ nhập dữ liệu

Nội dung text: Bài giảng Ngôn ngữ HTML - Bài 4: Thẻ nhập dữ liệu

1. Lê Quang Lợi
2. 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 HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
3. 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 HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
4. 4.1 Thẻ form First name: Last name: Thẻ nhập dữ liệu dạng text Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
5. 4.2 Phương thức trong thẻ Form » 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ự Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
6. 4.3 Thẻ thể hiện trường nhập dữ liệu » 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ẻ Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
7. 4.3 Thẻ thể hiện trường nhập dữ liệu » 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 Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
8. 4.3 Thẻ thể hiện trường nhập dữ liệu 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 Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
9. 4.3 Thẻ thể hiện trường nhập dữ liệu - 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 Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
10. 4.3 Thẻ thể hiện trường nhập dữ liệu » 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ụ Volvo Saab Opel Audi » Textarea: thể hiện dữ liệu nhập nhiều dòng Ví dụ: Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
11. 4.3 Thẻ thể hiện trường nhập dữ liệu » 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 Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
12. 4.3 Thẻ thể hiện trường nhập dữ liệu » 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: Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
13. 4.3 Thẻ thể hiện trường nhập dữ liệu Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY