Inscripție fără speranță html. Cum să structurați formularele HTML. Ești exact specificația?

Cu aceste cunoștințe de bază la locul lor, vom arunca acum o privire mai atentă asupra elementelor folosite pentru a da structură și semnificație diferitelor părți ale formelor.

Flexibilitate Formulare HTML făcându-le una dintre cele mai complexe structuri din HTML; puteți crea orice formă folosind elemente și atribute de formular. Utilizare structura corecta, atunci când creați formulare HTML, vă va ajuta să asigurați confortul și accesibilitatea acestora.

">Element _and_">Elemente și

Diverse tehnologii de asistență vor folosi ca parte a etichetei eticheta tuturor elementelor din . De exemplu, cititoarele de ecran precum Jaws sau NVDA spun titlul formularului înainte de a spune numele etichetei elementului.

Un mic exemplu:

Dimensiunea sucului de fructe

Mic

Mediu

Mare

Când citește acest formular, cititorul de ecran va spune „Suc de fructe de dimensiune mică” pentru primul articol, „Suc de fructe de dimensiune medie” pentru al doilea și „Suc de fructe de dimensiune mare” pentru al treilea.

Cazul de utilizare din acest exemplu este unul dintre cele mai importante. De fiecare dată când aveți un set de comutatoare, trebuie să le plasați într-un . Poate fi folosit și pentru a separa forme. În mod ideal, o formă lungă este împărțită în mai multe pagini, totuși, dacă trebuie să fie pe o singură pagină, distribuirea elementelor conexe în altele poate îmbunătăți gradul de utilizare.

Datorită influenței sale asupra tehnologiei de asistență, elementul este unul dintre elementele cheie pentru construirea formelor accesibile; cu toate acestea, nu ar trebui să îl folosiți excesiv. Dacă este posibil, încercați să testați modul în care Naratorul vă interpretează formularul.

_element">Elementul

Să luăm în considerare acest exemplu:

Nume: * Nume: * Nume: *

Paragraful din partea de sus definește regula pentru elementele necesare. Trebuie să fie la început pentru a vă asigura că tehnologiile de asistență, cum ar fi cititoarele de ecran, îl vor afișa sau vocaliza utilizatorului înainte de a găsi un element necesar. În acest fel, ei vor ști ce înseamnă asteriscul. Un cititor de ecran va spune steaua ca „ stea"sau" necesar„, în funcție de setările cititorului de ecran – în orice caz, ceea ce se va vorbi este clar în primul paragraf).

În primul exemplu, eticheta nu este citită deloc cu intrarea - obțineți doar „editați textul gol”, plus etichetele reale sunt citite separat. Elementele multiple derutează cititorul de ecran.
În cel de-al doilea exemplu, lucrurile sunt puțin mai clare - eticheta citită împreună cu intrarea este „nume steaua nume editare text”, iar etichetele sunt încă citite separat. Lucrurile sunt încă puțin confuze, dar de data aceasta este puțin mai bine, deoarece intrarea are o etichetă asociată.
Cel de-al treilea exemplu este cel mai bun - eticheta reală este citită împreună, iar eticheta citită cu intrare este „text de editare stea nume”.

Notă: Este posibil să obțineți rezultate ușor diferite, în funcție de cititorul de ecran. Acest lucru a fost testat în VoiceOver (și NVDA se comportă similar). Ne-ar plăcea să auzim și despre experiențele tale.

Notă: Puteți găsi acest exemplu pe GitHub ca required-labels.html (vedeți-l și live). nu rulați exemplul cu 2 sau 3 dintre versiuni necomentate - cititorii de ecran vor fi cu siguranță confuzi dacă aveți mai multe etichete ȘI mai multe intrări cu același ID!

Structuri HTML comune utilizate cu formulare

Dincolo de structurile specifice formularelor HTML, este bine să ne amintim că formularele sunt doar HTML. Aceasta înseamnă că puteți folosi toată puterea HTML pentru a structura un formular HTML.

După cum puteți vedea în exemple, este o practică obișnuită să împachetați o etichetă și un widget cu un element.

elementele sunt de asemenea utilizate în mod obișnuit, la fel ca și listele HTML (acestea din urmă sunt cele mai frecvente pentru structurarea mai multor casete de selectare sau butoane radio).

În plus față de element, este, de asemenea, o practică obișnuită să folosiți titluri HTML (de ex. , ) și secționarea (de ex. ) pentru a structura o formă complexă.

Mai presus de toate, depinde de tine să găsești un stil care să ți se pară confortabil de codat și care are ca rezultat și forme accesibile și utilizabile.

Aceasta are fiecare secțiune separată de funcționalitate conținută în elemente și a pentru a conține butoanele radio.

Învățare activă: construirea unei structuri de formă

Să punem aceste idei în practică și să construim o structură de formular puțin mai implicată - un formular de plată.Acest formular va conține o serie de tipuri de widget-uri pe care s-ar putea să nu le înțelegeți încă - nu vă faceți griji pentru acest lucru deocamdată; veți afla cum funcționează acestea în articolul următor (Widgeturile de formulare native). Deocamdată, citiți cu atenție descrierile în timp ce urmați instrucțiunile de mai jos și începeți să vă formați o apreciere a elementelor de wrapper pe care le folosim pentru a structura formularul. , și de ce.

Pentru început, faceți o copie locală a fișierului șablon necompletat și a CSS-ului pentru formularul nostru de plată într-un director nou de pe computer.

Mai întâi de toate, aplicați CSS la HTML adăugând următoarea linie în interiorul HTML:

Apoi, începeți formularul adăugând elementul exterior:

În interiorul etichetelor, începeți prin a adăuga un titlu și un paragraf pentru a informa utilizatorii cum sunt marcate câmpurile obligatorii: Formular de plată

Câmpurile obligatorii sunt urmate de *.

În continuare, vom adăuga o secțiune mai mare de cod în formular, sub intrarea noastră anterioară. Aici veți vedea că împachetăm câmpurile de informații de contact într-un element distinct. Mai mult, avem un set de două butoane radio, pe care fiecare le punem în propria listă (

) element. În sfârșit, avem două texte standard și elementele asociate acestora, fiecare conținut în interiorul a

, plus o parolă introdusă pentru introducerea unei parole. Adăugați acest cod în formularul dvs. acum: Informații de contact Titlu

Domnule
domnisoara

Nume: *

E-mail: *

Parola: *

Acum ne vom întoarce la a doua din formularul nostru - informațiile de plată. Aici avem trei widget-uri distincte împreună cu etichetele lor, fiecare conținut într-un

Primul este un meniu derulant (

Descriere

O etichetă HTML este utilizată pentru a adăuga cod JavaScript direct la un document HTML.

Există două moduri de a adăuga cod JavaScript folosind elementul:

Codul JavaScript poate fi plasat direct în interiorul elementului.
Conectați un fișier extern cu cod JavaScript.

Un script situat direct în interiorul unui element se numește . Scriptul situat în interior fișier extern, numit .

Vă rugăm să rețineți că atunci când scrieți cod JavaScript inline, nu puteți utiliza șirul „” în cod, deoarece acesta va fi interpretat de browser ca o etichetă de închidere. Pentru a rezolva această problemă, evadați caracterul /: " ".

Conectarea unui fișier extern se face folosind atributul src. Fișierele externe care conțin cod JavaScript au extensia .js:

Fișierul extern în sine trebuie să conțină numai cod JavaScript (fără etichete și ).

Dacă este conectat un script extern, atunci un script încorporat nu poate fi localizat în interiorul aceluiași element în același timp.

Elementul poate fi plasat oriunde în cadrul elementului și/sau și utilizat de orice număr de ori.

Indiferent de modul în care codul JavaScript este adăugat în pagină, elementele sunt procesate în ordinea în care apar în codul HTML, cu condiția să nu aibă atributele defer și async. Codul pentru primul element trebuie să fie complet interpretat înainte ca al doilea element să poată fi procesat, al doilea element trebuie să fie complet procesat înainte de al treilea etc.

Atribute asincrone: indică faptul că scriptul ar trebui să înceapă imediat descărcarea de pe server și imediat după ce este descărcat, să înceapă executarea scriptului (în timp ce se încarcă restul conținutului paginii). Dacă sunt definite mai multe elemente cu atributul asincron, scriptul care se încarcă primul va începe să se execute primul. Valabil numai pentru scripturi externe.

Valori posibile pentru atributul boolean asincron:

Notă: atributul asincron nu este acceptat în IE9 și versiuni anterioare.

Amânare: Specifică faptul că scriptul va fi încărcat imediat, dar execuția acestuia poate fi amânată în siguranță până când restul conținutului paginii a fost încărcat. Dacă sunt definite mai multe elemente cu atributul defer, atunci scripturile vor fi executate în ordinea în care se află în codul HTML, adică scriptul care se află mai devreme în cod va fi executat primul. Valabil numai pentru scripturi externe.

Valori posibile pentru atributul boolean defer: tip: identifică limbajul de scripting utilizat în codul de script încorporat sau extern. Valori de tip MIME acceptate:

text/javascript
text/ecmascript
aplicație/ecmascript
aplicație/javascript
text/vbscript

Dacă JavaScript este folosit ca limbaj de scripting, atunci atributul tip poate fi omis (dacă acest atribut este absent, valoarea implicită este text/javascript). set de caractere: Specifică codarea caracterelor utilizată în fișierul script extern. Atributul charset este utilizat numai dacă codificarea din fișierul script extern este diferită de codificarea din documentul html. src: Specifică adresa URL a fișierului script extern. Script de stil implicit (afișare: niciunul; ) Exemplu document.write("Hello World!");

Rezultat acest exempluîn fereastra browserului.

Eticheta este legată de un anumit câmp de intrare folosind atributul for. Ar trebui să indice valoarea atributului câmpului de intrare la care este legată eticheta. Eticheta este, de asemenea, atașată unui element dacă acest element este plasat în interiorul unei etichete de etichetă. În acest caz, nu este nevoie să specificați atributul for. Vezi exemple pentru o mai bună înțelegere.

Făcând clic pe o etichetă, cei atașați sau își vor schimba starea de la marcate la nebifate și invers. În acest caz, eticheta este necesară pentru comoditate: elementele de formă mici sunt greu de lovit cu cursorul, dar o etichetă lungă cu text este mult mai ușor.

Câmpul de introducere a textului de tip legat de etichetă va primi focalizarea de intrare. Focalizarea este atunci când cursorul clipește într-un câmp de introducere, în acest caz, dacă scrieți ceva pe tastatură, textul va cădea în acest câmp (vezi pseudo-clasa de focus pentru o înțelegere avansată a focalizării).

Eticheta poate fi folosită pentru a simula sau . Acest lucru este necesar pentru a face o casetă de selectare sau un radio cu propriul design (ceea ce este interzis în CSS, dar cu ajutorul unor trucuri inteligente este posibil).

Exemplu de atribute. Caseta de bifat

Să legăm o etichetă la caseta de selectare folosind atributul for. Faceți clic pe etichetă și veți vedea că starea casetei de selectare se schimbă de la bifat la nebifat și invers:

Sunt obligat la o casetă de selectare cu casetă de selectare ID.

Exemplu. Eticheta interioara

Acum să nu legăm eticheta prin atributul for, ci să punem elementele direct în eticheta label, în acest caz, făcând clic pe textul etichetei, se va activa și elementul:

eticheta

Dezvăluire: Asistența dvs. ajută la menținerea funcționării site-ului! Câștigăm o taxă de recomandare pentru unele dintre serviciile pe care le recomandăm pe această pagină. Află mai multe

Împărtășirea înseamnă îngrijire!

Element de Ce face în HTML: tutorial ușor cu exemplu de cod? Elementul este folosit pentru a asocia o etichetă text cu un câmp de formular. Eticheta este folosită pentru a spune utilizatorilor valoarea care trebuie introdusă în câmpul de intrare asociat. Afișează în linie Exemplu de cod Animal preferat

Pentru ca a să funcționeze corect, trebuie să includă un atribut for, care identifică cel căruia este asociat. Valoarea atributului for ar trebui să se potrivească cu id-ul (nu cu numele) elementului.

(Trimiterea formularelor se bazează pe împerecherea numelui și etichetei se bazează pe id . Acesta este motivul pentru care veți vedea adesea elemente cu aceeași valoare în ambele atribute. Și dacă este o casetă de selectare , este posibil să vedeți aceeași valoare în atributul valoare și ca conținutul elementului.)

Nume
De acord

Sunteți de acord cu termenii și condițiile?

Etichete și utilizare

Este, desigur, posibil pentru a nu folosi elementul și doar pune text nemarcat deasupra sau lângă un câmp de formular. Dar aceasta nu este o idee bună. A avea o etichetă asociată este mai mult decât o semantică bună, este o utilizare bună. Cu o etichetă marcată corespunzător, utilizatorul poate face clic (sau atinge cu degetul) eticheta pentru a pune accentul la element sau selectați-l. Acest lucru este moderat util pe computerele desktop și laptopuri obișnuite, dar pe telefoanele mobile cu ecran tactil, face o diferență enormă.

Faceți clic pe această etichetă pentru a selecta.