Formulare online

Formularele fac Internetul. Ele sunt poate cel mai critic element în crearea unei experiențe interactive pentru utilizatorii finali și vă permit să primiți informații. Formularele definesc locuri dintr-o pagină în care interacțiunea utilizatorului poate adăuga, modifica, interacționa cu sau elimina datele din sistemul dvs. Acțiunile și câmpurile pe care le permiteți în formularul dvs. determină ce poate să facă utilizatorul și ce informații are voie să vadă.

Elementele de formular variază de la casete cu stil de nume de utilizator și parolă la câmpuri mari de text, liste derulante, casete de selectare și multe altele. Toate elementele dintr-un bloc de formular sunt trimise din acea pagină către atributul de destinație al declarației de formular, numit acțiune. Când utilizatorul accesează și trimite, aceste informații sunt apoi puse la dispoziție într-unul din mai multe moduri pentru pagina sau scriptul de primire.

Pentru a crea o secțiune de formular, oferim formularului un nume, un id, o acțiune și o metodă. Un exemplu cu atribute goale arată astfel:

<form name="" id="" action="" method=""></form>

Numele și id-ul formularului nostru sunt modul în care ne vom referi la el în codul nostru atunci când interacționăm cu el folosind CSS, JavaScript sau alte limbaje. Acțiunea este locul în care pagina ar trebui să trimită informațiile (și unde va merge browserul când apăsăm pe trimitere). Metoda noastră este modul în care ne vom trimite informațiile, folosind fie GET, fie POST.

Get

Trimiterea datelor folosind metoda get plasează toate câmpurile formularului după nume și valoare (numite pereche cheie și valoare) în bara de adrese, ceea ce face URI-ul nostru mai lung, adăugând fiecare articol la adresa paginii de primire. O modalitate ușoară de a reține acest lucru este că utilizatorul să vadă informațiile care au fost trimise, așa cum vor apărea în bara de adrese din partea de sus a browserului. Avantajul utilizării metodei get este că destinația poate fi marcată cu datele care au fost trimise. Prin urmare, dacă formularul dvs. este folosit pentru a căuta într-o bibliotecă și pentru a filtra rezultatele, puteți salva rezultatul ca marcaj și puteți reveni la pagină în viitor, văzând aceleași rezultate fără a completa formularul din nou.

Deși este benefic, există două situații în care NU dorim să folosim get: fie nu dorim ca utilizatorul (sau nimeni) să vadă ce a fost trimis, cum ar fi parole sau informații confidențiale, fie vrem să trimitem multe informații . Există o limită practică a câte date pot fi transmise în mod fiabil și sigur folosind get, deși nu există un plafon oficial. Limitele practice sunt cele create de capacitatea browserului sau a serverului de a stoca informațiile trimise.

Când dezvoltați solicitări get mari, determinați ce browsere doriți să acceptați și cât de vechi sunt, și aflați care dintre cele mai vechi are cel mai mic prag maxim.

Post

Datele postate sunt trimise din browser către server în fundal, deoarece clientul și serverul încep să vorbească mai întâi. Datele sunt trimise în anteturile comunicării și nu sunt vizibile pentru utilizatorul final. Paginile marcate cu metoda post nu vor avea acces la informații ulterior, iar informațiile respective se pierd dacă utilizatorul părăsește pagina.

Cum sunt utilizate datele și valorile sau conținutul nou returnat ne aduc la limbajele de scripting.

Câmpuri formular

Când este redată o pagină web cu un formular, putem identifica un câmp specific cu care utilizatorul poate începe. Este posibil să fi experimentat acest lucru în acțiune când încărcați un site web și găsiți cursorul deja într-o casetă de text. Aceasta este focalizarea automată. Pentru a include această funcție, adăugați pur și simplu atributul autofocus la câmpul de care utilizatorul îl va dori sau de care va avea nevoie mai întâi. De asemenea, putem aplica substituenți în câmpurile noastre de text care îi spun utilizatorului ce vrem să introducă cu atributul substituent. Pentru început, vom adăuga o introducere de text în interiorul etichetelor noastre de formular pentru un câmp de nume:

<form name="" id="" action="" method="">
<input type="text" placeholder="Prenumele
tău" autofocus
name="name" />
</form>

Multe dintre noile elemente ale HTML5 pe care le analizăm ne vor ajuta și în sarcinile noastre de validare, pe măsură ce utilizatorii completează formulare. Aceste intrări vor încerca să valideze și/sau să limiteze intrarea utilizatorului la doar date valide. Făcând acest lucru imediat, creăm o experiență mai bună atât pentru utilizator, cât și pentru programator. În mod tradițional, validarea trebuia făcută atunci când datele au fost trimise către server, ceea ce duce la reîncărcarea paginii dacă existau erori. Cealaltă abordare populară a fost să efectueze validarea utilizând JavaScript pe partea client (evitând reîncărcarea), dar validarea ar trebui să fie repetată pe server în cazul în care utilizatorul final avea JavaScript dezactivat. Unele dintre cele mai utile tipuri de intrare sunt următoarele:

<input type=”url”> Va încerca să formateze textul utilizatorului într-un link adecvat sau să afișeze o eroare.

<input type=”email”> Se va asigura că un e-mail introdus este în format corespunzător sau va afișa o eroare.

De asemenea, putem crea o intrare care limitează valorile la un interval fix și limitările de increment, pe care obișnuiam să le afișam utilizatorului pe pagină și apoi să le validăm după introducere:

<input type="range" min="10" max="50" step="5" value="30">

Aceste limite pentru un interval (afișat sub formă de glisor) sunt valabile și pentru un câmp numeric (prezentat sub formă de săgeți):

<input type="number" min="10" max="50" step="5" value="30">

HTML5 introduce, de asemenea, o multitudine de controale pentru calendar și timp. Putem specifica o dată, o săptămână sau o lună, precum și o oră, o zi și o oră și o zi și ora locală. Fiecare dintre aceste câmpuri va limita intrarea utilizatorului la câmpuri valide pentru acel tip.

Opțiuni de calendar:

<input type="date" name="date"/>
<input type="week" name="week"/>
<input type="month" name="month"/>

Opțiuni de timp:

<input type="time" name="time"/>
<input type="datetime" name="dateTime"/>
<input type="datetime-local" name="localDateTime"/>

Sursa: Michael Mendez, The Missing Link – An Introduction to Web Development and Programming (CC BY-NC-SA 3.0 License), Published by Open SUNY Textbooks, Milne Library (IITG PI), State University of New York at Geneseo. Traducere de Nicolae Sfetcu