Beznadni natpis html. Kako strukturirati HTML forme. Jesi li točno specifikacija?

S tim osnovnim znanjem sada ćemo pobliže pogledati elemente koji se koriste za davanje strukture i značenja različitim dijelovima obrazaca.

Fleksibilnost HTML obrascičineći ih jednom od najsloženijih struktura u HTML-u; možete stvoriti bilo koji obrazac pomoću elemenata obrasca i atributa. Korištenje ispravna struktura, prilikom izrade HTML obrazaca, pomoći će osigurati njihovu praktičnost i pristupačnost.

">Element _and_">Elementi i

Različite pomoćne tehnologije koristit će kao dio oznake oznaku svih elemenata unutar . Na primjer, čitači zaslona poput Jawsa ili NVDA izgovaraju naslov obrasca prije nego što izgovore naziv oznake elementa.

Mali primjer:

Veličina voćnog soka

Mali

Srednji

velika

Dok budete čitali ovaj obrazac, čitač zaslona će za prvu stavku reći "Voćni sok male veličine", za drugu "Voćni sok srednje veličine" i za treću "Voćni sok velike veličine".

Slučaj upotrebe u ovom primjeru jedan je od najvažnijih. Svaki put kada imate set prekidača, morate ih postaviti unutar . Može se koristiti i za odvajanje oblika. U idealnom slučaju, dugačak obrazac je podijeljen na nekoliko stranica, međutim, ako mora biti na jednoj stranici, distribucija povezanih elemenata u različite može poboljšati upotrebljivost.

Zbog svog utjecaja na pomoćnu tehnologiju, element je jedan od ključnih elemenata za izgradnju pristupačnih oblika; međutim, ne biste ga trebali pretjerati. Ako je moguće, pokušajte testirati kako Pripovjedač tumači vaš obrazac.

_element">Element

Razmotrimo ovaj primjer:

Ime: * Ime: * Ime: *

Paragraf na vrhu definira pravilo za potrebne elemente. Mora biti na početku kako bi bili sigurni da će pomoćne tehnologije kao što su čitači zaslona prikazati ili vokalizirati korisniku prije nego što pronađu traženi element. Tako će znati što znači zvjezdica. Čitač zaslona izgovorit će zvijezdu kao " zvijezda"ili" potreban", ovisno o postavkama čitača zaslona - u svakom slučaju, ono što će se govoriti jasno je navedeno u prvom odlomku).

U prvom primjeru, oznaka se uopće ne čita s unosom - dobivate samo "uređivanje teksta prazno", plus stvarne oznake se čitaju odvojeno. Višestruki elementi zbunjuju čitač zaslona.
U drugom primjeru stvari su malo jasnije - natpis koji se očitava zajedno s unosom je "name star name edit text", a natpisi se i dalje čitaju odvojeno. Stvari su još uvijek pomalo zbunjujuće, ali ovaj put je malo bolje jer je unosu pridružena oznaka.
Treći primjer je najbolji - stvarna oznaka se čita naglas, a oznaka koja se očitava s unosom je "ime star edit text".

Napomena: možda ćete dobiti malo drugačije rezultate, ovisno o vašem čitaču zaslona. Ovo je testirano u VoiceOveru (i NVDA se ponaša slično). Voljeli bismo čuti i vaša iskustva.

Napomena: Ovaj primjer možete pronaći na GitHubu kao required-labels.html (pogledajte ga i uživo). nemojte pokretati primjer s 2 ili 3 verzije bez komentara - čitači zaslona definitivno će se zbuniti ako imate više oznaka I višestruke unose s istim ID-om!

Uobičajene HTML strukture koje se koriste s obrascima

Osim struktura specifičnih za HTML obrasce, dobro je zapamtiti da su obrasci samo HTML. To znači da možete koristiti svu moć HTML-a za strukturiranje HTML obrasca.

Kao što možete vidjeti u primjerima, uobičajena je praksa omotati oznaku i njen widget elementom.

elementi se također često koriste, kao i HTML popisi (potonji je najčešći za strukturiranje više potvrdnih okvira ili radio gumba).

Osim elementa, također je uobičajena praksa koristiti HTML naslove (npr., ) i odjeljake (npr. ) za strukturiranje složenog obrasca.

Iznad svega, na vama je da pronađete stil koji vam je ugodan za kodiranje, a koji također rezultira dostupnim, upotrebljivim oblicima.

Ovo ima svaki odvojeni odjeljak funkcionalnosti sadržan u elementima i a koji sadrži radio gumbe.

Aktivno učenje: izgradnja strukture oblika

Provedimo ove ideje u praksu i izgradimo nešto složeniju strukturu obrasca - obrazac za plaćanje. Ovaj obrazac će sadržavati brojne vrste widgeta koje možda još ne razumijete - za sada ne brinite o tome; saznat ćete kako rade u sljedećem članku (widgeti izvornog obrasca). Za sada pažljivo pročitajte opise dok slijedite upute u nastavku i počnite shvaćati koje elemente omotača koristimo za strukturiranje obrasca , i zašto.

Za početak napravite lokalnu kopiju naše prazne datoteke predloška i CSS-a za naš obrazac za plaćanje u novom direktoriju na vašem računalu.

Prije svega, primijenite CSS na HTML dodavanjem sljedećeg retka unutar HTML-a:

Zatim započnite svoj obrazac dodavanjem vanjskog elementa:

Unutar oznaka započnite dodavanjem naslova i odlomka da biste obavijestili korisnike kako su označena obavezna polja: Obrazac za plaćanje

Obavezna polja su praćena *.

Zatim ćemo dodati veći dio koda u obrazac, ispod našeg prethodnog unosa. Ovdje ćete vidjeti da polja s kontaktnim informacijama omatamo unutar posebnog elementa. Štoviše, imamo skup od dva radio gumba, od kojih svaki stavljamo na vlastiti popis (

) element. Na kraju, imamo dva standardna teksta i njihove povezane elemente, svaki sadržan unutar a

, plus unos lozinke za unos lozinke. Dodajte ovaj kod u svoj obrazac odmah: Podaci o kontaktu Naslov

Gospodin
Propustiti

Ime: *

Email: *

Lozinka: *

Sada ćemo se okrenuti drugom dijelu našeg obrasca - podacima o plaćanju. Ovdje imamo tri različita widgeta zajedno s njihovim oznakama, a svaki se nalazi unutar

Prvi je padajući izbornik (

Opis

HTML oznaka se koristi za dodavanje JavaScript koda izravno u HTML dokument.

Postoje dva načina za dodavanje JavaScript koda pomoću elementa:

JavaScript kod može se postaviti izravno unutar elementa.
Povežite vanjsku datoteku s JavaScript kodom.

Skripta smještena izravno unutar elementa naziva se . Skripta se nalazi unutra vanjska datoteka, nazvao .

Imajte na umu da kada pišete ugrađeni JavaScript kod, ne možete koristiti niz "" u svom kodu jer će ga preglednik protumačiti kao završnu oznaku. Da biste riješili ovaj problem, izbjegnite znak /: " ".

Povezivanje vanjske datoteke vrši se pomoću atributa src. Vanjske datoteke koje sadrže JavaScript kôd dobivaju nastavak .js:

Sama vanjska datoteka mora sadržavati samo JavaScript kod (bez oznaka i ).

Ako je povezana vanjska skripta, tada se ugrađena skripta ne može istovremeno nalaziti unutar istog elementa.

Element se može postaviti bilo gdje unutar elementa i/ili koristiti bilo koji broj puta.

Bez obzira na to kako je JavaScript kod dodan na stranicu, elementi se obrađuju redoslijedom kojim se pojavljuju u HTML kodu, pod uvjetom da nemaju atribute defer i async. Kod za prvi element mora biti u potpunosti interpretiran prije nego što se može obraditi drugi element, drugi element mora biti u potpunosti obrađen prije trećeg, itd.

asinkroni atributi: Označava da se skripta treba odmah početi preuzimati s poslužitelja i odmah nakon preuzimanja započeti s izvršavanjem skripte (dok se učitava ostatak sadržaja stranice). Ako je više elemenata definirano asinkronim atributom, skripta koja se prva učita počet će se prva izvršavati. Vrijedi samo za vanjske skripte.

Moguće vrijednosti za asinkroni Boolean atribut:

Napomena: asinkroni atribut nije podržan u IE9 i ranijim verzijama.

Odgodi: Određuje da će se skripta odmah učitati, ali se njezino izvršenje može sigurno odgoditi dok se ostatak sadržaja stranice ne učita. Ako je atributom defer definirano više elemenata, tada će se skripte izvršavati redoslijedom kojim se nalaze u HTML kodu, odnosno prva će se izvršavati skripta koja se nalazi ranije u kodu. Vrijedi samo za vanjske skripte.

Moguće vrijednosti za defer Boolean atribut: type: Identificira skriptni jezik koji se koristi u ugrađenom ili vanjskom kodu skripte. Podržane vrijednosti tipa MIME:

tekst/javascript
tekst/ecmascript
aplikacija/ecmascript
aplikacija/javascript
tekst/vbscript

Ako se JavaScript koristi kao skriptni jezik, tada se atribut tipa može izostaviti (ako ovog atributa nema, zadana vrijednost je tekst/javascript). skup znakova: Određuje kodiranje znakova korišteno u vanjskoj datoteci skripte. Atribut skupa znakova koristi se samo ako se kodiranje u vanjskoj datoteci skripte razlikuje od kodiranja u html dokumentu. src: Određuje URL vanjske datoteke skripte. Zadana skripta stila ( display: none; ) Primjer document.write("Hello World!");

Proizlaziti ovaj primjer u prozoru preglednika.

Oznaka je vezana za određeno polje unosa pomoću atributa for. Treba naznačiti vrijednost atributa polja za unos na koje je oznaka vezana. Oznaka je također pridružena elementu ako je taj element smješten unutar oznake oznake. U ovom slučaju nema potrebe navesti atribut for. Pogledajte primjere za bolje razumijevanje.

Klikom na oznaku, oni koji su joj priloženi ili će promijeniti svoje stanje iz označenih u neoznačene i obrnuto. U ovom slučaju, oznaka je potrebna zbog praktičnosti: male elemente obrasca teško je pogoditi kursorom, ali duga oznaka s tekstom je mnogo lakša.

Polje za unos teksta vezano za oznaku dobit će fokus unosa. Fokus je kada kursor treperi u polju za unos, u ovom slučaju, ako nešto napišete na tipkovnici, tekst će pasti u ovo polje (pogledajte pseudoklasu fokusa za napredno razumijevanje fokusa).

Oznaka se može koristiti za simulaciju ili . Ovo je potrebno kako biste napravili checkbox ili radio s vlastitim dizajnom (što je zabranjeno u CSS-u, ali uz pomoć pametnih trikova je moguće).

Primjer atributa. Potvrdni okvir

Povežimo oznaku s potvrdnim okvirom pomoću atributa for. Kliknite na oznaku i vidjet ćete promjenu stanja potvrdnog okvira iz označenog u neoznačeni i obrnuto:

Vezan sam za potvrdni okvir s ID potvrdnim okvirom.

Primjer. Unutarnja etiketa

Nemojmo sada povezivati oznaku preko atributa for, već stavimo elemente izravno u oznaku oznake, u ovom slučaju, klik na tekst oznake također će aktivirati element:

označiti

Otkrivanje: Vaša podrška pomaže u održavanju stranice! Zarađujemo naknadu za preporuke za neke od usluga koje preporučujemo na ovoj stranici. Saznajte više

Dijeliti je voditi brigu!

Element Što radi Što radi u HTML-u: jednostavan vodič s primjerom koda? Element se koristi za povezivanje tekstualne oznake s poljem obrasca. Oznaka se koristi da kaže korisnicima vrijednost koju treba unijeti u pridruženo polje za unos. Prikaz umetnutog primjera koda Omiljena životinja

Da bi ispravno radio, mora sadržavati atribut for, koji identificira s kojim je povezan. Vrijednost atributa for trebala bi odgovarati ID-u (ne imenu) elementa.

(Podnošenje obrasca oslanja se na ime, a uparivanje oznaka oslanja se na id. Zbog toga ćete često vidjeti elemente s istom vrijednošću u oba atributa. A ako je potvrdni okvir, možete vidjeti istu vrijednost u atributu vrijednosti, a kao sadržaj elementa.)

Ime
Slažem se

Slažete li se s odredbama i uvjetima?

Oznake i upotrebljivost

to je, naravno, moguće da ne koristite element i samo stavite neoznačeni tekst iznad ili pored polja obrasca. Ali to nije dobra ideja. Imati uparenu oznaku je više od dobre semantike, to je dobra upotrebljivost. S pravilno označenom oznakom, korisnik može kliknuti (ili prstom dodirnuti) oznaku kako bi doveo fokus na element ili ga odaberite. Ovo je umjereno korisno na običnim stolnim i prijenosnim računalima, ali na mobilnim telefonima sa zaslonom osjetljivim na dodir čini veliku razliku.

Pritisnite ovu oznaku za odabir.