Giáo trình Ngôn ngữ HTML - Chương 3: Phần Form - Phạm Đào Minh Vũ

Nội dung text: Giáo trình Ngôn ngữ HTML - Chương 3: Phần Form - Phạm Đào Minh Vũ

1. Ngôn ngữ HTML Phần FORM Giảng viên : Ths. PHẠM ĐÀO MINH VŨ Khoa CNTT-Trường CĐ CNTT TPHCM Email : phamdaominhvu@yahoo.com
2. HTML Form  HTML Form gồm các thành phần dùng để thu thập các thông tin từ người dùng.  Các thành phần này có thể là – text field – text area – radio button – check box – button
3. Thẻ  Một form được đánh dấu bởi thẻ  Các thành phần đều nằm trong thẻ
4. Input tag  Thẻ được sử dụng nhiều nhất để tạo các thành phần là  Thuộc tính type của thẻ quyết định kiểu của thành phần.  Cú pháp : " name=“ " value = “ ”/>
5. Textfield  Nếu gán type = “text”. Thẻ sẽ hiển thị 1 text field  Text field được dùng nếu ta muốn thu thập 1 dòng text từ người duyệt web như username, địa chỉ, điện thoại  Độ dài mặc định của textfield trên các trình duyệt là 20 kí tự.  Để thay đổi độ dài của textfield, ta thay đổi giá trị thuộc tính size (Ví dụ size=“30”)
6. Ví dụ Textfield First name: Last name:
7. Radio Button  Nếu đặt type=“radio”, thẻ input sẽ hiển thị 1 radio button.  Radio button được dùng khi ta chỉ muốn người dùng chọn 1 trong các tùy chọn.  Nếu các radio button đặt cùng name, nó sẽ được nhóm lại (Nghĩa là người dùng chỉ được chọn 1 trong số này)
8. Ví dụ radio button Male Female
9. Checkbox  Nếu đặt type=“checkbox”, thẻ input sẽ hiển thị 1 checkbox.  Checkbox được dùng khi ta muốn người dùng có thể chọn 0 hay nhiều tùy chọn.  Checkbox trái ngược với radio button
10. Ví dụ checkbox I have a bike: I have a car: I have an airplane:
11. Button  Là một dạng nút nhấn, dùng để xử lý 1 sự kiện nào đó trên form, ví dụ như : validate (kiểm tra dữ liệu), xử lý tính toán, thông báo lỗi,  Việc xử lý sự kiện của Button thông thường được viết bằng ngôn ngữ lập trình javascript.
12. Ví dụ Button Nhap so A: Nhap so B: Ket qua la :
13. Submit button  Là một button đặc biệt mà khi người dùng nhấn vào nó, các dữ liệu mà người dùng nhập vào form sẽ được gởi về server xử lý.  Khi đó thuộc tính action của thẻ sẽ qui định trang ở server sẽ xử lý dữ liệu.  Dữ liệu gởi tới server bao gồm các cặp { , }  Để tạo 1 submit button, gán type=“submit”
14. Ví dụ submit Username:
15. Reset button  Là 1 button đặc biệt mà khi người dùng nhấn vào, tất cả giá trị người dùng nhập vào sẽ bị reset trở về mặc định  Để tạo 1 reset button, gán type=“reset”
16. Ví dụ Reset button Nhap so A: Nhap so B: Ket qua la :
17. Dropdown box  Dropdown box là 1 danh sách xổ xuống, người dùng có thể chọn 1 giá trị trong danh sách  Dropdown box được xác định bởi thẻ  Các tùy chọn trong danh sách được xác định bởi thẻ
18. Ví dụ về dropdown box Volvo Saab Fiat Audi
19. TextArea  TextArea được dùng khi ta muốn thu thập 1 đoạn văn từ người dùng  Thẻ được dùng để tạo 1 TextArea  Thuôc tính rols và cols qui định số dòng và số cột cho TextArea
20. Ví dụ về textarea The cat was playing in the garden.
21. Fieldset và Legend  dùng để gom nhóm các thành phần có liên quan với nhau (giống GroupBox trong VS 2005)  dùng để đặt tên cho nhóm trên  Nếu dùng thẻ xung quanh các thành phần sẽ có đường viền và phía trên đường viền là tên nhóm từ thẻ
22. Ví dụ và Personalia: Name: Email: Date of birth:
23. Ví dụ 1 form gởi email This form sends an e-mail to W3Schools. Name: Mail: Comment: