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