S tem osnovnim znanjem si bomo zdaj podrobneje ogledali elemente, ki se uporabljajo za dajanje strukture in pomena različnim delom obrazcev.

Prilagodljivost obrazcev HTML jih naredi za eno najbolj zapletenih struktur v HTML; z elementi obrazca in atributi lahko ustvarite katerikoli obrazec. Uporaba pravilne strukture pri ustvarjanju obrazcev HTML bo pomagala zagotoviti, da so uporabniku prijazni in dostopni.

">Element _and_">Elementi in

Različne podporne tehnologije bodo kot del oznake uporabljale oznako vseh elementov znotraj . Na primer, bralniki zaslona, ​​kot sta Jaws ali NVDA, izgovorijo naslov obrazca, preden izgovorijo ime oznake elementa.

Majhen primer:

Velikost sadnega soka

majhna

Srednje

Velik

Ko berete ta obrazec, bo bralnik zaslona za prvi element rekel »Sadni sok majhna velikost«, za drugega »Sadni sok srednja velikost« in za tretjega »Sadni sok velika velikost«.

Primer uporabe v tem primeru je eden najpomembnejših. Vsakič, ko imate nabor stikal, jih morate postaviti v . Lahko se uporablja tudi za ločevanje oblik. V idealnem primeru je dolg obrazec razdeljen na več strani, če pa mora biti na eni strani, lahko razdelitev povezanih elementov v različne izboljša uporabnost.

Element je zaradi svojega vpliva na podporno tehnologijo eden ključnih elementov za gradnjo dostopnih oblik; vendar ga ne smete pretiravati. Če je mogoče, poskusite preizkusiti, kako Pripovedovalec razlaga vaš obrazec.

_element">Element

Poglejmo ta primer:

*.

Ime: * Ime: * Ime: *

Odstavek na vrhu določa pravilo za zahtevane elemente. Na začetku je treba zagotoviti, da bodo podporne tehnologije, kot so bralniki zaslona, ​​prikazale ali zvokalizirale uporabniku, preden najdejo zahtevani element. Tako bodo vedeli, kaj pomeni zvezdica. Bralnik zaslona bo zvezdo izgovoril kot " zvezda"ali" potrebno«, odvisno od nastavitev bralnika zaslona – v vsakem primeru je v prvem odstavku jasno, kaj bo izgovorjeno).

• V prvem primeru se oznaka sploh ne prebere z vnosom - dobite samo "uredi besedilo prazno", poleg tega se dejanske oznake preberejo ločeno. Številni elementi zmedejo bralnik zaslona.
• V drugem primeru so stvari nekoliko jasnejše - oznaka, ki se prebere skupaj z vnosom, je "name star name edit text", oznake pa se še vedno preberejo ločeno. Stvari so še vedno nekoliko zmedene, vendar je tokrat nekoliko bolje, ker je vnos povezan z oznako.
• Tretji primer je najboljši - dejanska oznaka je prebrana vsa skupaj, oznaka, prebrana z vnosom, pa je "name star edit text".

Opomba: morda boste dobili nekoliko drugačne rezultate, odvisno od bralnika zaslona. To je bilo preizkušeno v VoiceOver (in NVDA se obnaša podobno). Radi bi slišali tudi o vaših izkušnjah.

Opomba: Ta primer najdete na GitHubu kot required-labels.html (oglejte si ga tudi v živo). ne izvajajte primera z 2 ali 3 različicami brez komentarjev - bralniki zaslona bodo zagotovo zmedeni, če imate več oznak IN več vnosov z istim ID-jem!

Običajne strukture HTML, ki se uporabljajo z obrazci

Poleg struktur, značilnih za obrazce HTML, si je dobro zapomniti, da so obrazci samo HTML. To pomeni, da lahko uporabite vso moč HTML za strukturiranje obrazca HTML.

Kot lahko vidite v primerih, je običajna praksa, da oznako in njen gradnik ovijete z elementom.

pogosto se uporabljajo tudi elementi, kot tudi seznami HTML (slednji je najpogostejši za strukturiranje več potrditvenih polj ali radijskih gumbov).

Poleg elementa je običajna praksa tudi uporaba naslovov HTML (npr., ) in razdelkov (npr. ) za strukturiranje kompleksnega obrazca.

Predvsem pa je na vas, da poiščete slog, ki se vam zdi udoben za kodiranje in katerega rezultat so dostopne, uporabne oblike.

To ima vsak ločen razdelek funkcionalnosti v elementih in a, ki vsebuje izbirne gumbe.

Aktivno učenje: gradnja obrazne strukture

Uporabimo te zamisli v praksi in zgradimo nekoliko bolj zapleteno strukturo obrazca – obrazec za plačilo.Ta obrazec bo vseboval številne vrste pripomočkov, ki jih morda še ne razumete – za zdaj naj vas to ne skrbi; kako delujejo, boste izvedeli v naslednjem članku (izvorni gradniki za obrazce). Za zdaj natančno preberite opise, ko sledite spodnjim navodilom, in začnite razumeti, katere elemente ovoja uporabljamo za strukturiranje obrazca , in zakaj.

Za začetek naredite lokalno kopijo naše prazne datoteke predloge in CSS za naš obrazec za plačilo v novem imeniku v vašem računalniku.

Najprej uporabite CSS za HTML tako, da v HTML dodate naslednjo vrstico:

Nato začnite obrazec z dodajanjem zunanjega elementa:

Znotraj oznak začnite z dodajanjem naslova in odstavka, da uporabnike obvestite, kako so označena zahtevana polja: Obrazec za plačilo

Obveznim poljem sledi *.

Nato bomo obrazcu pod prejšnjim vnosom dodali večji del kode. Tukaj boste videli, da smo polja s kontaktnimi podatki zavili v poseben element. Poleg tega imamo nabor dveh radijskih gumbov, od katerih vsakega postavimo na svoj seznam (

) element. Nazadnje imamo dva standardna besedila s in njuna povezana elementa, od katerih je vsak znotraj a

, plus vnos gesla za vnos gesla. Dodajte to kodo v svoj obrazec zdaj: Kontaktni podatki Naslov

• Gospod
• Zgrešiti

Ime: *

E-naslov: *

Geslo: *

Zdaj se bomo posvetili drugemu obrazcu – podatki o plačilu. Tukaj imamo tri različne pripomočke skupaj z njihovimi oznakami, od katerih je vsak znotraj

Prvi je spustni meni (

Opis

Oznaka HTML (prevedena iz angleščine kot oznaka) definira besedilno oznako za element. Na videz se nalepka ne razlikuje od običajnega besedila, vendar uporabniku omogoča, da izbere element obrazca s preprostim klikom na besedilo, ki se nahaja znotraj elementa, in ne na sam element. Če želite določiti, kateremu elementu obrazca pripada trenutna oznaka, morate uporabiti atribut for oznake. Vrednost atributa for mora biti enakovredna vrednosti atributa id elementa obrazca, na katerega bo oznaka veljala.

Atributa »for« vam ni treba uporabiti, če je element znotraj .

Atributi za: Vzpostavi povezavo z elementom obrazca, na katerega bo oznaka veljala. Vrednost atributa je identifikator ciljnega elementa. Primer » obrazec: Določa obrazec, s katerim bo oznaka povezana. Vrednost atributa je identifikator elementa. Ta atribut omogoča, da se oznake postavijo kamor koli v dokumentu, ne samo kot podrejenega elementa. primer »

Oznaka podpira tudi globalne atribute in dogodke

Privzeta oznaka sloga ( kazalec: privzeto; ) Primer Moški
ženska

ali isto stvar, vendar brez uporabe atributa for

moški
ženska

Rezultat tega primera v oknu brskalnika.

Opis

Oznaka je namenjena opisovanju skriptov in lahko vsebuje povezavo do programa ali njegovo besedilo v določenem jeziku. Skripte lahko najdete v zunanji datoteki in jih povežete s katerim koli dokumentom HTML. Ta pristop vam omogoča uporabo istih splošnih funkcij na številnih spletnih straneh in pospeši njihovo nalaganje, ker zunanja datoteka se shrani v predpomnilnik ob prvem nalaganju, skript pa se pri naslednjih klicih kliče hitreje.

se lahko nahajajo v glavi ali telesu dokumenta HTML v neomejenih količinah. V večini primerov lokacija skripte na noben način ne vpliva na delovanje programa. Vendar so skripti, ki jih je treba najprej izvesti, običajno postavljeni v glavo dokumenta.

Sintaksa ... Atributi Asinhrono naloži skript. Odloži izvajanje skripta, dokler se celotna stran v celoti ne naloži. Nastavi programski jezik, v katerem je napisan skript. Naslov skripta iz zunanje datoteke za uvoz v trenutni dokument. Določa vrsto vsebine oznake. Zaključna oznaka

Obvezno.

HTML 4.01 IE Cr Op Sa Fx

Oznaka SCRIPT document.write("

"); za (i=1; i", " Št
res ne

V tem primeru mi:

• V notranjosti prvi oblike:
  • Objavljeno dva izbirne gumbe ( ), da izberete med omejenim številom možnosti. Ponovno upoštevajte, da morate za izbirne gumbe znotraj istega obrazca podati isto ime; podali smo različne vrednosti. Za prvi označeno , ki določa, da mora biti element vnaprej izbran, ko se stran naloži (v tem primeru izbirni gumb z vrednostjo da). Poleg tega smo določili globalne atribute za izbirne gumbe, ki določajo edinstven identifikator za element.
  • Postavili smo dva elementa, ki določata besedilne oznake za naša besedilna polja. Upoštevajte, da smo z atributom for določili, kateremu elementu obrazca pripada trenutna oznaka. Vrednost atributa for ustreza vrednosti globalnega atributa izbirnega gumba, ki ga potrebujemo.
• V notranjosti drugo oblike:
  • Objavljeno dva izbirne gumbe ( ), da izberete med omejenim številom možnosti. Za drugo izbirnih gumbov smo določili atribut

Svet brezplačnih programov in koristnih nasvetov
2024 whatsappss.ru