Th Form trong HTML

Th form trong HTML

Th 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
<form action="#" method="get"> H tn: <input type="text" name="hoten"><br /> Qu qun: <input type="text" name="quequan"><br /> <input type="submit" value="Submit"> </form> Kt qu: H tn: Qu qun:
Submit

Trnh duyt h tr
Th 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 bi 9 th input hay dng v bi dng cc input mi to form trong HTML5 Th textarea chuyn dng nhp d liu vn bn di Th select, radio button v checkbox to cc chn la Th fieldset dng nhm cc trng lin quan n nhau trong form Th label t tn cho cc trng

Cc thuc tnh
2 thuc tnh quan trng hng u trong form l action v method
Thuc tnh action

<form action="xuly.php" method="get"> H tn: <input type="text" name="hoten"><br /> Qu qun: <input type="text" name="quequan"><br /> <input type="submit" value="Submit"> </form> 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.php
Thuc tnh method

<form action="xuly.php" method="post"> H tn: <input type="text" name="hoten"><br /> Qu qun: <input type="text" name="quequan"><br /> <input type="submit" value="Submit"> </form> 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 cng khng thch 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 th dng HTML5 hoc/v cch truyn thng l dng JavaScript chun ha. Vn th hai l x l form bng ngn ng lp trnh web. Trc y ti c vit bi x l form ngay ti trang trong PHP c th hu ch cho bn.

Th textarea trong HTML

Th textarea chuyn dng trong Form, dng nhp vn bn. Th input kiu text cng nhp vn bn, nhng thng l on ngn cn textarea c dng nhp c on vn bn di.

Code mu:
<textarea rows="5" cols="40" placeholder="G ni dung thng ip vo y"> </textarea> Kt qu:

Trnh duyt h tr
Th 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 textarea Code: <textarea rows="5" cols="40" autofocus> </textarea> 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 dng Code: <textarea rows="5" cols="40"> </textarea> Kt qu:

#3. disabled: v hiu ha textarea Code: <textarea rows="5" cols="40" disabled> </textarea> 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: <form action="#" id="yform"> Name: <input type="text" name="yname"> <input type="submit" value="Gi"> </form> <textarea name="comment" form="yform">G vo y...</textarea> 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): Name:
G? i

#5. maxlength: s k t ti a c php nhp Code: <textarea rows="5" cols="40" maxlength="40"> </textarea> 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: <form action="xuly.php"> <textarea name="comment" rows="5" cols="40"> li bnh lun ca bn.</textarea><br> <input type="submit" value="Gi"> </form> Kt qu:

G? i

#7. placeholder: thng tin hng dn, thng c mu xm v bin mt khi ngi dng bt u nhp d liu

Code: <textarea cols="40" placeholder="Vn bn mu xm ny chnh l placeholder" rows="5"> </textarea>

#8. readonly: quy nh ch c vn bn trn textarea m khng cho nhp d liu Code: <textarea rows="5" cols="40" readonly> Bn ch c c on vn bn ny m khng sa hay thay i g. </textarea> Kt qu:

#9. required: yu cu phi nhp vn bn mi c submit Code: <form action="#"> <textarea rows="5" cols="40" required> </textarea><br > <input type="submit" value="Submit"> </form> Kt qu (bn trng textarea ri nhn Submit xem iu g xy ra):

Submit

#10. Wrap

Th fieldset trong HTML

Th fieldset l th chuyn dng cho Form, n c tc dng nhm cc thnh phn lin quan n nhau trong Form.

Code mu
<form action="#"> <fieldset> <legend>Thng tin c nhn</legend> <label>H v tn: <input type="text" name="hoten"></label><br> <label>Qu qun<input type="text" name="quequan"></label> </fieldset> </form> Kt qu: Thng tin c nhn H v tn: Qu qun

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

Cc 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 text
V d: H tn: Code mu: H tn: <input name="hoten" type="text" /> 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 password
V d: Mt khu: Code mu: <input name="psw" type="password" /> 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 km
V d: Chn nh ca bn: Code mu: <input type="file" name="anh">

Button reset
Tc 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: H tn: Qu qun:
Reset

Code mu: <form action="#"> H tn: <input type="text" name="hoten"><br /> Qu qun: <input type="text" name="que"><br /> <input type="reset" value="Reset"> </form>

Button submit
Tc 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:

Tn ng nhp: Mt khu:
Submit

Code mu: <form action="#"> Tn ng nhp: <input name="user" type="text" /><br /> Mt khu: <input name="pass" type="text" /><br /> <input type="submit" value="Submit" /> </form>

n input
H tn:
Submit

Code mu: <form action="#"> H tn: <input type="text" name="hoten"><br> <input type="hidden" name="quocgia" value="Vit Nam"> <input type="submit" value="Submit"> </form> 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 button
Dng chn ch 1 trong nhiu la chn, v d:

Nam N Khc Code mu: <form action="#"> <input name="gioitinh" type="radio" value="Nam" />Nam<br /> <input name="gioitinh" type="radio" value="N" />N<br /> <input name="gioitinh" type="radio" value="Khc" />Khc </form>

Checkbox
Dng chn nhiu la chn cng lc, c th 1 hoc nhiu, v d: Bng Bi li in kinh Cu lng V thut Code mu:

<form action="#"> <input name="thethao" type="checkbox" value="Bng " />Bng <br /> <input name="thethao" type="checkbox" value="Bi li" />Bi li<br /> <input name="thethao" type="checkbox" value="in kinh" />in kinh<br /> <input name="thethao" type="checkbox" value="Cu lng" />Cu lng<br /> <input name="thethao" type="checkbox" value="V thu t" />V thut </form> Thng tin y hn v Checkbox v Radio button bn c th c tham kho thm.

Email
Type 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:

<form action="#"> Email: <input name="email" type="email" /> <input type="submit"> </form> Kt qu: Email:
Submit

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

Thc 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 xuyn kt hp vi Javascript validate. Bn cnh 5 type rt hay dng gm: text, password, submit, reset v email th 2 type chuyn dng to cc la chn l Radio button v Checkbox bn cng cn nm r.

Radio button
Type ny c dng chn mt trong nhiu la chn, chng hn chn gii tnh, chn quc gia ang sinh sng. Code mu: <form> <input name="gioitinh" type="radio" value="Nam" />Nam<br /> <input name="gioitinh" type="radio" value="N" />N<br /> <input name="gioitinh" type="radio" value="Khc" />Khc </form> Kt qu: Nam N Khc

Nu bn khng name c cng tn th bn s chn c 2 ci cng lc, do vy cn lu name khi dng radio.

Checkbox
Radio 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:

<form> <input type="checkbox" name="thethao" value="Bng ">Bng <br> <input type="checkbox" name="thethao" value="Bi li">Bi li<br> <input type="checkbox" name="thethao" value="in kinh">in kinh<br> <input type="checkbox" name="thethao" value="Cu lng">Cu lng<br> <input type = "checkbox" name= "thethao" value="V thut">V thut </form> Kt qu: Bng Bi li in kinh Cu lng V thut

Thuc tnh checked

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

Vit Nam Trung Quc Nht Bn Hn Quc Code mu: <form> <input checked="checked" name="gioitinh" type="radio" value="VN" />Vit Nam<br /> <input name="gioitinh" type="radio" value="TQ" />Trung Qu c<br /> <input name="gioitinh" type="radio" value="NB" />Nht Bn<br /> <input name="gioitinh" type="radio" value="HQ" />Hn Quc </form>

Cch dng th label trong HTML

Th label dng nh ngha nhn cho cc th input trong HTML. Tc dng ca label l lm cho thao tc nhp liu tr nn d dng hn. Code mu: <label for="hoten">H tn:</label><input type="text" name="hoten" id="hoten"> 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 label
Th 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.

Mo
Nu 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: <label>H tn:<input type="text" name="hoten"></label> Kt qu:

H tn:

Cc v d khc
Label cho th radio button Nam N
G? i

Code mu: <form action="#"> <label for="nam">Nam</label><input id="nam" name="gioi" type="radio" value="Nam" / <br /> <label for="nu">N</label><input id="nu" name="gioi" type="radio" value="N" /> <br /> <input type="submit" value="Gi" /> </form>

Thuc tnh value trong th input

Thuc tnh value l thuc tnh quan trng trong th input, chc nng ca n cn ty thuc vo loi th input type c th.

Code mu
<form action="#"> <label>Nam:<input type="radio" name="gioi" value="nam"></label><br /> <label>N:<input type="radio" name="gioi" value="nu"></label><br /> <input type="submit" value="Gi"> </form>

Kt qu: Nam: N:
G? i

Trnh duyt h tr
Thuc tnh value c tt c cc trnh duyt ph thng h tr, trong c Chrome, FireFox, Opera, Safari v IE.

Cch dng
Nh ni phn u ty loi input m thuc tnh value c tc dng khc nhau: A. Trong cc nt reset v submit th value c tc dng hin th on text trn nt nhn. V d:
Reset Submit

Code: <form> <input type="reset" value="Reset" /> <input type="submit" value="Submit" /> </form> B. Cho input kiu text, password v hidden th value xc nh gi tr ban u ca trng. V d: H tn:
Nguy?n

Code: <label>H tn: <input type="text" value="Nguyn c Anh" /></label> C. Cho input kiu checkbox, radio v image th value xc nh gi tr ca cc trng , v s l thng tin c gi i khi submit. V d:

Xe my Xe bus Xe p i b Code: <label>Xe my<input name="phuongtien" type="checkbox" value="xemay" /></label><br /> <label>Xe bus<input name="phuongtien" type="checkbox" value="xebus" /></label><br /> <label>Xe p<input name="phuongtien" type="checkbox" value="xedap" /></label><br /> <label>i b<input name="phuongtien" type="checkbox" value="dibo" /></label> Cc input type kiu text, password hay hidden c th khng cn thuc tnh value vn OK, nhng input kiu checkbox v radio, thuc tnh value l bt buc, v nu khng c th n s gi gi tr rng khi submit. Thng tin cui cng, thuc tnh value khng c php s dng vi <input type="file">

Thuc tnh placeholder ca th input

Thuc tnh placeholder l thuc tnh mi trong HTML5 dnh cho th input. Tc dng ca placeholder l cung cp thm thng tin cho ngi dng, gip h bit cn nhp d liu g. Code mu: <form action="#"> <label>H tn:<input type="text" name="hoten" placeholder="in y h tn"></label> <label>Qu qun:<input type="text" name="quequan" placeholder="Qu trong Chng Minh Th"></label> <input type="submit" value="Gi"> </form>

Kt qu: H tn: Qu qun:

G? i

Khi ngi dng bt u nhp liu, thng tin gi s bin mt.

Trnh duyt h tr
c hu ht cc trnh duyt h tr trong c: Internet Explorer 10, Firefox, Opera, Chrome v Safari. Ch l IE 9 v cc phin bn sm hn khng c h tr.

Nhng th input type dng placeholder

Gm cc input type sau: text, search, url, tel, email v password.

Thuc tnh required ca th input

Thuc tnh required l thuc tnh mi trong HTML5 dnh cho th input. Tc dng ca required l buc ngi dng phi nhp d liu th mi gi c (submit). D nhin thao tc ny cho chng ta kh nhiu code JavaScript. Code mu: <form action="#"> <label>H tn:<input type="text" name="hoten" required></label> <input type="submit" value="Gi"> </form>

Kt qu: H tn:
G? i

Gi bn khng in g vo trng H tn, ri nhn nt Gi th xem, bn s nhn c thng bo kiu nh "Vui lng in vo trng ny"

Trnh duyt h tr
Thuc tnh required c Internet Explorer 10, Firefox, Opera v Chrome h tr, ng tic hin Safari cha a tnh nng ny vo. Nhng ti ngh sm mun g Safari cng cp nht, v nhng thuc tnh mi ca input rt hu ch vi ngi thit k v ngi dng.

Nhng th input type dng requried

Cc input sau y dng thuc tnh requried: text, checkbox, radio, email, password, search, url, tel, date pickers, number, file.

Cch dng
Required l thuc tnh kiu boolean, ngha l n ch nhn 2 gi tr c hoc khng c. Nu khng c requried trong th input ngha l khng yu cu phi nhp d liu, ngc li nu c th phi nhp mi c Submit.

C s khc bit gia XHTML v HTML. V XHTML khng cho php rt gn thuc tnh cho nn vi XHTML chng ta phi vit y nh sau: <input required="required" />