Th Form trong HTMLTh form trong HTMLTh form l mt trong nhng th
quan trng nht trong HTML, gi vai tr tng tc gia ngi dng v trang web.
Cc thao tc trao i ni dung nh ng nhp, ng k, bnh lun u thng qua form
v cc thnh phn khc lin quan.Code mu
H tn:
Qu qun:
Kt qu:Top of FormH tn:Qu qun:
Bottom of FormTrnh duyt h trTh form c tt c cc trnh duyt thng dng
h tr, trong c Chrome, FireFox, Opera, Safari v IE.Cc thnh phn trong
form Th dng nhiu nht trong form l th input, c rt nhiu input type
khc nhau, bn c th tham kho thm bi9 th input hay dngv bidng cc input
mi to form trong HTML5 Th textareachuyn dng nhp d liu vn bn di Th
select,radio button v checkbox to cc chn la Th fieldsetdng nhm cc
trng lin quan n nhau trong form Th label t tn cho cc trngCc thuc
tnh2 thuc tnh quan trng hng u trong form l action v methodThuc tnh
action
H tn:
Qu qun:
Thuc tnh action dng xc nh a ch trang web m nhng d liu c nhp vo c
gi n v x l, ty vo ngn ng lp trnh web m bn c th thy ui file l php
hoc asp - on code form trn c ngha l thng tin v h tn v qu qun c gi
ti file xuly.phpThuc tnh method
H tn:
Qu qun:
Thuc tnh method dng xc nh cch thc d liu c y ln. C 2 gi tr cho
method: get: d liu s c a ln v nhn thy c qua URL (v bn s thy cp
tn=gi tr c gn vo a ch web), v URL c chiu di ti a khong 3000 k t nn
phng thc ny khng dnh gi d liu ln. Ngoi ra v d liu u vo hin trn URL
nn phng thc ny cngkhngthch hp vi d liu nhy cm - th d nh password.
Tt nhin pha ngc li n hp vi d liu khng nhy cm, chng hn nh cc truy vn
tm kim. post: khng gii hn dung lng d liu, thch hp vi d liu nhy cm,
password chc chn phi dng phng thc post.
X l form Vn u tin ca form l chun ha d liu, bn c thdng HTML5hoc/v
cch truyn thng ldng JavaScript chun ha. Vn th hai l x l form bng
ngn ng lp trnh web. Trc y ti c vit bix l form ngay ti trang trong
PHPc th hu ch cho bn.
Th textarea trong HTMLTh textareachuyn dng trong Form, dng nhp
vn bn.Th inputkiu text cng nhp vn bn, nhng thng l on ngn cn
textarea c dng nhp c on vn bn di.Code mu:
Kt qu:
Trnh duyt h trTh textarea c tt c cc trnh duyt ph thng h tr,
trong c Chrome, FireFox, Opera, Safari v IE.c im Khng gii hn s k t
nhp vo. Kch thc ca textarea c thay i thng qua thuc tnh rows v cols,
nhng cch tt hn tc ng n kch thc l thng qua thuc tnh width v height
trong CSS.Cc thuc tnh#1. autofocus: khi vo trang th con tr tp trung
ngay lp tc ti textareaCode:
Kt qu (nhn phm F5 ri ko xung y - bn s thy con tr chut nhp nhy
trong textarea):
#2. cols- quy nh chiu rng tnh theo s k t,rows- quy nh s
dngCode:
Kt qu:
#3. disabled: v hiu ha textareaCode:
Kt qu (bn khng th g ch vo texarea c na - v n b v hiu ha):
#4. form: quy nh form m textarea thuc v.Code:
Name:
G vo y...
Kt qu (bn c th thy textarea nm ngoi th form, nhng nh thuc tnh
form, trnh duyt vn bit rng n thuc v form c id l yform):Top of
FormName:Bottom of Form
#5. maxlength: s k t ti a c php nhpCode:
Kt qu (bn khng th nhp hn 40 k t):
#6. name: tn ca textarea - n s c dng nh danh cho trng v l thng
tin c gi i x l km vn bn c nhp.Code:
li bnh lun ca bn.
Kt qu:Top of Form
Bottom of Form#7. placeholder: thng tin hng dn, thng c mu xm v
bin mt khi ngi dng bt u nhp d liu
Code:
#8. readonly: quy nh ch c vn bn trn textarea m khng cho nhp d
liuCode:
Bn ch c c on vn bn ny m khng sa hay thay i g.
Kt qu:
#9. required: yu cu phi nhp vn bn mi c submitCode:
Kt qu (bn trng textarea ri nhn Submit xem iu g xy ra):Top of
Form
Bottom of Form#10. WrapTh fieldset trong HTMLTh fieldset l th
chuyn dng cho Form, n c tc dng nhm cc thnh phn lin quan n nhau
trong Form.Code mu
Thng tin c nhnH v tn:
Qu qun
Kt qu:Top of FormThng tin c nhnH v tn:Qu qunBottom of Formc im
Th fieldset c h tr bi tt c cc trnh duyt thng dng, trong c Chrome,
FireFox, Opera, Safari v IE. Th fieldset to ng vin mu xm xung quanh
cc thnh phn m n nhm li. Th legend lun i km vi fieldset, dng to tiu
cho n. Trong th d trn, chnh l on Thng tin c nhn nm trong legend.Cc
thuc tnh mi name: t tn cho fieldset disabled: v hiu ha fieldset
form: gip bn khng cn lng fieldset vo trong th form nhng vn ch nh c
n thuc v form no.
9 th input thng dng trong HTMLCc th input type chuyn dng trong
cc form, dng nhp liu, kiu nh: ng k, ng nhp, lin h, gi file...Hm nay
chng ta s xem xt cc th input ph bin nht.
Cc input u ging nhau v cu trc, ch khc nhau v type. Chnh type ny
quyt nh kiu ca input. C n hn 20 type khc nhau.Mt s type input ch c
h tr trong HTML5. Cc type gii thiu trong ngy hm nay c tt c cc trnh
duyt thng dng h tr.Nhp textV d:H tn:Code mu:H tn: Gi tr ca thuc tnh
name s c dng ly gi tr input, c PHP v JavaScript u cn c vo name bit
gi tr nm trong input.Nhp passwordV d:Mt khu:Code mu:
V l nhp password nn khi bn g vo trng ny n s hin ra cc du hoa th
*, ngi khc khng nhn thy mt khu.
File nh kmV d:Chn nh ca bn:Code mu:
Button resetTc dng ca nt nhn reset l xa cc d liu m bn nhp khng
ng, gi d nhp tn v qu qun vo 2 trng di y, ri nhn reset xem iu g xy
ra:Top of FormH tn:Qu qun:
Bottom of FormCode mu:
H tn:
Qu qun:
Button submitTc dng ca nt nhn submit l gi d liu, khi bn nhp y cc
trng, v nhn submit th d liu t cc trng bn nhp s c gi n u x l tip. C
th n s cValidate bng JavaScript chun ha, sau gi ln Server ghi thng
tin vo c s d liu bng PHP(hoc ngn ng lp trnh web khc).V d:Top of
FormTn ng nhp:Mt khu:
Bottom of Form
Code mu:
Tn ng nhp:
Mt khu:
n inputTop of FormH tn:
Bottom of FormCode mu:
H tn:
Bn c th thy input c name l quocgia b n khng hin trong form. Tuy
b n nhng nu chng ta Submit n gi tr "Vit Nam" vn c gi i.Radio
buttonDng chn ch 1 trong nhiu la chn, v d:
Top of FormNamNKhcBottom of Form
Code mu:
Nam
N
Khc
CheckboxDng chn nhiu la chn cng lc, c th 1 hoc nhiu, v d:Top of
FormBng Bi liin kinhCu lngV thutBottom of Form
Code mu:
Bng
Bi li
in kinh
Cu lng
V thut
Thng tin y hn v Checkbox v Radio buttonbn c th c tham kho
thm.EmailType cui cng ti cp l email, s d nh vy v type ny ch c h tr
trong HTML5 - tuy nhin ni l vy thi, ch chng ta cng khng phi lo g c,
v input email c support tt bi cc trnh duyt. Code mu:
Email:
Kt qu:Top of FormEmail:Bottom of FormN validate email cho chng
ta ri, nn bn khng cn vit JavaScript - tr khi bn mun chun ha d liu
nhp vo cao hn na.
Th radio button v checkbox trong HTMLThc ra chng u thuc v nhm th
input nhng c thuc tnh type l radio button v checkbox. Nhm th input
l khng th thiu khi mun lm Form nhp liu v chng thng xuynkt hp vi
Javascript validate. Bn cnh 5 type rt hay dng gm:text, password,
submit, resetvemailth 2 type chuyn dng to cc la chn l Radio button
v Checkbox bn cng cn nm r.
Radio buttonType ny c dng chn mt trong nhiu la chn, chng hn chn
gii tnh, chn quc gia ang sinh sng. Code mu:
Nam
N
Khc
Kt qu:Top of FormNamNKhcBottom of FormNu bn khng name c cng tn
th bn s chn c 2 ci cng lc, do vy cn lu name khi dng radio.
CheckboxRadio buttons dng chn ch mt ci trong nhiu la chn cn
checkbox th ngc li, n cho php bn khng chn la ci no hoc chn nhiu ci
(t mt cho n tt c), code mu:
Bng
Bi li
in kinh
Cu lng
V thut
Kt qu:Top of FormBng Bi liin kinhCu lngV thutBottom of FormThuc
tnh checkedy l thuc tnh c dng nh du trc mt la chn no , chng hn mt
Form nhp liu yu cu bn nhp Quc gia ang sinh sng, nhng n cng xc nh c
a ch IP ca bn xut pht t Vit Nam nn tick sn vo y t trc cho bn. iu ny
gip bn gim thiu cc thao tc phi nhp. V d:
Top of FormVit NamTrung QucNht BnHn QucBottom of Form
Code mu:
Vit Nam
Trung Quc
Nht Bn
Hn Quc
Cch dng th label trong HTMLTh label dng nh ngha nhn chocc th
input trong HTML. Tc dng ca label l lm cho thao tc nhp liu tr nn d
dng hn.Code mu:
H tn:
Kt qu:
H tn:Gi bn c th nhn vo ch H tn vo nhp liu, hay ni cch khc, th
label lm tng din tch click chut bt u thao tc nhp. Nu khng c th
label, khi click vo ch H tn s khng c iu g xy ra, ging nh v d di y:H
tn:
C php ca th labelTh label yu cu thuc tnh for phi c in gi tr, v
gi tr trong thuc tnh id ca input phi ging vi gi tr trong thuc tnh
for ca label. Lm nh th label bit c n c dng cho input no.
MoNu bn cho rng cch dng for v id lng nhng, th bn c th khng cn
dng n m vn cho kt qu tng t, nhng khi y bn phi cho th input nm trong
label, code mu:
H tn:
Kt qu:H tn:
Cc v d khcLabel cho th radio buttonTop of FormNamN
Bottom of Form
Code mu:
Nam
