» » HTML: Form và các đối tượng trên Form

HTML: Form và các đối tượng trên Form

Người đăng: share-nhungdieuhay on Thứ Hai, 13 tháng 5, 2013


1. GIỚI THIỆU FORM
1.1. Sử dụng Form: 
- Thu thập thông tin tên, địa chỉ, số điện thoại, email, …để đăng ký cho người dùng vào một dịch vụ hoặc một sự kiện
- Tập hợp thông tin để mua hàng
- Thu thập thông tin phản hồi về một Website
- Cung cấp công cụ tìm kiếm trên Website
1.2. Cách tạo:
Cú pháp:
      <Form Method="Post/Get" Action=script.url>
            Nội dung của Form
      </Form>
Trong đó:
- Method: xác định phương thức đưa dữ liệu lên máy chủ, có 2 giá trị: Post và Get

  • Nếu giá trị là GET thì trình duyệt sẽ tạo một câu hỏi chứa trang URL, một dấu hỏi và các giá trị do biểu mẫu tạo ra. Trình duyệt sẽ đổi script của câu hỏi thành kiểu được xác định trong URL để xử lý. 
  • Nếu giá trị là POST thì dữ liệu trên biểu mẫu sẽ được gửi đến script như một khối dữ liệu

- Action: là địa chỉ của Script sẽ thực hiện khi form được submit
2. CÁC PHẦN TỬ CỦA FORM:
Các phần tử của Form thường sử dụng trên trang web:

  • Input boxes: nhập dữ liệu dạng text và number
  • Radio buttons: dùng để chọn một tùy chọn trong danh sách 
  • Selection lists: dùng cho một danh sách dài các lựa chọn, thường là trong Drop-down list box
  • Check boxes: chỉ định một item được chọn hay không
  • Text area: một text box có thể chứa nhiều dòng
  • Submit và Reset button: để gửi form đến CGI script vừa để reset form về trạng thái ban đầu

2.1. Input boxes
Là một hộp dòng đơn dùng để nhập văn bản hoặc số. Để tạo các input boxes, sử dụng thẻ <INPUT>, thẻ <INPUT> còn được sử dụng cho nhiều loại trường khác trên Form.
Cú pháp:
<FORM>
<INPUT TYPE=Object NAME=Text>
</FORM>
Các giá trị của thuộc tính TYPE: Mặc định giá trị của TYPE là text, nếu trong thẻ <INPUT> không nhập thuộc tính TYPE thì loại input boxes là text

  • TEXT
  • PASSWORD
  • CHECKBOX
  • RADIO
  • HIDDEN
  • RESET
  • SUBMIT
  • TEXTAREA
  • BUTTON
  • IMAGE

Ví dụ 1: 
<html>
<head><title>Form</title></head>
<body>
<form>
<table>
<tr>
<td width=100>FirstName: </td>
<td><input name =Firstname></td>
</tr>
<tr>
<td>LastName: </td>
<td><input name =Lastname></td>
</tr>
<tr>
<td>Address: </td>
<td><input name =Address></td>
</tr>
</table>
</form>
</body>
</html>
2.1.1. Text box: Hộp văn bản, do người sử dụng nhập vào
Cú pháp:
<Input type=”Text” Value=”Value” Name=”name” Size=n Maxlength=m>

  • Name : tên dữ liệu đầu vào server
  • Value: Dữ liệu ban đầu có sẳn trong text box 
  • Size: chiều rộng của text box tính bằng số ký tự (mặc định là 20)
  • Maxlength: số ký tự tối đa có thể nhập vào text box

2.1.2. Tạo hộp Password: Những ký tự nhập vào hiển thị dưới dạng dấu chấm , thông tin sẽ không bị mã hoá khi gửi lên server
Cú pháp:
<Input type=”Password” Name=”name” size=n maxlength=n>

  • Size: chiều rộng của hộp Password, tính bằng ký tự
  • Maxlength: Số ký tự tối đa có thể nhập vào hộp Password

Ví dụ:
<html>
<head><title>Form</title></head>
<body>
<form><table>
<tr>
<td width=100>UserName </td>
<td><input name =UserName></td>
</tr>
<tr>
<td>Password: </td>
<td><input Type='password' name =Password></td>
</tr>
</table></form>
</body>
</html>
2.1.3. Checkbox: Người sử dụng có thể đánh dấu nhiều lựa chọn trong cùng 1 bộ
Cú pháp:
<Input type=”Checkbox” Name=”Name” Value=”Value” Checked> Nhãn

  • Name: tên của checkbox
  • Value: xác định mỗi giá trị cho mỗi hộp checkbox được gửi cho server khi người xem đánh dấu vào checkbox
  • Checked: thuộc tính để hộp check box được chọn mặc định

Ví dụ:
<html>
<head><title>Form</title></head>
<body>
<form><table>
<tr>
<td width=50 valign=top>Hobby: </td>
<td>
<Input Type='Checkbox' Name='st' Value='nhac' Checked> Music<br>
<Input Type='Checkbox' Name='st' Value='film'> Film<br>
<Input Type='Checkbox' Name='st' Value='thethao' > Sport
</td>
</tr>
</table></form>
</body>
</html>
2.1.4. Radio button: Cho phép người xem chỉ chọn một tuỳ chọn tại mỗi thời điểm
Cú pháp:
 <input type="radio" name="name" value="Value" checked>Nhãn

  • Name: tên của radio, kết nối các radio button với nhau
  • Value: Những dữ liệu sẽ gữi đến server khi radio button được chọn
  • Checked: thuộc tính để radio button được chọn mặc định

Ví dụ:
<html>
<head><title>Form</title></head>
<body>
<form><table>
<tr>
<td valign=top>User for</td>
<td>
<input type='radio' name=use value=home>Home<br>
<input type='radio' name=use value=bus>Business<br>
<input type='radio' name=use value=gov>Government<br>
<input type='radio' name=use value=ed>Educational Institution<br>
<input type='radio' name=use value=other>Other<br>
</td>
</tr>
</table></form>
</body>
</html>
2.1.5. Submit Button: Tất cả thông tin của người xem nhập vào sẽ được gửi đến server khi người xem click nút Submit
Cú pháp:
<Input type=”Submit” Value=”Submit Message” Name=”Name”>

  • Submit Message: Là chữ xuất hiện trên Button
  • Name: tên của button

2.1.6. Button: Nút dùng để thực hiện các lệnh do người sử dụng đưa ra
Cú pháp:
<input type="button" name="Button" value="Button">
2.1.7. Hidden: là các field mà người xem không nhìn thấy trên trình duyệt, nhưng vẫn là một phần tử trên form. Hidden field dùng để lưu trữ thông tin trong các form trước, các thông tin này cần đi kèm với các dữ liệu trong form hiện hành mà không muốn người xem nhập lại
Cú pháp:
<Input type=’hidden’ Name=’Name’ Value=’Value’>

  • Name: tên mô tả ngắn gọn thông tin cần lưu trữ
  • Value: Thông tin cần lưu trữ

2.2. Selection List:
2.2.1. Drop down menu:
Cú pháp:
<Select Name=”Name” Size=n Multiple>
<Option  Value=”Value” selected> Option 1
<Option  Value=”Value” > Option 2
…
</Select>

  • Nhãn: giới thiệu Menu
  • Name: tên dữ liệu đầu vào server
  • Size: là chiều cao của menu tính bằng hàng chữ
  • Multiple: là thuộc tính cho phép chọn nhiều đề mục (listbox)
  • Selected: đề mục được chọn mặc định
  • Value: xác định dữ liệu gởi cho server nếu đề mục được chọn

Ví dụ:
<html>
<head><title>Dropdown menu</title></head>
<body>
<form>
<select Name=Product>
<option value=1>ScanMaster
<option value=3>ScanMaster II
<option value=4>LaserPrint 1000
<option value=5> LaserPrint 5000
<option value=6>Print/scan 150
<option value=2> Print/scan 250
</Select>
</form>
</body>
</html>
2.2.2. Nếu thêm thuộc tính Multiple thì ta được dạng listbox
<html>
<head><title>Dropdown menu</title></head>
<body>
<form>
<select Name=Product size=5 Multiple>
<option value=1>ScanMaster
<option value=3>ScanMaster II
<option value=4>LaserPrint 1000
<option value=5> LaserPrint 5000
<option value=6>Print/scan 150
<option value=2> Print/scan 250
</Select>
</form>
</body></html>
2.2.3. Phần tử OPTGROUP: được sử dụng để nhóm các chọn lựa thành các nhóm riêng.
Ví dụ:
<HTML>
<HEAD><Title>Using the Option Group</Title></head>
<BODY>
<FORM action=‘http://somesite.com/ processform’ method= ‘post’>
<SELECT name= ‘course’>
<OPTGROUP>
<OPTION value= “Internetintro”>Introduction to the Internet
<OPTION value= “Introhtml”>Introduction to HTML
<OPTION value= “Introweb”>Introduction to the web page designing
</OPTGROUP>
<OPTGROUP>
<OPTION value= “vbintro”>Visual Basic – An Introduction 
<OPTION value= “vbdev”>Visual Basic – Application Development
</OPTGROUP>
</SELECT>
</FORM></BODY></HTML>
2.2.4. TextArea: Hộp văn bản cho phép nhập nhiều dòng
Cú pháp:
 <TextArea Name=”name” Rows=n Cols=m Wrap>Default text
</TextArea>

  • Rows: số dòng có thể nhập vào TextArea (mặc định là 4)
  • Cols: độ rộng của textarea (tính bằng số ký tự, mặc định là 40)
  • Wrap: các dòng chữ tự động dàn ra trong lề của vùng text area, Value: virtual,physical

Ví dụ:
<html>
<head><title>Textarea</title></head>
<body>
<table>
<tr>
<td valign=top> Comments ?</td>
<td><textarea rows=4 cols=50 name=comments wrap=virtual></textarea>
</td>
</tr>
</table>
</body>
</html>
2.2.5. Nhãn: Dùng để tạo nhãn liên kết với thành phần đi kèm
Cú pháp:
<label For=”idname”> Nội dung label</label>
Idname: là giá trị của thụôc tính ID trong thành phần Form tương ứng
Ví dụ:
<HTML>
<HEAD><TITLE>Using Labels</TITLE></HEAD>
<BODY>
<FORM action='http://somesite.com' method= 'post'>
<table>
<tr>
<td><LABEL for= 'firstname'>Firsname: </LABEL></td>
<td><INPUT type='text' id='firstname'></td>
</tr>
<tr>
<td><LABEL for= 'lastname'> Last name: </LABEL></td>
<td><INPUT type= 'text' id= 'lastname'><BR></td>
</tr>
</table>
</FORM>
<BODY>
</HTML>
2.2.6. Fieldset: Nhóm các đối tượng giống nhau  vào một phần logic
Cú pháp:
<Fieldset>
<Legend Align=”left, right”>Chú thích
</Legend>
Các thành phần trong nhóm
</Fieldset>

  • Thẻ <legend>: tạo chú thích cho nhóm
  • Align=left, right: chỉ vị trí của chú thích

Ví dụ:
<HTML>
<HEAD><TITLE>Job application</TITLE></HEAD>
<BODY >
<H1><CENTER><FONT SIZE = 4 COLOR= Forestgreen>Application Form </CENTER></FONT></H1>
<HR><BR><FORM action= “http: // somesite.com / processform” method = “post”><P>
<FIELDSET>
<LEGEND>Position</LEGEND>
Application for the post of: <INPUT name= 'name' type= 'text' tabindex= '1'>
</FIELDSET>
<FIELDSET>
<LEGEND>Sex</LEGEND>
<INPUT name= 'sex'  type= 'radio' value= 'Male' tabindex '4' >Male
<INPUT name= 'sex'  type= 'radio' value= 'Female' tabindex '4'> Female
</FIELDSET>
<FIELDSET>
<LEGEND>Educational Qualifications</LEGEND>
<INPUT name= 'qualif'  type='radio' value= 'grad' tabindex= '5'> Graduate
<INPUT name= 'qualif' type='radio' value='postgrad' tabindex='5'> Postgraduate
</FIELDSET>
<FIELDSET>
<LEGEND>Language known</LEGEND>
<INPUT name= 'lang'  type='checkbox' value= 'english' tabindex= '6'> English
<INPUT name= 'lang'  type='checkbox' value= 'french' tabindex= '7'> French
<INPUT name= 'lang'  type='checkbox' value= 'german' tabindex= '8'> German
</FIELDSET>
<FIELDSET>
<LEGEND> Personal Information</LEGEND>
Name: <INPUT  name = 'name' type= 'text' tabindex= '2'><BR>
<TEXTAREA name = 'address' rows= '3' cols = '30' tabindex = “3”>
Enter address</TEXTAREA>
</FIELDSET>
</FORM>
</BODY></HTML>
vào lúc 01:46
Nhãn:

{ 0 nhận xét... read them below or add one }


Đăng nhận xét