Bài giảng Lập trình mạng: Bài 2 - Đoàn Thiện Ngân

FRAME –HTML FORM

GV: ĐOÀN THIỆN NGÂN

Nộidung

• Frame • Form

(cid:252)Attributes (cid:252)Elements

LTM1 –FRAME & HTML FORM –2/22

• Chương3: Frame vàHTML Form

Frame

Frame: công cụ chia cửa sổ trìnhduy ệtthànhcácvùngriêng biệtvà độc lập. Mỗivùnghi ểnth ị mộttàili ệuriêngvàcóth ể có thanhcu ộn đikèm. • Trang webth ường đượcphân thànhba vùngframe:

1.Header: frame th ể hiệntrangtiêu đề gồmtêncôngty, logo,

khẩung ữ côngty,…

2.Liên k ết: frame bêntráith ể hiệntrang g ồmcácliên k ết

chínhtrongwebsite.

3. Nộidung: th ể hiện nộidung c ủatrang đang đượcliên k ết. • Lợi điểm củaframe: cácph ầntách b ạchrõràng, khi c ầnhi ệu chỉnhtrang, ta ch ỉ cần tậptrungvàoph ần nộidung c ầnch ỉnh sửa, màkhông làm ảnh hưởng đếncácvùngkhác.

• Hạnch ế:frame t ạocho ng ườidùng c ảmgiáckhông gian trang

chật hẹp.

LTM1 –FRAME & HTML FORM –3/22

Tạoframe

• Khaibáo c ấutrúcframe:

………

LTM1 –FRAME & HTML FORM –4/22

• Với mỗiframeset, ta ch ỉ cóth ể phânframeset theo m ột tiêuchí, ho ặcphântheo c ột, hoặcphântheodòng. • Để phântrangweb thànhnhi ềuframe, theo c ả dòngvà cột, sử dụng cấutrúcframeset l ồngnhau. VD-3.3

Phần tử noframes

LTM1 –FRAME & HTML FORM –5/22

• Thẻ được sử dụngnh ằm đề phòng trường hợptrìnhduy ệtkhông h ỗ trợ frame. • Phần nộidung n ằmgi ữath ẻ đóngvàth ẻ mở của <noframes> sẽđượ chi ểnth ị, thông báocho ng ười dùngbi ếtdotrìnhduy ệt của họ không hỗ trợ frame nêntrangweb khônghi ểnth ị đúng. • Thẻ <noframe> được đặtbên trong th ẻ <frameset>. <noframes>nội-dung-thay-thế

Frame trong dòng –Ph ần tử iframe

LTM1 –FRAME & HTML FORM –6/22

• Thẻ

HTML Form

• Formtìmki ếm: cho phépng ườidùngnh ậptiêu chu ẩn

• HTML Form (biểu mẫu) tập hợpcácph ần tử và thuộctính, để thuth ập dữ liệu từ ngườidùng. • Một số dạngformth ường gặptrên Internet:

tìmki ếm.

• Formthu th ập dữ liệu: cho phépng ườidùngnh ậpcác thông tin cánhânkhi đăngkíthànhviên c ủawebsite. • Form đăng nhập: yêu cầung ườidùngnh ậpusername

vàpassword.

• Form phản hồithôngtin, đónggópý ki ếncho

website.ập dữ liệu từ ngườidùng.

LTM1 –FRAME & HTML FORM –7/22

Tạoform

• Thẻ form

… …

• action: urlth ể hiện địach ỉ củaformhandler (s ẽ rõ hơntrong

LTM2).

• method(C ầnweb server -httpd để thấyho ạt độngchínhxác

củathu ộctínhmethod)

(cid:216)method=get: dữ liệuchuy ển đi được gắnvàocu ốiurl c ủa

action

(cid:216)method=post: dữ liệuchuy ển đi củaform được đưa vào

HTTP header

LTM1 –FRAME & HTML FORM –8/22

Các điềukhi ểntrênform

LTM1 –FRAME & HTML FORM –9/22

• Điềukhi ểnnh ậpli ệu: Textfield, Password field, Textarea • Điềukhi ểnch ọn lựa:Radio button, Checkbox • Điềukhi ểnnútnh ấn:Submit Button, Reset Button, Image Button • Danhsáchch ọn:DropdownList

Textfield

LTM1 –FRAME & HTML FORM –10/22

• Textfield:nh ập văn bản đơn dòng, thẻ với thuộctínhtype="text":

Password field

LTM1 –FRAME & HTML FORM –11/22

• Passwordfield: t ương tự như Textfield,nh ưng nội dung nhậpvào đượcche b ằngcácbullet. • Passwordfield:th ẻ , thuộctính type="password":

Textarea

• Textarea: nhập văn bảnnhi ềudòng, th ẻ </p> <p>LTM1 –FRAME & HTML FORM –12/22</p> <p><textarea cols=m rows=n name="tên" wrap="soft/hard/off"> văn bản

Checkbox

• Checkbox:th ẻ vớitype="checkbox":

LTM1 –FRAME & HTML FORM –13/22

Radio button

• Radio button: thẻ vớitype="radio":

• Để chọn được mộtgiátr ị duynh ấttrong nhóm(radio button list), cácnútradio ph ảicótêngi ốngnhau.

LTM1 –FRAME & HTML FORM –14/22

Male
Female

Dropdown-list

• Thẻ tạoDropdownList(danh sáchcáctùy chọn). • Mỗich ọn lựatrongDropdownListlà m ộtph ần tử . • MộtDropdownListph ảicóítnh ất mộttùych ọnoption.

LTM1 –FRAME & HTML FORM –15/22

chọn lựa1 chọn lựa2 ………

Button

Button: Thẻ vớitype t ương ứng

• type=button: thường đượcdùng để kíchho ạtcáchàm

Javascript.

• type=submit: để submit form. • type=reset: reset form về cácgiátr ị khởi tạoban đầu. • type=image: dạng ảnh, ta cầnch ỉđị nhthêmurl c ủafile

ảnhthôngqua thu ộctínhsrc

• Chúý: Th ẻ

LTM1 –FRAME & HTML FORM –16/22

Label

• Phần tử : gắnnhãncho ph ần tử điềukhi ển. • Khiclickchu ộtvàonhãnthìph ần tử điềukhi ển tương ứng sẽ nhậnfocus. • Để tạonhãncho m ộtph ần tử điềukhi ển, trước tiên, phảixác địnhgiátr ị chothu ộctínhid c ủa điều khiển. Sau đó, khaibáonhãnchoph ần tử này.

LTM1 –FRAME & HTML FORM –17/22

nhãn

Fieldset

LTM1 –FRAME & HTML FORM –18/22

• Ta cóth ể gomnhómcácph ần tử điềukhi ển, đặttên chonhómvàbaoquanh chúng m ột đườngvi ền bằngth ẻ

:

tiêu đề củanhóm điềukhi ển

VD-3.17

Focus

• Khinh ập dữ liệuchoform, t ại mỗith ời điểm, chỉ có một phần tử điềukhi ển ở trạngtháiho ạt động, hay còn được gọilành ậntiêu điểm–focus. • Đểđặ ttiêu điểmcho m ộtph ần tử điềukhi ển, ta cóth ể:

v Click chuộtvàoph ần tử. v Di chuyểnphímtab trênbànphímcho đếnkhiph ần

tử điềukhi ểnmong mu ốnnh ận đượctiêu điểm.

v Nhấnphím t ắt tương ứng với điềukhi ển đểđặ tfocus

LTM1 –FRAME & HTML FORM –19/22

nhanh

Thuộctínhtabindex

ệu.

LTM1 –FRAME & HTML FORM –20/22

• Thuộctínhtabindex c ủaph ần tử xác địnhtrình t ự phần tử nhậnfocus thông qua bànphím. • Điều hướng bắt đầu vớiph ần tử cótr ị tabindex thấpnh ất. • Nếuta gáncùngtr ị tabindexcho h ơn mộtph ần tử, thìcácph ần tử đó sẽ nhậnfocus theoth ứ tự xuất hiện củachúngtrongtàili • VD-3.18

Phímtruy c ậpnhanh

• Thuộctínhaccesskeythi ết lậpphímtruy c ậpnhanhcho

phần tử điềukhi ển.

• Phímtruy c ậplà m ộtký t ựđơ n và đượcdùng k ết hợp

vớiphímAlt.

• Khi ngườidùngnh ấnphímtruy c ập, phần tử sẽ nhận

focusvà b ắt đầuho ạt động.

Username:

LTM1 –FRAME & HTML FORM –21/22

???

LTM1 –FRAME & HTML FORM –22/22

• Khácbi ệtgi ữa2 method: post vàget? • Cácthu ộctínhthông d ụng củaform. • Cácph ần tử điềukhi ểnthông d ụng củaform. • Khácbi ệtgi ữaCheckbox List vàRadio Button List? • Khácbi ệtgi ữacáclo ạibutton?