Bài giảng HTML Form

 KHOAKHOA CNTTCNTT -- TUDTUD
HTMLHTML FORMFORM
 Trần Khải Hoàng
 Khoa CNTT – TỨD. 
 ĐH Tôn Đức Thắng
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 ...
Thẻ 
 • Một form được đánh dấu bởi thẻ 
 • Các thành phần đều nằm trong thẻ 
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 = “”/>
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”)
Ví dụ Textfield
First name:
Last name:
Radio
 • 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)
Ví dụ radio button
Male
Female
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
 Ví dụ checkbox
I have a bike:
I have a car:
I have an airplane:
<input type="checkbox" name="vehicle" 
value="Airplane" />
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ên thành 
 phần> , }
 • Để tạo 1 submit button, gán type=“submit”
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”
Ví dụ submit
<form name="input" action="html_form_submit.asp" 
method="get">
Username:
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ẻ 
Ví dụ về dropdown box
Volvo
Saab
Fiat
Audi
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
Ví dụ về textarea
The cat was playing in the garden. 
Button
 • Để tạo 1 button ta đặt type=“button”
fieldset và legend
 • dùng để gom nhóm các thành phần có liên 
 quan với nhau
 • 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ẻ 
Ví dụ và 
Personalia:
Name: 
Email: 
Date of birth: 
Ví dụ 1 form gởi email 
<form action="MAILTO:someone@w3schools.com" 
method="post" enctype="text/plain">
This form sends an e-mail to W3Schools.
Name:
Mail:
Comment:
<input type="text" name="comment" value="yourcomment" 
size="40" />