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

Home Business Government Educational Institution Other.

FORM

I GI I THI U 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 , 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

 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

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

 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

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

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

</tr>

</table></form>

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

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

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”

– 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”

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)

</Select>

</form>

</body>

</html>

2 Lixbox: N u thêm thu c tính Multiple thì ta đ c

<OPTION value= “value1”>option1

<OPTION value= “value2”> option1

<OPTION value= “value3”> option1

…

</OPTGROUP>

…

</SELECT>

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'>

-Tag< legend> : t o chú thích cho nhóm

-Align= left, right: ch v trí c a chú thích

i u khi n các ph n t trên form

 Dùng phím tab đ di chuy n gi a các đ it ng trong form,

m c đ nh theo th t c a mã HTML, mu n đ nh l i th t ta

dùng thu c tính TabIndex=n trong tag t o các thành ph n c a

form, trong đó n là th t c a tab, có giá tr t 0 đ n 32767

 Trong m t form ta th ng đ nh th t tab cho các thành ph n :

textbox, password, checkbox, radio button, textarea, menu và