Curs Web Development
Curs HTML
Curs CSS
Curs Javascript
Curs PHP
Curs Phyton
Curs SQL
Curs SEO

Formulare web 1 - Colectarea datelor de la utilizatori

Formularele web sunt un instrument foarte puternic pentru interacțiunea cu utilizatorii - cel mai frecvent sunt utilizate pentru colectarea datelor de la utilizatori sau pentru a le permite să controleze o interfață de utilizator. În aceasta sectiune, vom acoperi toate aspectele esențiale ale formularelor web, inclusiv marcarea structurii cu HTML, stilizarea controalelor formularelor, validarea datelor și trimiterea datelor către server.

Intelegerea si stăpânirea utilizarii formularelor necesită pe linga HTML, cunostinte despre CSS si Javascript. Prin urmare, dupa ce veti invata putin CSS si Javascript, vă recomand să reveniti si sa revedeti informatiile prezentate aici, pentru a intelege totul cit mai bine.

Ce este un formular web?

Formularele permit utilizatorilor să introducă date, care sunt, în general, trimise către un server web pentru procesare și stocare sau utilizate pe partea de client pentru a actualiza imediat interfața - de exemplu, adăugați un alt element dintr-o listă sau afișați sau ascundeți o caracteristică UI.

Partea de HTML a unui formular web este formata dintr-unul sau mai multe controale de formular (uneori numite widget-uri), plus câteva elemente suplimentare care ajută la structura generala - acestea sunt adesea denumite formulare HTML. Controalele pot fi câmpuri de text cu o singură linie sau cu mai multe linii, casete derulante, butoane, casete de selectare sau butoane radio și sunt create în cea mai mare parte folosind elementul <input>, precum și cu alte elemente despre care vom discuta.

Controalele de formulare pot fi, de asemenea, programate pentru a impune anumite valori specifice sau care trebuie introduse și asociate cu etichete text, care descriu scopul lor, atât pentru utilizatorii cu vedere buna cât și pentru utilizatorii nevăzători.

Designul formularului web

Înainte de a scrie codul, este indicat bine să te gândești la cum va arata foemularul tau. Proiectarea unui model rapid (chiar si o schita in creion pe hirtie), vă va ajuta să definiți setul potrivit de date pe care doriți să le solicitați utilizatorului. Din punct de vedere al experienței utilizatorului (UX), este important să rețineți că, cu cât formularul este mai mare, cu atât mai frustrați vor fi utilizatorii și riscati să pierdeți o parte din ei. Mențineți un formular simplu și cereți doar datele de care aveți absolut nevoie.

Formularul pe care il vom construi, va conține trei câmpuri de text și un singur buton. Solicităm utilizatorului numele, e-mailul și mesajul pe care doreste să îl transmită. Apăsarea butonului va trimite datele introduse pe un server web, pentru a fi prelucrate.

Vom utiliza urmatoarele elemente: <form>, <label>, <input>, <textarea> si <button>, precum si o serie intreaga de atribute specifice.

Elementul form

Toate formularele incep cu un element form astfel:

<form action="/procesare-formular" method="post">
  ...
</form>

Acest element definește formal un formular. Este un element de tip container asemanator elementelor section sau footer, dar specific formularelor - de asemenea, acceptă anumite atribute specifice pentru a configura modul în care se comportă formularul. Toate atributele sunt opționale, dar este o practică standard să setați întotdeauna cel puțin atributele de action și method:

Elementele label, input, și textarea

Formularul nostru de contact nu este unul complex - porțiunea de introducere a datelor conține trei câmpuri de text, fiecare cu o eticheta label:

În ceea ce privește codul HTML, pentru implementarea acestor widget-uri de formular avem nevoie de următoarele linii de cod:

<form action="/procesare-formular" method="post">
   <ul>
    <li>
      <label for="name">Nume:</label>
      <input type="text" id="name" name="user_name">
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_mail">
    </li>
    <li>
      <label for="msg">Mesaj:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>
   </ul>
</form>

Am utilizat elementele li pentru a structura în mod convenabil codul și pentru a ușura stilizarea formularului (asa cum vom vedea imediat). Pentru utilizare prietenoasa și accesibilitate, includem o etichetă explicită pentru fiecare control de formular. Rețineți utilizarea atributului for pentru toate elementele label, care ia drept valoare id-ul controlului de formular cu care este asociat - astfel asociați un control cu eticheta acestuia.

Un mare beneficiu rezultat in urma asocierii etichetei label cu controalele de formular, este acela ca, se poate face clic pe valoarea vizibila a etichetei label pentru a activa controlul corespunzător, oferind, de asemenea, partea de accesibilitate pentru cititorii de ecran.

În exemplul nostru simplu, folosim valoarea <input / text> pentru prima intrare - valoarea implicită pentru acest atribut. Reprezintă un câmp text, de o singură linie, care acceptă orice fel de text.

Pentru a doua intrare, folosim valoarea <input / email>, care definește un câmp text de o singură linie care acceptă doar o adresă de e-mail corect formatată. Acest lucru transformă un câmp text de bază într-un fel de câmp „inteligent” care va efectua unele verificări de validare a datelor introduse de utilizator.

Nu în ultimul rând, remarcati sintaxa elementului <input> versus <textarea>...</textarea>. Aceasta este una dintre ciudățeniile HTML. Eticheta input este un element gol, ceea ce înseamnă că nu are nevoie de o etichetă de închidere, in timp ce textarea nu este un element gol, deci trebuie închis cu eticheta finală corespunzătoare. Acest lucru are un impact asupra unei caracteristici specifice a formularelor - modul în care definiți valoarea implicită. Pentru a defini valoarea implicită a unui element input, trebuie să utilizați atributul value astfel:

<input type="text" value="implicit acest element este completat cu acest text">

Pe de altă parte, dacă doriți să definiți o valoare implicită pentru un element textarea, o plasați între etichetele de deschidere și închidere ale elementului, astfel:

<textarea>
    implicit acest element este completat cu acest text
</textarea>

Elementul button

Marcajul HTML pentru formularul nostru este aproape complet. Trebuie doar să adăugăm un buton pentru a permite utilizatorului să trimită datele după ce a completat formularul. Facem acest lucru cu ajutorul elementului <button>. Vom adauga următoarele linii de cod, deasupra etichetei de închidere </ul>: 

<li class="button">
    <button type="submit">Trimite mesajul</button>
</li>

Elementul button acceptă de asemenea un atribut tip (type) - acesta poate lua una dintre cele trei valori: trimite (submit), resetare (reset) sau buton (button):

☞ Puteți utiliza, de asemenea, elementul <input> cu tipul corespunzător pentru a produce un buton, de exemplu <input type = "submit">. Insa, elementul <button> permite conținut HTML complet, conținut de buton mai complex, mai creativ, în timp ce elementul <input> permite doar text simplu.

In acest moment formularul nostru arată destul de neprietenos, exact ca in imaginea de mai jos:

formular-nestilizat

Stilizarea simpla a formularului

Este cunoscut faptul ca, formularele, sunt destul de greu de stilizat, astfel incit sa aiba un aspect frumos, dar nu este imposibil. Deocamdata vom aplica o serie de stiluri simple, dar mai tirziu, in cadrul cursului CSS, vom realiza citeva formulare foarte frumoase.

Vom scrie tot codul CSS, intern, in sectiunea head intre etichetele style:

  <style>
    ...
  </style>
</head>

Codul CSS pentru formularul nostru este:

form {
/* Centram formularul in pagina si limitam latimea */
  margin: 0 auto;
  width: 400px;
/* Adaugam un chenar si putin spatiu de jur imprejur */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
   
/* Distantam cimpurile de text */
form li + li {
  margin-top: 1em;
}

label {
/* Uniformizam dimensiunile si alinierea labels */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, 
textarea {
/* Ne asiguram ca toate cimpurile de text vor avea aceeasi setare pentru font. Fontul implicit este monospace */
  font: 1em sans-serif;
/* Uniformizam cimpurile de text */
  width: 300px;
  box-sizing: border-box;
/* Uniformizam chenarele cimpurilor */
  border: 1px solid #999;
}

input:focus, 
textarea:focus {
/* Evidentiere aditionala pentru starea de focus */
  border-color: #000;
}

textarea {
/* Aliniem liniile de text cu etichetele (labels) */
  vertical-align: top;
/* Asiguram spatiu pentru mesajul text */
  height: 5em;
}

.button {
/* Aliniem butonul cu cimpurile de text, pe orizontala *∕
  padding-left: 90px; /* aceeasi marime ca si pentru labels */
}

button {
/* Aliniem butonul pe verticala */
  margin-left: .5em;
}

Acum putem vedea cum arata formularul nostru live:

🔧 Exemplu formular finalizat

Trimiterea datelor colectate către serverul web

Ultima parte, și poate cea mai dificilă, este de a gestiona datele din formular pe partea de server. Elementul form definește unde și cum să trimiteți datele grație atributelor action și method.

Oferim un nume fiecărui control de formular. Numele sunt importante atât pentru client, cât și pentru server. Numele spun browserului ce nume să atribuie fiecarui fragment de date, iar pe partea de server, lasă serverul să gestioneze fiecare informație după nume. Datele formularului sunt trimise serverului sub forma de perechi nume / valoare.

Pentru a denumi datele dintr-un formular, trebuie să utilizați atributul nume pe fiecare widget de formular, care va colecta un anumit fragment de date. Haideți să ne uităm din nou la codul formularului:

<form action="/procesare-formular" method="post">
   <ul>
    <li>
      <label for="name">Nume:</label>
      <input type="text" id="name" name="user_name"> <!‐‐ (user_name) ‐‐>
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" id="mail" name="user_mail"> <!‐‐ (user_mail) ‐‐>
    </li> 
    <li>
      <label for="msg">Mesaj:</label>
      <textarea id="msg" name="user_message"></textarea> <!‐‐ (user_message) ‐‐>
    </li>
   </ul>
</form>

În exemplul nostru, formularul va trimite 3 fragmente de date numite user_name, user_mail și user_message. Datele respective vor fi trimise la adresa URL /procesare-pagina folosind metoda HTTP POST.

Pe partea de server, scriptul de la adresa URL /procesare-pagina va primi datele ca pe o listă de 3 elemente perechi, cheie / valoare conținute în cererea HTTP. Modul în care acest script va trata aceste date depinde de programator si de limbajul utilizat. Fiecare limbaj de server (PHP, Python, Ruby, Java, C #, etc.) are propriul său mecanism de gestionare a datelor din formular. Despre procesarea datelor pe partea de server, vom discuta mai tirziu cind vom utiliza si exemple concrete. De asemenea, acest subiect, va fi tratat mult mai pe larg, in cadrul cursurilor dedicate limbajelor de server, pentru fiecare limbaj pe care il vom aborda.

Acesta este doar începutul - acum este timpul să aruncăm o privire mai profundă. Formularele au mult mai multă putere decât ceea ce am văzut aici și urmatoarele articole din acest modul, vă vor ajuta să stăpâniți aceasta putere.

Cum să structuram corect un formular web

Flexibilitatea formularelor, face ca acestea, sa fie printre cele mai complexe structuri din HTML. Puteți construi orice fel de formular, folosind elemente și atribute dedicate. Utilizarea unei structuri corecte la construirea unui formular HTML, vă va ajuta să vă asigurați că formularul poate fi utilizat și totodata este accesibil, pentru toate tipurile de utilizatori.

Este întotdeauna posibil să utilizați un control de formular, în afara unui element form. Dacă faceți acest lucru, în mod implicit, controlul nu are nicio legătură cu niciun formular, decât dacă îl asociați cu un formular folosind atributul form. Aceasta a fost introdusă pentru a vă permite să legați explicit un control cu un formular, chiar dacă nu este imbricat în interiorul său.

Elementele fieldset si legend

Elementul <fieldset> este o modalitate convenabilă de a crea grupuri de widget-uri care au același scop, pentru stilizare și în scopuri semantice. Puteți eticheta un <fieldset> prin includerea unui element <legend> chiar sub eticheta <fieldset> de deschidere. Conținutul textului <legend>, descrie formal, scopul <fieldset> în care este inclus.

Multe tehnologii de asistență vor folosi elementul <legend> ca și cum ar fi o parte a etichetei fiecărui control din elementul <fieldset> corespunzător. De exemplu, unii cititori de ecran, cum ar fi Jaws și NVDA, vor vorbi despre conținutul legendei înainte de a vorbi eticheta fiecărui control.

Sa ne uitam la codul unui exemplu simplu:

<form>
  <fieldset>
    <legend>Curs HTML</legend>
    <p>
      <input type="radio" name="curs" id="curs_1" value="beginner">
      <label for="curs_1">Incepator</label>
    </p>
    <p>
      <input type="radio" name="curs" id="curs_2" value="intermediary">
      <label for="curs_2">Intermediar</label>
    </p>
    <p>
      <input type="radio" name="curs" id="curs_3" value="advanced">
      <label for="curs_3">Avansat</label>
    </p>
  </fieldset>
</form>

si aici puteti vedea exemplul live:

🔧 Exemplu fieldset-legend

Când citeste formularul de mai sus, un cititor de ecran va vorbi:

Cazul de utilizare din acest exemplu este unul dintre cele mai importante. De fiecare dată când aveți un set de butoane radio, ar trebui să le imbricati în interiorul unui element fieldset. Există și alte cazuri de utilizare și în general, elementul fieldset, poate fi folosit și pentru secționarea unui formular. În mod ideal, formularele lungi ar trebui să fie răspândite pe mai multe pagini, dar dacă un formular devine lung și trebuie să fie pe o singură pagină, introducerea diferitelor secțiuni înrudite în diferite câmpuri fieldset usureaza utilizarea.

Datorită influenței sale asupra tehnologiei de asistență, elementul fieldset este unul dintre elementele cheie pentru construirea de formulare accesibile. Cu toate acestea, este responsabilitatea noastra să nu exageram si sa utilizam excesiv acest element. Dacă este posibil, de fiecare dată când creați un formular, încercați să ascultați cum este interpretat de un cititor de ecran. Dacă sună ciudat, încearcă să îmbunătățești structura formularului.

Elementul label (eticheta)

Așa cum am văzut mai sus, elementul label este modalitatea formală de a defini o etichetă pentru un widget de formular HTML. Acesta este elementul cel mai important, dacă doriți să construiți formulare accesibile - atunci când sunt implementate corect, cititorii de ecran vor vorbi eticheta unui element de formular împreună cu instrucțiunile aferente, dar este util si pentru utilizatorii cu vedere buna. Sa ne uitam din nou la un exemplu pe care l-am văzut mai sus:

<label for="name">Nume:</label>
<input type="text" id="name" name="user_name">

Cind eticheta label este asociată corect cu eticheta input prin atributul for (care conține valoarea atributului ID a elementului input), un screenreader va citi ceva de genul "Nume, editeaza textul".
Practic, in exemplul de mai sus, vorbim despre asocierea for="name" cu id="name".

Există o altă modalitate de a asocia un control de formular cu o etichetă - imbricarea controlului de formular în interiorul elementelor <label>...</label>, caz in care asocierea este implicita si mai mult decit evidenta:

<label for="name">
  Nume:<input type="text" id="name" name="user_name">
</label>

Chiar și în astfel de cazuri, se consideră cea mai bună practică setarea atributului for pentru a ne asigura că toate tehnologiile de asistență înțeleg relația dintre etichetă și widget.

Dacă nu există o etichetă sau dacă controlul formularului nu este asociat implicit sau explicit cu o etichetă, un screenreader va citi ceva de genul „Editează textul gol”, ceea ce nu este deloc util.

Un alt avantaj al setării etichetelor corect, este că puteți da clic sau atinge eticheta pentru a activa widget-ul corespunzător. Acest lucru este util pentru controale precum intrările de text, unde puteți face clic pe etichetă, precum și pentru focalizarea acesteia (focus), dar este util în special pentru butoanele radio și casetele de selectare - zona de activare a unui astfel de control poate fi foarte mică, așa că este util pentru a-l activa cât mai ușor.

In exemplul de mai jos, daca facem clic pe eticheta "Prefer ciresele", vom comuta la starea selectată din caseta de selectare taste_cherry:

🔧 Exemplu: Pagina HTML

Etichete multiple

În mod strict, putem pune mai multe etichete pe un singur widget, dar aceasta nu este o idee bună, deoarece unele tehnologii de asistență pot avea probleme în gestionarea lor. În cazul mai multor etichete, ar trebui să imbricam un widget și etichetele acestuia în interiorul unui singur element <label>.

Sa ne uitam la exemplul urmator:

<p>Câmpurile obligatorii sunt urmate de <abbr title="required">*</abbr>.</p>

  <!‐‐ Varianta 1 ‐‐>
  <div>
    <label for="username">Nume:</label>
    <input type="text" name="username">
    <label for="username"><abbr title="required" aria-label="required">*</abbr></label>
  </div>

  <!‐‐ Varianta 2 - ceva mai buna ‐‐>
  <div>
    <label for="username">
      <span>Nume:</span>
      <input id="username" type="text" name="username">
      <abbr title="required" aria-label="required">*</abbr>
    </label>
  </div>

  <!‐‐ Varianta 3 - probabil cea mai buna ‐‐>
  <div>
    <label for="username">Nume: <abbr title="required" aria-label="required">*</abbr></label>
    <input id="username" type="text" name="username">
  </div>

Puteti vedea cele trei variante in imaginea de mai jos:

etichete labels multiple

Paragraful din partea de sus prevede o regulă pentru elementele obligatorii.

Regula trebuie inclusă înainte de a fi utilizată, astfel încât utilizatorii cu vedere buna și utilizatorii de tehnologii de asistență, cum ar fi screenreaders, să învețe ce înseamnă, înainte de a întâlni un element obligatoriu.

Deși acest lucru ajută la informarea utilizatorilor despre ce înseamnă un asterisc, nu ne putem baza pe acest lucru. Un cititor de ecran va vorbi un asterisc ca "stea" atunci când il întâlneste.

Când un utilizator cu vedere buna, plaseaza cursorul mouse-ului deasupra , ar trebui să apară textul "required" (obligatoriu), datorita utilizarii atributului title.

Titlurile care sunt citite cu voce tare depind de setările cititorului de ecran, astfel încât este mai de încredere să includem și atributul aria-label, care este citit întotdeauna de screenreaders.

Variantele de mai sus, cresc în eficiență de sus in jos:

Structuri HTML comune utilizate pentru formulare

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

După cum puteți vedea în exemple, este o practică obișnuită să înfășurați o etichetă și widget-ul ei cu un element <li> într-o listă <ul> sau <ol>. Elementele <p> și <div> sunt de asemenea utilizate frecvent. Listele sunt recomandate pentru structurarea mai multor casete de selectare sau butoane radio.

În plus față de elementul <fieldset>, este de asemenea o practică obișnuită să folosești titluri HTML (de exemplu, <h1>, <h2>) și elemente de secționare (de exemplu, <section>) pentru a structura formulare complexe.

De asemenea, putem construi un formular si cu ajutorul tabelelor HTML, cu precizarea ca elementul form, trebuie sa se afle intotdeauna, in afara elementului table, dar aceasta metoda nu este recomandata decit in cazuri speciale.

<form action="" method="" id="myForm" name="myForm">
  <table>   
   ...
  </table>  
</form>

Mai presus de toate, depinde de dvs. să găsiți un stil de codare confortabil care să conducă la forme accesibile și utilizabile. Sectiunile cu funcționalitate diferita ar trebui să fie conținute într-un element separat <section>, cu elemente <fieldset> pentru zonele cu butoane radio.

Exemplu de formular realizat cu ajutorul unui tabel HTML:

formular web inclus in tabel HTML

In exemplul de mai jos puteti vedea cum este realizat un formular de plata:

🔧 Exemplu formular de plata

Controale native pentru formulare

Am întâlnit deja câteva elemente de formular, inclusiv <form>, <fieldset>, <legend>, <textarea>, <label>, <button> și <input>.

In continuare ne vom ocupa de alte tipuri de intrare cum sunt: button, checkbox, file, hidden, image, password, radio, reset, submit, și text si de o serie de atribute comune tuturor tipurilor de controale de formular.

Câmpuri de introducere text

Câmpurile input de text, sunt cele mai de bază widgeturi de formular. Acestea sunt o modalitate foarte convenabilă de a permite utilizatorului, să introducă orice fel de date și am văzut deja câteva exemple simple.

Toate controalele de bază ale textului împărtășesc unele comportamente comune:

☞ Elementul <input> este unic printre elementele HTML, deoarece poate lua multe forme diferite, în funcție de valoarea atributului type. Este utilizat pentru crearea celor mai multe tipuri de widget-uri de formular, inclusiv câmpuri de text cu o singură linie, controale de oră și dată, controale fără introducere de text, cum ar fi casete de selectare, butoane radio și selecție de culori și butoane.

Câmpuri text cu o singură linie

Un câmp de text cu o singură linie, este creat folosind un element input a cărui valoare de atribut type este setată la text sau prin omiterea cu totul a atributului tip (textul fiind valoarea implicită). Textul value pentru acest atribut este, de asemenea, valoarea de rezervă, dacă valoarea specificată pentru atributul tip este necunoscută de browser (de exemplu, dacă specificați type = "color" și browserul nu acceptă selectarea culorilor).

🔧 Exemple de cimpuri text cu o singura linie

Sa ne uitam acum la un exemplu de câmp de text, cu o singură linie:

<input type="text" id="comment" name="comment" value="Sunt un cimp text">

Câmpurile de text cu o singură linie au o singură constrângere: dacă introduceți text cu ruperi de linie, browserul elimină aceste ruperi de linie înainte de a trimite datele către server.

Câmp pentru parola

Unul dintre primele tipuri de intrare a fost tipul de câmp text pentru parolă:

<input type="password" id="pwd" name="pwd">

Valoarea parolei nu adaugă nicio restricție specială textului introdus, dar ascunde valoarea introdusă în câmp (de exemplu, cu puncte sau asteriscuri), astfel încât sa nu poata fi citită cu ușurință de alții.

Rețineți că aceasta este doar o caracteristică a interfeței cu utilizatorul, cu excepția cazului în care trimiteți formularul în conditii de securitate, acesta va fi trimis în text simplu, ceea ce este rău pentru securitate - persoane rău intenționate pot intercepta datele și ar putea fura parole, detalii despre cardul de credit sau orice altceva ați trimis. Pentru a proteja utilizatorii de aceste probleme trebuie să rulezi paginile care implică formulare, printr-o conexiune sigură (care utilizeaza protocolul https: // ...), astfel încât datele să fie criptate înainte de a fi trimise.

Browserele recunosc implicațiile de securitate ale trimiterii datelor formularului printr-o conexiune nesigură și au avertizări pentru a descuraja utilizatorii să folosească formulare nesigure.

Conținut ascuns

Acesta este utilizat pentru a crea un control de formular, care este invizibil pentru utilizator, dar este totuși trimis la server împreună cu restul datelor de formular - de exemplu, poate doriți să trimiteți ora la care o comanda a fost plasata (ora serverului. Deoarece este ascuns, utilizatorul nu poate vedea și nici edita valoarea, nu va primi niciodată focalizare, iar un cititor de ecran nu va observa nimic.

<input type="hidden" id="timestamp" name="timestamp" value="214900512">

Pentru un astfel de element, trebuie să setați atributele name si value. Tipul de intrare ascuns nu trebuie să aibă o etichetă asociată.

Alte tipuri de controale text, cum ar fi search, url și tel, au fost introduse in HTML5 si vom discuta despre acestea mai tirziu.

Casete de selectare și butoane radio

Acestea sunt controale, a căror stare poate fi modificata făcând clic pe ele sau pe etichetele asociate. Există două tipuri: caseta de selectare și butonul radio. Ambele folosesc atributul checked (bifat) pentru a indica dacă widgetul este cel implicit sau nu.

Este demn de remarcat faptul că aceste widget-uri nu se comportă la fel ca alte widget-uri de formular. Pentru majoritatea widget-urilor de formular, odată trimis formularul, sunt trimise toate widget-urile care au un atribut nume, chiar dacă nu a fost completată nicio valoare. În cazul casetelor de selectare și butoanelor radio, valorile lor sunt trimise numai dacă sunt bifate. Dacă nu sunt bifate, nu se trimite nimic, nici măcar numele lor. Dacă sunt bifate, dar nu au nicio valoare, numele este trimis cu valoarea activat.

🔧 Exemple de casete de selectare și butoane radio.

Pentru o utilizare / accesibilitate maximă, se recomandă să înfasuram fiecare listă de articole sau optiuni similare într-un <fieldset>, cu o <legendă> care sa ofere o descriere generală a listei. Fiecare pereche de elemente <label> / <input> ar trebui să fie conținută în propria listă.

Caseta de selectare

O casetă de selectare este creată folosind elementul input cu un atribut de tip setat cu valoarea checkbox.

<input type="checkbox" id="mere" name="mere" value="mere" checked>

Includerea atributului checked afiseaza o caseta selectata (bifata) automat la încărcarea paginii. Cind facem clic pe caseta de selectare sau pe eticheta asociată, activam sau dezactivam caseta.

Datorită naturii on-off a casetelor de selectare, sunt considerate un butoane de comutare, motiv pentru care mulți dezvoltatori și designeri modifica stilizarea implicita, pentru a crea butoane care arată precum comutatoarele, asa cum puteti vedea in exemplul de mai jos:

🔧 Exemplu caseta de selectare stilizata

Buton radio

Un buton radio este creat folosind elementul input cu atributul său de tip setat la valoarea radio:

<input type="radio" id="mere" name="fructe" checked>

Mai multe butoane radio pot fi legate între ele. Dacă au aceeași valoare pentru atributul lor de nume, vor fi considerate ca fiind în același grup. Doar un singur buton dintr-un grup dat poate fi bifat, acest lucru înseamnă că, atunci când unul dintre ele este bifat, toate celelalte sunt debifate automat. Când formularul este trimis, doar valoarea butonului radio bifat este trimisă. Dacă niciunul dintre ele nu este bifat, întregul grup de butoane radio este considerat într-o stare necunoscută și nu se trimite nicio valoare odata cu formularul. Odată ce unul dintre butoanele radio dintr-un grup de butoane este bifat, nu este posibil ca utilizatorul să debifeze toate butoanele fără a reseta formularul.

🔧 Exemple de butoane radio

Butonul radio nu este de fapt un buton, în ciuda numelui - hai să mergem mai departe și să ne uităm la butoanele reale! Există trei tipuri de intrare (input) care produc butoane:

submit - <button type="submit">
Trimite datele formularului către server. Pentru elementele <button>, omiterea atributului type (sau o valoare nevalidă a acestuia) are ca rezultat un buton de trimitere.
reset - <button type="reset">
Resetează toate widgeturile de formular la valorile lor implicite.
button - <button type="button">
Butoane care nu au efect automat, dar pot fi personalizate folosind cod JavaScript.

În plus, elementul <input> poate lua un atribut type pentru a imita aceste trei tipuri de intrare. Principala diferență între cele două este că elementele <button> sunt mult mai stilizabile.

Mai jos puteți vedea exemple pentru fiecare tip de buton:

🔧 Exemplu: Pagina HTML

submit

<button type="submit">
    Acesta este un buton<strong>submit</strong>
</button>

<input type="submit" value="Acesta este un buton submit">

reset

<button type="reset">
    Acesta este un buton<strong>reset</strong>
</button>

<input type="reset" value="Acesta este un buton reset">

anonymous

<button type="button">
    Acesta este un buton <strong>anonymous</strong>
</button>

<input type="button" value="Acesta este un buton anonymous">

Butoanele se comportă întotdeauna la fel, fie că utilizam un element button sau un element input. După cum puteți vedea din exemple, elementele button vă permit să utilizați HTML în conținutul lor, care este inserat între deschiderea și închiderea etichetelor <button>...</button>. Elementele input pe de altă parte sunt elemente goale, conținutul afișat este inserat în atributul value și prin urmare, acceptă doar text simplu.

Buton imagine

Butonul imagine este redat exact ca un element <img>, cu excepția faptului că atunci când utilizatorul face clic pe acesta, se comportă ca un buton de trimitere.

Un buton imagine este creat folosind un element input cu atributul său de tip setat la valoarea image. Acest element acceptă exact același set de atribute ca elementul <img>, plus toate atributele acceptate de alte butoane de formular.

<input type="image" alt="Clic aici!" src="imagine.png" width="75" height="30">

File picker - Selector de fișiere

Există un ultim tip input - tipul de selectare a fișierului. Formularele pot trimite fișiere pe un server. Widget-ul de selecție de fișiere poate fi utilizat pentru a alege unul sau mai multe fișiere de trimis.

Pentru a crea un widget picker de fișiere, utilizam elementul input cu atributul său de tip setat la file (fișier). Tipurile de fișiere acceptate pot fi restricționate folosind atributul accept. În plus, dacă doriți să permiteți utilizatorului să aleagă mai mult de un fișier, puteți face acest lucru adăugând atributul multiple.

În exemplul de mai jos, este creat un selector de fișiere care solicită fișiere grafice. Utilizatorul poate să selecteze mai multe fișiere în acest caz:

<input type="file" name="file" id="file" accept="image/*" multiple>

Pe unele dispozitive mobile, selectorul de fișiere poate accesa fotografii, videoclipuri și audio capturate direct de camera și microfonul dispozitivului adăugând informații de capturare la atributul accept ca atare:

<input type="file" accept="image/*;capture=camera">
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

Atribute comune

Multe dintre elementele utilizate pentru definirea controalelor de formular au propriile lor atribute specifice. Cu toate acestea, există un set de atribute comune tuturor elementelor de formular. Ați întâlnit deja unele dintre acestea, dar mai jos este o listă a acestor atribute comune, pentru referința dvs.:

Tipuri de intrare HTML5

În articolul anterior am analizat elementul input, care acoperă valorile originale ale atributului tip, disponibile încă din primele zile ale HTML-ului. Acum vom analiza în detaliu funcționalitatea controalelor de formulare mai noi, inclusiv unele tipuri de intrare noi, care au fost adăugate în HTML5 pentru a permite colectarea de tipuri de date specifice.

Câmpul adresei de e-mail

<input type="email" id="email" name="email">

validare email in browser

Când este utilizat acest tip, utilizatorul este obligat să tasteze o adresă de e-mail validă. Orice alt conținut determină browserul să afișeze o eroare la trimiterea formularului.

De asemenea, puteți utiliza atributul multiple în combinație cu tipul de intrare de e-mail pentru a permite introducerea mai multor adrese de e-mail în aceeași intrare (separate prin virgule):

<input type="email" id="email" name="email" multiple>

Validare pe partea de client

După cum puteți vedea in imaginea de mai sus, intrarea pentru e-mail este in chenar rosu, pentru ca nu am introdus o adresa de e-mail valida, iar validarea erorilor din partea clientului este efectuată de browser înainte ca datele să fie trimise serverului. Este un ajutor util pentru a ghida utilizatorii să completeze un formular cu acuratețe.

Aceasta masura de securitate este una superficiala! Aplicațiile dvs. ar trebui să efectueze întotdeauna verificări de securitate, pentru orice date trimise de formular atât din partea serverului, cât și din partea clientului, deoarece validarea din partea clientului este prea ușor de dezactivat, astfel încât utilizatorii rau intentionati, pot trimite cu ușurință date malitioase către server.

Rețineți că a @ b este o adresă de e-mail validă în funcție de restricțiile implicite furnizate. Acest lucru se datorează faptului că tipul de introducere prin e-mail permite în mod implicit adresele de e-mail intranet. Pentru a implementa diferite comportamente de validare, puteți utiliza atributul pattern și puteți personaliza, de asemenea, mesajele de eroare - vom discuta despre cum să utilizăm aceste funcții ceva mai tirziu.

Câmpul de căutare

Câmpurile de căutare sunt utilizate pentru a crea căsuțe de căutare în pagini și aplicații. Acest tip de câmp este setat folosind valoarea search pentru atributul tip:

<input type="search" id="search" name="search">

Principala diferență între un câmp de text și un câmp de căutare este modul în care browserul stilizeaza aspectul acestora. Adesea, câmpurile de căutare sunt redate cu colțuri rotunjite, de asemenea, afișează uneori un "Ⓧ", care șterge valoarea introdusa atunci când faceți clic.

Câmpul numărului de telefon

Un câmp special pentru completarea numerelor de telefon poate fi creat folosind tel ca valoare a atributului de tip:

<input type="tel" id="tel" name="tel">

Când este accesat prin intermediul unui dispozitiv tactil cu o tastatură dinamică, majoritatea dispozitivelor vor afișa o tastatură numerică atunci când se întâlnește type="tel".

Datorită numeroaselor formate de numere de telefon din întreaga lume, acest tip de câmp nu impune nicio restricție asupra valorii introduse de un utilizator (se pot introduce inclusiv litere).

Așa cum am menționat anterior, atributul pattern poate fi utilizat pentru a impune constrângeri.

Câmpul URL

Se poate crea un tip special de câmp pentru introducerea adreselor URL folosind url ca valoare pentru atributul type:

<input type="url" id="url" name="url">

Acesta adaugă constrângeri speciale de validare a câmpului. Browserul va raporta o eroare dacă nu este introdus niciun protocol (cum ar fi http:) sau dacă URL-ul nu are o forma corecta.

Câmpul numeric

Controale pentru introducerea numerelor, se pot crea cu un tipul de input number. Acest control arată ca un câmp de text, dar permite doar introducerea de numere și de obicei, afiseaza butoane pentru a crește sau a scădea valoarea introdusa.

Cu tipul de introducere a numărului, puteți restricționa valorile minime și maxime permise prin setarea atributelor min și max.

Puteți utiliza, de asemenea, atributul step (pas) pentru a seta creșterea și scăderea valorii cind sunt apăsate butoanele afisate. În mod implicit, tipul de introducere a numărului se validează numai dacă numărul este un număr întreg. Pentru a permite numere cu virgulă, specificați step="any". Dacă este omisă, valoarea pasului implicită este 1, adică sunt valide doar numere întregi.

Să ne uităm la câteva exemple. Primul creează un control de număr a cărui valoare este restricționată la orice valoare cuprinsă între 1 și 100 și ale cărui butoane de creștere și scădere schimbă valoarea cu 2.

<input type="number" name="age" id="age" min="1" max="100" step="2">

Cel de-al doilea creează un control al numărului a cărui valoare este restricționată la orice valoare între 0 și 1 inclusiv și ale cărui butoane de creștere și scădere schimbă valoarea cu 0,01.

<input type="number" name="change" id="pennies" min="0" max="1" step="0.01">

Tipul de introducere a numărului are sens, atunci când intervalul de valori valabile este limitat, de exemplu vârsta sau înălțimea unei persoane.

Controale glisante

Un alt mod de a alege un număr este de a utiliza un glisor. Le vedeți destul de des pe site-uri și vă oferă posibilitatea să setați o valoare minimă sau maximă. Să ne uităm la un exemplu live pentru a ilustra acest lucru:

🔧 Exemplu control glisant

Glisoarele sunt mai puțin precise decât câmpurile de text. Prin urmare, sunt utilizate pentru a alege un număr a cărui valoare precisă nu este neapărat importantă.

Este important să configurați corect glisorul. În acest scop, este recomandat să setați atributele min, max și step.

<input type="range" id="myRange" name="demo" min="1" max="1000" value="500" class="slider">

O problemă cu glisoarele este că, acestea nu oferă niciun fel de feedback vizual în ceea ce privește valoarea actuală. Acesta este motivul pentru care am inclus citeva linii de cod javascript in exemplul nostru.

<script>
  var slider = document.getElementById("myRange");
  var output = document.getElementById("demo");
  output.innerHTML = slider.value;

    slider.oninput = function() {
    output.innerHTML = this.value;
  }
</script>

Selector de data și ora

Obținerea valorilor datei și orei a fost în mod tradițional un coșmar pentru dezvoltatorii web. Pentru o experiență bună a utilizatorului, este important să furnizați o interfață de utilizator de selectare a calendarului, care să permită utilizatorilor să selecteze datele fără a fi nevoie de trecerea la o aplicație de calendar nativă sau de a le introduce în formate diferite greu de analizat.

Sunt disponibile controale de date HTML pentru a gestiona acest tip de date specifice, oferind widget-uri din calendar și uniformizând datele.

Un control de dată și oră este creat folosind elementul input și o valoare adecvată pentru atributul tip, în funcție de ce doriți să colectați, date, ore sau ambele. Iată un exemplu live care utilizeaza elementele select:

🔧 Exemplu elemente select

Rețineți că utilizarea acestor tipuri este destul de complexă, în special daca avem în vedere suportul browserului. Pentru a afla detaliile complete, puteți vizita MDN web docs.

Să analizăm pe scurt diferitele tipuri disponibile:

datetime-local

Creează un widget pentru afișarea și alegerea datei cu orei, fără informații specifice despre fusul orar.

<input type="datetime-local" name="datetime" id="datetime">

month

Creează un widget pentru a afișa și alege o lună și un an.

<input type="month" name="month" id="month">

time

Creează un widget pentru a afișa și alege o valoare de timp.

<input type="time" name="time" id="time">

week

Creează un widget pentru a afișa și alege un o săptămâna și un an.

<input type="week" name="week" id="week">

Limitarea valorilor datei / orei

Toate controalele de dată și oră pot fi restricționate folosind atributele min și max, fiind posibilă restrângerea suplimentară prin atributul step (a cărui valoare este dată în secunde).

<label for="myDate">Cind esti disponibil in aceasta vara?</label>
<input type="date" name="myDate" min="2020-06-01" max="2020-08-31" step="3600" id="myDate">

Suport browser pentru intrări date / ora

Trebuie să stiți că widget-urile pentru data și ora nu au cel mai bun suport pentru browsere. În momentul de față, Chrome, Firefox, Edge și Opera le acceptă bine, dar nu există suport pentru versiuni mai vechi de Internet Explorer.

Controlul selectorului de culoare

Culorile sunt întotdeauna un pic dificil de manipulat. Există multe modalități de exprimare a acestora: valori RGB (zecimale sau hexadecimale), valori HSL, cuvinte cheie etc.

Se poate crea un control de culoare folosind elementul input cu atributul său de tip setat la valoarea color:

<input type="color" name="color" id="color">

Când este acceptat, daca facem clic pe un control de culoare, va fi afișata funcționalitatea implicită de selectare a culorilor, din sistemul de operare cu care lucrati.

Mai jos este un exemplu live:

Alte controale de formular

Câmpuri text cu mai multe linii

Un câmp text cu mai multe linii este specificat folosind un element <textarea>, si nu prin utilizarea elementului input .

<textarea name="textarea" cols="50" rows="4">Scrie ceva aici</textarea>

Diferența principală dintre un câmp textarea și un câmp de text cu o singură linie, este că utilizatorii au voie să includă ruperi de linie apăsând enter si acestea vor fi incluse la trimiterea datelor.

Textarea are și o etichetă de închidere și orice text pe care doriți să îl conțină, ar trebui să fie plasat între etichetele de deschidere și închidere. În schimb, input este un element gol, fără marcaj de închidere - orice valoare implicită este plasată în valoarea atributului.

Rețineți că, deși puteți pune orice în interiorul unui element textarea (inclusiv alte elemente HTML, CSS și JavaScript), datorită naturii sale, totul este redat ca și cum ar fi conținut text simplu. Folosirea atributului contenteditable oferă un API pentru capturarea de conținut HTML / „bogat” în loc de text simplu.

Vizual, textul este înfășurat, iar formularul poate fi redimensionat în mod implicit. Browserele moderne oferă un mâner de glisare pe care îl puteți trage pentru a crește / micșora dimensiunea zonei de text.

Controlul redării liniilor multiple

textarea acceptă trei atribute pentru a controla redarea textului pe mai multe linii:

cols
Specifică lățimea vizibilă (coloane) a controlului text, măsurată în lățimi medii de caractere. Aceasta este efectiv lățimea de pornire, deoarece poate fi modificată prin redimensionarea textarea și supraîncărcarea folosind CSS. Valoarea implicită dacă nu este specificată niciuna este de 30.
rows
Specifică numărul de rânduri de text vizibile. Aceasta este în mod efectiv înălțimea de pornire, deoarece poate fi modificată prin redimensionarea textarea și supraîncărcarea folosind CSS. Valoarea implicită dacă nu este specificată niciuna este de 10.
wrap
Specifică modul în care este înfășurat textul. Valorile acceptate sunt hard, soft și off. Valoarea off, nu creeaza ruperi de linii si determina afisarea unei bare de scroll orizontale.

Controlul redimensionării textarea

Abilitatea de redimensionare a unui control textarea este controlată cu proprietați de redimensionare CSS. Valorile posibile sunt:

Control derulant - Drop-down controls

Controalele derulante sunt o modalitate simplă de a permite utilizatorilor să selecteze din mai multe opțiuni diferite, fără a ocupa mult spațiu în interfața cu utilizatorul. HTML are două forme de conținut derulant: caseta de selectare (select box) și caseta cu completare automată (autocomplete box). În ambele cazuri interacțiunea este aceeași - odată ce controlul este activat, browserul afișează o listă de valori din care utilizatorul poate alege.

Puteti vedea mai multe exemple in editorul de mai jos.

🔧 Exemple de controale derulante HTML

Caseta de selectare

O casetă de selectare simplă, este creată cu un element <select> și cu unul sau mai multe elemente <option> drept copii ai săi, fiecare dintre acestea specificând una dintre valorile sale posibile: 

<select id="simple" name="simple">
  <option>Mere</option>
  <option selected>Pere</option>
  <option>Prune</option>
</select>

Dacă este necesar, valoarea implicită pentru caseta de selectare poate fi setată folosind atributul selected pe elementul <option> dorit - această opțiune este apoi preselectată atunci când se încarcă pagina.

Elementele <option> pot fi înfășurate (îmbricate) în interiorul elementelor <optgroup> pentru a crea grupuri de valori asociate vizual:

<select id="groups" name="groups">
  <optgroup label="fructe">
    <option>Mere</option>
    <option selected>Pere</option>
    <option>Prune</option>
  </optgroup>
  <optgroup label="legume">
    <option>Morcovi</option>
    <option>Cartofi</option>
    <option>Sfecla</option>
  </optgroup>
</select>

Pe elementul optgroup, valoarea atributului label este afișată înaintea valorilor opțiunilor imbricate. Browserul stilizeaza diferit continutul elementului label, astfel încât acestea nu pot să fie confundate cu opțiunile reale.

Dacă un element option are un atribut valoric explicit setat pe acesta, acea valoare este trimisă atunci când formularul este trimis cu opțiunea selectată. Dacă atributul value este omis, la fel ca în exemplele de mai sus, conținutul elementului option este utilizat ca valoare. Așadar, atributele valorice nu sunt necesare, dar este posibil să găsiți un motiv, pentru a trimite o valoare prescurtată sau diferită către server, decât ceea ce este afișat vizual în optiunea selectată.

De exemplu:

<select id="simple" name="simple">
  <option value="mere">Mere Golden mari si frumoase</option>
  <option value="prune">Prune President, coapte si suculente</option>
  <option value="pere">Pere Williams cu pulpă albă, suculentă, aromată</option>
</select>

În mod implicit, înălțimea casetei de selectare este suficientă pentru a afișa o singură valoare. Atributul opțional de dimensiune size, oferă mai mult control in ceea ce priveste opțiunile vizibile, atunci când selecția nu are focalizare.

Caseta de selectare cu opțiuni multiple

În mod implicit, o casetă de selectare permite utilizatorului să selecteze o singură valoare. Prin adăugarea atributului multiple la elementul select, puteți permite utilizatorilor să selecteze mai multe valori, folosind mecanismul implicit furnizat de sistemul de operare (de exemplu, ținând apăsată tasta Ctrl și făcând clic pe mai multe valori).

<select id="multi" name="multi" multiple size="2">
  <optgroup label="fructe">
    <option>Mere</option>
    <option selected>Pere</option>
    <option>Prune</option>
  </optgroup>
  <optgroup label="legume">
    <option>Morcovi</option>
    <option>Cartofi</option>
    <option>Sfecla</option>
  </optgroup>
</select>

☞ În cazul casetelor de selectare cu mai multe opțiuni, veți observa cum caseta de selectare, nu mai afișează valorile derulant - în schimb, toate valorile sunt afișate simultan într-o listă, atributul opțional de mărime size determinând înălțimea widget-ului. Toate browserele care acceptă elementul select acceptă, de asemenea, atributul multiple.

Caseta cu completare automată

Puteți furniza valori sugerate, completate automat pentru widget-urile de formular utilizând elementul <datalist> cu elemente <option> copil, pentru a specifica valorile de afișat. Datalist trebuie să primeasca un ID.

Lista de date este apoi legată de un element <input> (de exemplu, intrare text sau un tip de intrare e-mail) folosind atributul list, a cărui valoare este id-ul listei de date, de care se leagă.

Odată ce o listă de date este afiliată cu un widget de formular, opțiunile sale sunt utilizate pentru a completa automatul textul introdus de utilizator; de obicei, aceasta este prezentată utilizatorului ca o casetă derulantă care prezintă potrivirile pentru ceea ce a introdus la intrare.

Sa ne uitam la un exemplu:

<label for="myFruit">Care sunt fructele preferate?</label>
  <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
    <datalist id="mySuggestion">
      <option>Mere</option>
      <option>Pere</option>
      <option>Prune</option>
      <option>Caise</option>
      <option>Kiwi</option>
      <option>Piersici</option>
      <option>Banane</option>
      <option>Cirese</option>
    </datalist>

Contoare și bare de progres

Bare de progres

Contoarele și barele de progres sunt reprezentări vizuale ale valorilor numerice.

O bară de progres reprezintă o valoare care se schimbă în timp până la o valoare maximă specificată de atributul max. O astfel de bară este creată folosind un element <progress>:

<progress max="100" value="75">75/100</progress>
75/100

Se utilizeaza pentru orice lucru care necesită raportarea progresului, cum ar fi procentul total de fișiere descărcate sau numărul de întrebări completate într-un chestionar.

Conținutul din elementul progress este o alternativa pentru browserele care nu acceptă elementul și pentru cititoarele de ecran care vor citi si reda sonor.

Contoare

O bară a contorului reprezintă o valoare fixă într-un interval delimitat de valorile min și max. Această valoare este redată vizual ca o bară și, pentru a ști cum arată această bară, comparăm valoarea cu alte valori setate:

Toate browserele care implementează elementul meter folosesc aceste valori pentru a schimba culoarea barei contorului:

O astfel de bară este creată folosind un element <meter>. Aceasta este pentru implementarea oricărui tip de contor, de exemplu o bară care arată spațiul total utilizat pe un disc, care devine roșu când începe să se umple.

<meter min="0" max="100" value="50" low="33" high="66" optimum="50">75</meter>
<meter min="0" max="100" value="70" low="33" high="66" optimum="50">70</meter>
<meter min="0" max="100" value="90" low="33" high="66" optimum="32">90</meter>
  • 50
  • 70
  • 90

Conținutul din interiorul elementului meter este o alternativa pentru browserele care nu acceptă elementul și pentru tehnologiile de asistență pentru vocalizarea acestuia.

🧠 Quiz - HTML: Formulare web

Formulare web 2 ➔

Top