Bài giảng Thiết kế Web: Chương 6 - Từ Thị Xuân Hiền

Bài giảng Thiết kế Web - Chương 6 giới thiệu về form trong trang Web. Trong một trang web, 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; hay thu thập thông tin phản hồi về một Website;... Trong chương này sẽ hướng dẫn cách tạo form. Mời các bạn cùng tham khảo để nắm bắt các nội dung chi tiết.

Trang 1

FORM

Trang 2

I GI I THI U FORM GI I THI U FORM Ớ Ớ Ệ Ệ

1 Form đ Form đượ ử ụ ượ ử ục s d ng khi c n: c s d ng khi c n:ầ ầ

– Thu th p thông tin tên, đ a ch , s đi n tho i, email, … 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 T p h p thông tin đ mua hàng ậ ậ ợ ợ ể ể

– Thu th p thông tin ph n h i v m t Website 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 Cung c p công c tìm ki m trên website ấ ấ ụ ụ ế ế

1 Cách t o: Cách t o:ạ ạ

Cú pháp :

Trang 3

 Trong đó:

Method: xác đ nh ph: xác đ nh phịị ươương th c đ a d li u lên máy 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 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 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 : là đ a ch c a script s th c hi n khi form ịị ỉ ủỉ ủ ẽ ựẽ ự ệệ

được submit

Trang 4

II CÁC PH N T C A FORM 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:ử ụ ồ

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: nh p d li u d ng text và numberậậ ữ ệữ ệ ạạ

– Radio buttons: dùng đ ch n m t tùy ch n trong : 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 : dùng cho m t danh sách dài các l a ộộ ựự

ch n, thọ ường là trong Dropdown list box

– Check boxes: ch đ nh m t item đ: ch đ nh m t item đỉ ịỉ ị ộộ ượược ch n hay khôngc ch n hay khôngọọ

– Text area: m t text box có th ch a nhi u dòng m t text box có th ch a nhi u dòngộộ ểể ứứ ềề

– Submit và Reset button: đ g i form đ n CGI script : đ g i form đ n CGI script ể ửể ử ếế

Trang 5

tag <INPUT> còn đượ ử ục s d ng cho nhi u lo i ề ạ

 Các giá tr c a thu c tính TYPECá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

Trang 6

1 Text box: H p văn b n, do ngH p văn b n, do ngộộ ảả ườ ử ụườ ử ụi s d ng nh p 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 serverName : tên d li u đ u vào serverữ ệữ ệ ầầ

– Value: D li u ban đ u có s n trong text box 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 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 Maxlength: s ký t t i đa có th nh p vào text ốố ự ốự ố ểể ậậ

box

Trang 8

2 T o h p PasswordT o h p Passwordạ ạ ộ ộ : Nh ng ký t nh p vào hi n 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 ấ ấ ẽ ị

– Size: chi u r ng c a h p Password, tính b ng ký t: 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 : S ký t t i đa có th nh p vào h p ốố ự ốự ố ểể ậậ ộộ

Password

Trang 10

3 Checkbox: H p ch n, ngH p ch n, ngộộ ọọ ườười xem có th đánh d u i xem có th đánh d u ểể ấấ

– Name: tên c a checkboxName: tên c a checkboxủủ

– Value: xác đ nh m i giá tr cho m i h p Value: xác đ nh m i giá tr cho m i h p ịị ỗỗ ịị ỗ ộỗ ộ

checkbox được g i cho server khi ngử ười

Trang 12

4 Radio button: Cho phép ng: Cho phép ngườười xem ch ch n m t tu i xem ch ch n m t tu ỉỉ ọọ ộộ ỳỳ

ch n t i m i th i đi mọ ạ ỗ ờ ể

Trang 14

5 Submit Button: T t c thông tin c a ngT t c thông tin c a ngấ ảấ ả ủủ ườười xem nh p 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: Là ch xu t hi n trên Buttonữữ ấấ ệệ

– Name: tên c a button: tên c a buttonủủ

6 Reset Button: Thi t l p giá tr ban đ u c a t t c các 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:

Trang 15

 Có th t o nút Reset và Submit b ng hình nh v i Có th t o nút Reset và Submit b ng hình nh v i ể ạ ể ạ ằ ằ ả ả ớ ớ

7 Button: Nút dùng đ th c hi n các l nh do Nút dùng đ th c hi n các l nh do ể ự ể ự ệ ệ ệ ệ

ng ườ ử i s n d ng đ a ra ụ ư

 Cú pháp:

Trang 16

8 Hidden: là các field mà nglà các field mà ngườười xem không nhìn th y 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:

– Name: tên mô t ng n g n thông tin c n l u tr: 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: Thông tin c n l u trầ ưầ ư ữữ

Trang 17

Nhãn:Gi i thi u Menu :Gi i thi u Menu ớ ớ ệ ệ

Name: tên d li u đ u vào server tên d li u đ u vào server ữ ệ ữ ệ ầ ầ

Size: là chi u cao c a menu tính b ng hàng ch : 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) : là thu c tính cho phép ch n nhi u đ m c (listbox) ộ ộ ọ ọ ề ề ề ụ ề ụ

Selected: đ m c đ : đ m c đ ề ụ ề ụ ượ ượ c ch n m c đ nh c ch n m c đ nh ọ ọ ặ ặ ị ị

Trang 19

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

Trang 20

3 Ph n t OPTGROUPPh n t OPTGROUPầ ử ầ ử : đ đượ ử ụượ ử ục s d ng đ nhóm các c s d ng đ nhóm các ểể

Trang 23

Nhãn: Dùng đ t o nhãn liên k t v i thành ph n đi kèmDùng đ t o nhãn liên k t v i thành ph n đi kèmể ạể ạ ế ớế ớ ầầ

Trang 24

FIELDSETNhóm các đ i tố ượng gi ng nhau vào m t ph n logicố ộ ầ

Nhóm các đ i tố ượng gi ng nhau vào m t ph n logicố ộ ầ

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

Align=left, right: ch v trí c a chú thích: ch v trí c a chú thíchỉ ịỉ ị ủủ

Trang 27

Đi u khi n các ph n t trên form ề ể ầ ử

1 Đ nh th t Tab Đ nh th t Tabị ị ứ ự ứ ự :

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

m c đ nh theo th t c a mã HTML, mu n đ nh l i th t ta ặ ị ứ ự ủ ố ị ạ ứ ự

m c đ nh theo th t c a mã HTML, mu n đ nh l i th t ta ặ ị ứ ự ủ ố ị ạ ứ ự dùng thu c tính ộ

dùng thu c tính ộ TabIndex=n trong tag t o các thành ph 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 ủ ứ ự ủ ị ừ ế

c a form, trong đó n là th t c a tab, có giá tr t 0 đ n ủ ứ ự ủ ị ừ ế 32767

 Trong m t form ta th Trong m t form ta th ộ ộ ườ ườ ng đ nh th t tab cho các thành ph n ng đ nh th t tab cho các thành ph n ị ị ứ ự ứ ự ầ ầ

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

2 T o phím t t T o phím t tạ ạ ắ ắ :

 Cách t o Cách t o ạ ạ :

Trong tag t o các ph n t c a form ta dùng thu c tính ạ ầ ử ủ ộ

Trong tag t o các ph n t c a form ta dùng thu c tính ạ ầ ử ủ ộ Accesskey=”Phím t t” ắ

Accesskey=”Phím t t” ắ

Định dạng
Số trang	27
Dung lượng	619,5 KB