Tải bản đầy đủ (.pdf) (27 trang)
  1. Trang chủ
    2. >>
  2. Công Nghệ Thông Tin
    3. >>
  3. Quản trị Web

bài giảng thiết kế web - chương6 - form

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (7.16 MB, 27 trang )

FORM
CHNG VI
I. GII THIU FORM
1. Form đc s dng khi cn:
– 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, 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
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
II. CÁC PHN T CA FORM
Các phn t ca form thng s dng trên web gm:
– 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
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 tag <INPUT>, tag
<INPUT> còn đc s dng cho nhiu loi field
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 tag
<INPUT> không nhp thuc tính TYPE thì loi
input boxes là text
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
 Ví d:
<html>
<head><title>Form</title></head>

<body>
<form method =post action=“CGI”>
<table>
<tr>
<td width=100>UserName </td>
<td><
input type=text name =UserName ></td>
</tr>
<table>
</form>
</body>
</html>
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

<html>
<head><title>Form</title></head>
<body>
<form><table>
<tr>
<td>Password: </td>
<td><input Type='password' name =Password></td>
</tr>

</table></form>
</body>
</html>
3. Checkbox: Hp chn, ngi xem có th đánh du
nhiu checkbox trong cùng 1b
 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>
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>
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
6. Reset Button: Thit lp giá tr ban đu ca tt c các
điu khin trên form
 Cú pháp:
<Input Type=”reset” Value=”Reset Message”
Name=”Name”>

 Có th to nút Reset và Submit bng hình nh vi cú
pháp:
<Button Type=”reset” Name=”reset” Value=”reset”>
Nhưn ch l trái
<Image src=”Image.gif >
Nhưn ch l phi
</Button>
7. Button:
Nút dùng đ thc hin các lnh do ngi
sn dng đa ra
 Cú pháp:
<input type="button" name="Button" value="Button">
8. 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

SELECTION LIST
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=7> Print/scan 250
</Select>
</form>
</body>
</html>
2. Lixbox: Nu thêm thuc tính Multiple thì ta đc
dng listbox
<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=7> Print/scan 250
</Select>
</form>
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 trong dropdown menu
hoc listbox.
 Cú pháp:
<SELECT name= „name‟>
<OPTGROUP>
<OPTION value= “value1”>option1
<OPTION value= “value2”> option1
<OPTION value= “value3”> option1
….
</OPTGROUP>
…

</SELECT>
TEXTAREA
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:
<form>
<table>
<tr>
<td valign=top> Comments ?</td>
<td><textarea rows=4 cols=50 name=comments
wrap=virtual></textarea>
</td>
</tr>
</table>
</form>

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:

<LABEL for= 'firstname'>Firsname: </LABEL>
<INPUT type='text' id='firstname'>
<LABEL for= 'lastname'> Last name: </LABEL>
<INPUT type= 'text' id= 'lastname'>
Label
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>
-Tag<legend>: to chú thích cho nhóm
-Align=left, right: ch v trí ca chú thích

 Ví d:
<FORM >
<FIELDSET>
<LEGEND>Position</LEGEND>
Application for the post of: <INPUT name= 'name' type=
'text' tabindex= '1'>
</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></FORM>

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay
×