Etiketë (nga anglishtja. hyrje- hyrja)është një nga elementët e formës së gjithanshme dhe ju lejon të krijoni pjesë të ndryshme të ndërfaqes dhe të ofroni ndërveprim me përdoruesit.
Kryesisht është krijuar për të krijuar fusha teksti, butona të ndryshëm, çelësa dhe kuti kontrolli.
atribut kryesor , i cili përcakton llojin e elementit - tip . Ju lejon të vendosni elementet e mëposhtëm forma: fusha e tekstit (teksti), fusha e fjalëkalimit (fjalëkalimi), çelësi (radio), kutia e kontrollit (kutia e kontrollit), fusha e fshehur (e fshehur), butoni (butoni), butoni për dorëzimin e formularit (dorëzo), butoni për pastrimin e formularit ( reset ), një fushë për dërgimin e një skedari (skedari), një buton me një imazh (imazh), etj. Çdo element ka listën e vet të atributeve që përcaktojnë pamjen dhe karakteristikat e tij. Përveç kësaj, mbi një duzinë atributesh të reja janë shtuar në HTML5.
Sintaksë
Etiketa mbyllëse nuk kërkohet.
WAI ARIA
Jo vlerat e roleve default.
Vlerat e vlefshme të roleve:
- butonin
- kutia e kontrollit
- kuti kombinuese
- lidhje
- artikull i menusë
- kutia e kontrollit të menusë
- menuitemradio
- opsion
- radio
- kutia e kërkimit
- rrëshqitës
- butoni i rrotullimit
- kaloni
- kuti teksti
Atributet
- prano - Vendos një filtër për llojet e skedarëve që mund të dërgosh përmes fushës së ngarkimit të skedarëve.
- alt - Tekst alternativ për butonin e imazhit.
- plotësimi automatik - Aktivizon ose çaktivizon plotësimin automatik.
- autofocus - Vendos fokusin në një fushë formulari.
- i zgjedhur - Një buton radioje ose kuti zgjedhjeje e aktivizuar më parë.
- dirname - Një parametër që dërgon drejtimin e tekstit në server.
- i çaktivizuar - Bllokon aksesin dhe modifikimin e elementit.
- forma - Lidh një fushë me një formë me ID-në e saj.
- formacion - Përcakton adresën e trajtuesit të formularit.
- formenctype - Vendos se si kodohen të dhënat e formularit kur dërgohen në server.
- formmetoda - I tregon shfletuesit se cila metodë duhet të dërgojë të dhënat e formularit në server.
- formnovalidate - Anulon vërtetimin e integruar të të dhënave.
- formtarget - Përcakton dritaren ose kornizën në të cilën do të ngarkohet rezultati i kthyer nga mbajtësi i formularit.
- list - Tregon një listë opsionesh që mund të zgjidhen kur futni tekst.
- max - Vlera e sipërme për futjen e një numri ose datë.
- gjatesia maksimale - Shuma maksimale karakteret e lejuara në tekst.
- min - Vlera më e ulët për futjen e një numri ose datë.
- minlength - Numri minimal i karaktereve të lejuara në tekst.
- multiple - Ju lejon të ngarkoni shumë skedarë në të njëjtën kohë.
- emri - Emri i fushës, i destinuar që përpunuesi i formularit ta identifikojë atë.
- model - Vendos modelin e hyrjes.
- mbajtës i vendndodhjes - Shfaq tekst sugjerues.
- readonly - Përcakton që fusha nuk mund të modifikohet nga përdoruesi.
- kërkohet - Fusha e kërkuar.
- madhësia - Gjerësia fushë teksti.
- src - Adresa skedar grafik për fushën e imazhit.
- hap - Hapi i rritjes për fushat numerike.
- type - I tregon shfletuesit se çfarë lloji është elementi i formës.
- vlera - Vlera e elementit.
pranoj
Vendos një filtër për llojet e skedarëve që mund të dërgoni përmes fushës së ngarkimit të skedarëve. Lloji i skedarit specifikohet si një lloj MIME, me vlera të shumta ato renditen të ndara me presje. Nëse një skedar nuk përputhet me filtrin e caktuar, ai nuk shfaqet në dritaren e përzgjedhjes së skedarit.
Zbatohet në fushën e ngarkimit të skedarit ( ).
Mbështetja e shfletuesit
Vlera e paracaktuar
alt
Atributet alt vendosen tekst alternativ për fushën e imazhit. Ky tekst ju lejon të informacion teksti në lidhje me foton kur ngarkimi i imazheve është i çaktivizuar në shfletues, dhe është gjithashtu i destinuar për motorët e kërkimit.
Sintaksë
vlerat
Çdo të përshtatshme varg teksti.
Vlera e paracaktuar
plotësimi automatik
Ky atribut ndihmon në plotësimin e fushave të formave me tekstin që ishte futur më parë në to. Vlerat ruhen dhe zëvendësohen nga shfletuesi, ndërsa plotësimi automatik mund të çaktivizohet nga përdoruesi në cilësimet e shfletuesit për arsye sigurie dhe nuk mund të kontrollohet nga atributi i plotësimit automatik në këtë rast.
Kur futni shkronjat e para të tekstit, shfaqet një listë e vlerave të ruajtura më parë, nga e cila mund të zgjidhni atë që ju nevojitet.
Plotësimi automatik i një fushe të caktuar formulari lidhet me atributin e saj të emrit dhe humbet kur vlera ndryshon.
Sintaksë
vlerat
- aktiv - Aktivizon plotësimin automatik të tekstit.
- joaktive - Çaktivizon plotësimin automatik. Kjo vlerë zakonisht përdoret për të parandaluar ruajtjen e të dhënave të rëndësishme (fjalëkalimet, numrat e telefonit) në shfletues karta bankare), si dhe të dhëna të futura rrallë ose unike (captcha).
Vlera e paracaktuar
Varet nga cilësimet e shfletuesit.
fokusim automatik
Vendos automatikisht fokusin në një fushë formulari. Në një fushë të tillë, ju mund të shkruani menjëherë tekst pa klikuar në mënyrë të qartë mbi të me kursorin e miut.
Sintaksë
vlerat
Vlera e paracaktuar
Si parazgjedhje, atributi i fokusimit automatik nuk është vendosur.
kontrolluar
Ky atribut specifikon nëse një element i formës, si kutia e kontrollit ose butoni i radios, është i parashënuar. Në rastin e përdorimit të radiobutonave, mund të kontrollohet vetëm një element i grupit, për kutitë e kontrollit, të paktën të gjithë elementët mund të kontrollohen.
Sintaksë
vlerat
Vlera e paracaktuar
diremër
Nëse atributi dirname është i pranishëm, një çift emër/vlerë dërgohet në server, ku emri jepet nga atributi dirname dhe vlera zëvendësohet nga shfletuesi. Për tekstin nga e majta në të djathtë, vlera do të jetë ltr, dhe për tekstin nga e djathta në të majtë (për shembull, në hebraisht), vlera do të jetë rtl.
Sintaksë
vlerat
Një varg teksti arbitrar që shërben si emër i parametrit. Për të treguar se ky opsion specifikon drejtimin e tekstit, zakonisht në fund të rreshtit shtohet një .dir.
Vlera e paracaktuar
me aftësi të kufizuara
Bllokon aksesin dhe modifikimin e fushës së formularit. Në këtë rast, ai shfaqet në gri dhe nuk mund të aktivizohet nga përdoruesi. Përveç kësaj, një fushë e tillë nuk mund të marrë fokusin duke shtypur tastin Tab, miun ose ndryshe. Megjithatë, kjo gjendje e fushës mund të ndryshohet duke përdorur skriptet. Vlera e kyçur në fushë nuk dërgohet te serveri.
Sintaksë
vlerat
Vlera e paracaktuar
Si parazgjedhje, ky atribut është i çaktivizuar.
formë
Lidh një fushë me një formë me ID-në e saj. Një lidhje e tillë është e nevojshme kur fusha ndodhet jashtë
vlerat
Identifikuesi i formës (vlera e atributit id të elementit
Parametrat
Përshkrimi i parametrave të etiketës
Parametri ALIGN
Përcakton se si të përafrohet fusha e imazhit me tekstin ose elementët e tjerë të formës.
Sintaksë
Argumentet
- fund- Vendosni kufirin e poshtëm të figurës me tekstin përreth
- majtas- Përafron imazhin në skajin e majtë të dritares
- e mesme- Përafron mesin e figurës me vijën bazë të vijës aktuale.
- drejtë- Përafron imazhin në skajin e djathtë të dritares.
- krye- Kufiri i sipërm i figurës përafrohet me elementin më të lartë të linjës aktuale.
Vlera e paracaktuar është fundi. Shfletuesit gjithashtu mbështesin argumentet absfund, absmid, bazë Dhe teksti në krye, të cilat nuk janë të përfshira në specifikimin HTML 4.01.
Opsioni ALT
Parametri alt vendos tekstin alternativ për fushën e imazhit. Një tekst i tillë ju lejon të merrni informacione tekstuale për figurën kur ngarkimi i imazheve është i çaktivizuar në shfletues. Meqenëse imazhet ngarkohen pasi shfletuesi merr informacion rreth tyre, teksti zëvendësues për imazhin shfaqet më herët. Dhe ndërsa ngarkohet, teksti do të zëvendësohet nga një imazh. Shfletuesit shfaqin gjithashtu tekstin alternativ si një këshillë mjeti që shfaqet kur vendosni miun mbi një imazh.
Sintaksë
Vlera mund të jetë çdo varg teksti i përshtatshëm. Duhet të mbyllet në thonjëza të dyfishta ose teke.
Parametri BORDER
Shfletuesit përpunojnë imazhet e shtuara nëpërmjet një etikete , të ngjashme me fotografitë e krijuara me etiketën . Duke përfshirë rreth imazhit, mund të shtoni një kornizë, ngjyra e së cilës përputhet me ngjyrën e tekstit.
Sintaksë
Vlera e vlefshme është çdo numër i plotë pozitiv në piksel. Vlera e paracaktuar është 0.
Parametri i Kontrolluar
Ky cilësim përcakton nëse një element i formës, si kutia e zgjedhjes ose butoni i radios, është i parashënuar. Në rastin e përdorimit të radiobutonave, vetëm një element i grupit mund të kontrollohet, për kutitë e kontrollit lejohet të kontrollohen të paktën të gjithë elementët.
Sintaksë
Parametri DISABLED
Bllokon aksesin dhe modifikimin e fushës së formularit. Në këtë rast, ai shfaqet në gri dhe nuk mund të aktivizohet nga përdoruesi. Përveç kësaj, një fushë e tillë nuk mund të marrë fokusin duke shtypur tastin Tab, miun ose ndryshe. Megjithatë, kjo gjendje e fushës mund të ndryshohet duke përdorur skriptet.
Sintaksë
Parametri MAXLENGTH
Vendos numrin maksimal të karaktereve që një përdorues mund të fusë në një fushë teksti. Kur arrihet ky numër gjatë shkrimit, futja e mëtejshme bëhet e pamundur.
Sintaksë
Parametri NAME
Përcakton një emër unik për elementin e formës. Në mënyrë tipike, ky emër përdoret kur dërgoni të dhëna në server ose kur aksesoni të dhënat e futura në terren nëpërmjet skripteve.
Sintaksë
Emri është një grup karakteresh, duke përfshirë numra dhe shkronja. JavaScript është i ndjeshëm ndaj shkronjave të vogla, kështu që kur i referoheni një elementi me emër, përdorni të njëjtën drejtshkrim si parametri i emrit.
Parametri READONLY
Kur të etiketoni shtohet parametri vetëm për lexim, fusha e tekstit nuk mund të ndryshohet nga përdoruesi, duke përfshirë futjen e tekstit të ri ose modifikimin e atij ekzistues. Përveç kësaj, një fushë e tillë nuk mund të marrë fokusin duke shtypur tastin Tab, miun ose ndryshe. Megjithatë, gjendja dhe përmbajtja e fushës mund të ndryshohet duke përdorur skriptet.
Sintaksë
Parametri SIZE
Gjerësia e fushës së tekstit, e cila përcaktohet nga numri i karaktereve në fontin monospace. Me fjalë të tjera, gjerësia jepet nga numri i shkronjave ngjitur me të njëjtën gjerësi horizontale. Nëse madhësia e shkronjave ndryshohet duke përdorur stilet, gjerësia gjithashtu ndryshon në përputhje me rrethanat.
Sintaksë
Vlera e vlefshme është çdo numër i plotë pozitiv.
Parametri SRC
Adresa e skedarit grafik që do të shfaqet në faqen e internetit në fushën e imazhit.
Sintaksë
Vlera pranon rrugën e plotë ose relative të skedarit.
Parametri TYPE
Parametri i llojit të kërkuar i tregon shfletuesit se çfarë lloji është elementi i formës.
Sintaksë
Argumentet
- butonin- Butoni.
- kutia e kontrollit- Kutitë e kontrollit. Ju lejon të zgjidhni më shumë se një opsion nga opsionet.
- dosje- Fusha për futjen e emrit të skedarit që dërgohet në server.
- i fshehur- Fushë e fshehur. Nuk shfaqet në asnjë mënyrë në faqen e internetit.
- imazh- Fushë me një imazh. Kur klikoni në një imazh, të dhënat e formularit dërgohen në server.
- fjalëkalimin- Një fushë teksti normale, por ndryshon nga ajo në atë që të gjithë karakteret shfaqen si yll. Ai synon të sigurojë që askush të mos shikojë në fjalëkalimin e futur.
- radio- Çelësat. Përdoret kur duhet të zgjidhni një opsion nga disa opsione.
- rivendosur- Butoni për të kthyer të dhënat e formularit në vlerën e tij origjinale.
- paraqesin- Butoni për të dërguar të dhënat e formularit në server.
- teksti- Fusha e tekstit. Projektuar për futjen e karaktereve duke përdorur tastierën.
Vlera e paracaktuar është teksti.
Parametri VALUE
Përcakton vlerën e elementit të formës që do të dërgohet në server ose do të merret duke përdorur skriptet e klientit. Një çift "name=value" dërgohet në server, ku emri specifikohet nga parametri i emrit të etiketës. , dhe vlera është parametri i vlerës.
Në varësi të llojit të elementit, parametri i vlerës ka rolin e mëposhtëm:
- për butonat (lloji i hyrjes = "button | rivendos | dorëzo") vendos etiketën e tekstit mbi to;
- për fushat e tekstit (lloji i hyrjes = "fjalëkalimi | tekst") specifikon një varg të futur më parë. Përdoruesi mund të fshijë tekstin dhe të fusë karakteret e tij, por kur përdoret në butonin Reset të formularit, teksti i përdoruesit pastrohet dhe vlera e futur në parametrin e vlerës rikthehet;
- për kutitë e kontrollit dhe butonat e radios (lloji i hyrjes = "kutia e kontrollit | radio") identifikon në mënyrë unike çdo artikull në mënyrë që një program klient ose server të mund të përcaktojë në mënyrë unike se cilin artikull ka zgjedhur përdoruesi.
Unë mendoj se shumë shtypës (dhe jo vetëm) duhej të shtypnin fushat e tekstit ( ), duke u dhënë atyre madhësi arbitrare. Por si të bëjmë elementi i dhënë gome dhe plotëson kushtet:
- Mundësia e instalimit të çdo horizontale dhe dhëmbëzimet vertikale në tekst;
- Një element duhet të zërë të gjithë kontejnerin në të cilin është vendosur;
- Klikimi kudo në fushën e tekstit vendos kursorin në të.
Përgjigja është mjaft e thjeshtë dhe zgjidhet me metodën e mëposhtme:
Së pari, duhet të kuptoni se çfarë ndodh me një element hyrës kur vendosni gjerësinë e tij në 100% dhe shtoni mbushje majtas dhe djathtas të tekstit.Sipas standardeve CSS (dhe në këtë rast të gjithë shfletuesit i mbështesin ato), gjerësia që rezulton elementi hyrës, në mungesë të kufijve ( kufiri) dhe kufijtë e marzhit ( diferencë), do të jetë e barabartë me:
gjerësi = gjerësi + mbushje-majtas + mbushje-djathtas
ato. do të jetë më i madh për nga sasia e dhëmbëzimeve të brendshme horizontale, dhe elementi që rezulton do të zgjasë përtej zonës së caktuar për të.
Për ta bërë gjerësinë përfundimtare të barabartë me 100%, mund të përdorni një sistem me dy kontejnerë:
Çdo enë ka rolin e vet:
- input-gjerësia– ky kontejner vendos gjerësinë që rezulton në fushën e tekstit;
- gjerësi vendosës- kjo enë vendos gjerësinë e elementit hyrës minus mbushjen horizontale.
Input-width (lartësia:23px; kufiri:1px solid #999; sfond:#fff;) ; mbushje:4px 9px 5px; margjina:0; font-familje:Tahoma, Geneva, sans-serif;madhësia e shkronjave:12px;lartësia e rreshtit:14px;ngjyra:#000;kufiri:0 asnjë; sfondi:#9C6; )
Shembulli 1
Nga stilet rezulton se elementi input-gjerësia specifikon gjerësinë që duhet të kishte marrë fusha e tekstit. Elementi gjerësi vendosës vendos gjerësinë e elementit hyrës të jetë më e vogël se horizontale mbushje. Vlen të përmendet se mbushja e saj e jashtme e diferencës ( diferencë) duhet të jetë i barabartë mbushje-majtas Dhe mbushje djathtas për elementin hyrës.
Me këtë përshkrim, elementi hyrës do të dalë nga gjerësi vendosës nga sasia e dhëmbëzimeve të tyre horizontale ( mbushje), dhe në IE6 - shtrini të gjithë "prindërit" në madhësinë e tyre (shembulli 1). Gjithashtu në shfletuesit IE6-7, elementi i hyrjes ka mbushje që nuk mund të hiqet duke vendosur vetinë në zero. diferencë. Për të ndryshuar këtë pozicion, duhet të zhvendosni fushën e tekstit në të majtë, sipas madhësisë së dhëmbëzimit të majtë ( mbushje-majtas). Këtë mund ta bëni përmes pozicionit: relative, por në IE6 ai do të mbetet i shtrirë në gjerësinë e tekstit fushat e hyrjes enë gjerësi vendosës. Për të eliminuar shtrirjen, duhet të siguroheni që elementi nuk mund të ndikojë në madhësinë e prindit të tij duke vendosur, për shembull, pozicioni: absolut.
Le të përshkruajmë grupin fillestar të kontejnerëve në një mënyrë të re:
Input-width (lartësia:23px; kufiri:1px solid #999; sfondi:#fff;) ; lartësia: 14 px; mbushja: 4 px 9 px 5 px; margjina: 0; font-familja: Tahoma, Geneva, sans-serif; madhësia e shkronjave: 12 px; lartësia e rreshtit: 14 px; ngjyra: # 000; kufiri: 0 asnjë; sfondi :#9C6; pozicioni:absolute; majtas:-9px; lart:0;)
Shembulli 2
Si rezultat, kur aplikohen stile të tilla, detyrat e vendosura në fillim përfundojnë. Fusha e tekstit doli me dhëmbëzimet e dhëna gome dhe e klikueshme në cilindo nga vendet e saj.
Për të vendosur një gjerësi specifike për elementin përfundimtar, ju duhet vetëm të vendosni veçorinë gjerësia për kontejner input-gjerësia.
shënim. Metoda e dhënë e zbatimit të një fushe teksti gome është testuar në Doctype: HTML 4.01, XHTML 1.0 dhe HTML (HTML 5) - dhe është e pajtueshme me ndërshfletuesit: IE6-8, Opera 9+, FF 2.0+, Safari 2.0+, Chrome . Në mungesë të një Doctype, performanca e metodës ndër-shfletues nuk është e garantuar.
Unë mendoj se shumë shtypës (dhe jo vetëm) duhej të shtypnin fushat e tekstit ( ), duke u dhënë atyre madhësi arbitrare. Por si ta bëni këtë element gome dhe të plotësoni kushtet:
- Aftësia për të vendosur çdo indent horizontal dhe vertikal për tekstin;
- Një element duhet të zërë të gjithë kontejnerin në të cilin është vendosur;
- Klikimi kudo në fushën e tekstit vendos kursorin në të.
Përgjigja është mjaft e thjeshtë dhe zgjidhet me metodën e mëposhtme:
Së pari, duhet të kuptoni se çfarë ndodh me një element hyrës kur vendosni gjerësinë e tij në 100% dhe shtoni mbushje majtas dhe djathtas të tekstit.Sipas standardeve CSS (dhe në këtë rast të gjithë shfletuesit i mbështesin), gjerësia që rezulton e elementit të hyrjes, pa kufij ( kufiri) dhe kufijtë e marzhit ( diferencë), do të jetë e barabartë me:
gjerësi = gjerësi + mbushje-majtas + mbushje-djathtas
ato. do të jetë më i madh për nga sasia e dhëmbëzimeve të brendshme horizontale, dhe elementi që rezulton do të zgjasë përtej zonës së caktuar për të.
Për ta bërë gjerësinë përfundimtare të barabartë me 100%, mund të përdorni një sistem me dy kontejnerë:
Çdo enë ka rolin e vet:
- input-gjerësia– ky kontejner vendos gjerësinë që rezulton në fushën e tekstit;
- gjerësi vendosës- kjo enë vendos gjerësinë e elementit hyrës minus mbushjen horizontale.
Input-width (lartësia:23px; kufiri:1px solid #999; sfond:#fff;) ; mbushje:4px 9px 5px; margjina:0; font-familje:Tahoma, Geneva, sans-serif;madhësia e shkronjave:12px;lartësia e rreshtit:14px;ngjyra:#000;kufiri:0 asnjë; sfondi:#9C6; )
Shembulli 1
Nga stilet rezulton se elementi input-gjerësia specifikon gjerësinë që duhet të kishte marrë fusha e tekstit. Elementi gjerësi vendosës vendos gjerësinë e elementit hyrës më pak se mbushja horizontale. Vlen të përmendet se mbushja e saj e jashtme e diferencës ( diferencë) duhet të jetë i barabartë mbushje-majtas Dhe mbushje djathtas për elementin hyrës.
Me këtë përshkrim, elementi hyrës do të dalë nga gjerësi vendosës nga sasia e dhëmbëzimeve të tyre horizontale ( mbushje), dhe në IE6 - shtrini të gjithë "prindërit" në madhësinë e tyre (shembulli 1). Gjithashtu në shfletuesit IE6-7, elementi i hyrjes ka mbushje që nuk mund të hiqet duke vendosur vetinë në zero. diferencë. Për të ndryshuar këtë pozicion, duhet të zhvendosni fushën e tekstit në të majtë, sipas madhësisë së dhëmbëzimit të majtë ( mbushje-majtas). Ju mund ta bëni këtë përmes pozicionit:relativ, por në IE6 ai do të mbetet i shtrirë për t'iu përshtatur gjerësisë së kontejnerit të futjes së fushës së tekstit gjerësi vendosës. Për të eliminuar shtrirjen, duhet të siguroheni që elementi nuk mund të ndikojë në madhësinë e prindit të tij duke vendosur, për shembull, pozicioni: absolut.
Le të përshkruajmë grupin fillestar të kontejnerëve në një mënyrë të re:
Input-width (lartësia:23px; kufiri:1px solid #999; sfondi:#fff;) ; lartësia: 14 px; mbushja: 4 px 9 px 5 px; margjina: 0; font-familja: Tahoma, Geneva, sans-serif; madhësia e shkronjave: 12 px; lartësia e rreshtit: 14 px; ngjyra: # 000; kufiri: 0 asnjë; sfondi :#9C6; pozicioni:absolute; majtas:-9px; lart:0;)
Shembulli 2
Si rezultat, kur aplikohen stile të tilla, detyrat e vendosura në fillim përfundojnë. Fusha e tekstit doli me dhëmbëzat e dhëna gome dhe e klikueshme në cilindo nga vendet e saj.
Për të vendosur një gjerësi specifike për elementin përfundimtar, ju duhet vetëm të vendosni veçorinë gjerësia për kontejner input-gjerësia.
shënim. Metoda e dhënë e zbatimit të një fushe teksti gome është testuar në Doctype: HTML 4.01, XHTML 1.0 dhe HTML (HTML 5) - dhe është e pajtueshme me ndërshfletuesit: IE6-8, Opera 9+, FF 2.0+, Safari 2.0+, Chrome . Në mungesë të një Doctype, performanca e metodës ndër-shfletues nuk është e garantuar.