Formă

Formular redat de Opera (făcând clic pe imagine veți găsi codul HTML folosit pentru a-l genera). Subelementele, de sus în jos, sunt: casetă de text , selecție unică , meniu derulant , casetă de selectare , zonă de text , buton de trimitere , toate inserate într-un tabel .

În informatică , termenul formular (literal formular , modul ^[1] ) indică partea de interfață cu utilizatorul a unei aplicații web care permite utilizatorului client să introducă și să trimită către serverul web / serverul de aplicații una sau mai multe date tastate liber de același pe tastatură prin utilizarea componentelor grafice numite widget-uri prezente pe interfața însăși; pentru a o descrie, poate fi utilă metafora „ formularului care trebuie completat ” pentru introducerea datelor. În majoritatea cazurilor, termenul se referă la formularele conținute pe o pagină web : de exemplu, casetele de text și meniurile derulante ale unei pagini de înregistrare sau autentificare constituie un formular.

Descriere

Mai precis, elementul HTML <FORM> este utilizat pentru a construi formulare pe o pagină web . În HTML, butoanele de restaurare sau ștergere și trimitere sunt, de asemenea, considerate parte a formularului. Formularele sunt de obicei utilizate pentru a trimite date către un server de baze de date sau pentru a trimite e-mailuri .

Prin urmare, este un element care introduce conținut interactiv pentru utilizator pe pagina web sau într-o aplicație web, inserându-se în contextul webului dinamic . Toate datele unui formular trimise odată din browserul web al clientului către serverul web trebuie să fie tratate sau procesate de o pagină web dinamică din partea serverului .

Termenul este utilizat, într-un sens mai larg, în mediul de dezvoltare Visual Basic pentru a indica o fereastră principală a aplicației, în care pot fi inserate elemente vizuale precum butoane sau casete de text.

Sub-elemente sau widget-uri

Exemplu de casetă text

Exemplu de buton radio

Exemplu de casetă de selectare

Exemplu de casetă listă

Exemplu de casetă combinată

Printre posibilele subelemente ale unei forme avem:

• casete de text (casetă de text);
  • casetă de parolă;
• zone de text ( zona de text );
• selecție unică ( buton radio );
• caseta de selectare ;
• meniu derulant:
  • casetă listă ;
  • cutie combinată ;
  • Listă derulantă ;
• sistem de fișiere încărcare fișiere ;
• butoane de trimitere și resetare.

Sintaxa HTML 4

Exemplu de listă derulantă

<form>...</form>

Creați un modul în care unul sau mai multe elemente enumerate mai jos pot fi conținute (imbricate) în interior.

<method=post action="url">

Atributul de metodă specifică, cu valoarea sa, că datele vor fi trimise la server cu metoda HTTP Post îndreptată, prin atributul de acțiune , către pagina de procesare URL respectivă specificată; acest element este de obicei întotdeauna prezent.

<input type="text" name="nome" value="valore" size="dimensione">

Creați o casetă de text cu o singură linie. Atributul Name cu valoarea sa atribuită identifică numele variabilei trecute părții de procesare, în timp ce atributul Value cu valoarea atribuită completează câmpul cu o valoare atribuită; atributul opțional Dimensiune setează lungimea casetei cu valoarea sa, în timp ce atributul opțional Maxlength setează numărul maxim de caractere care pot fi introduse cu valoarea sa (poate fi mai mare decât Dimensiune);

<input type="file" name="nome">

Creați casetă pentru încărcarea fișierului, adică încărcarea fișierului în browserul clientului pentru trimiterea către server; atributul Name cu valoarea sa atribuită identifică numele variabilei transmise părții de procesare;

<input type="password">

Creați o casetă de text cu o singură linie pentru introducerea unei parole cu valori tastate / afișate ascunse pentru a păstra confidențialitatea ;

<textarea>...</textarea>

Creează o zonă de text multiliniu setată de atributele cols (coloane) și rows (rânduri). Textul dintre etichete va apărea în zona de text la încărcarea paginii.

<select name="foo">...</select>

Creați un meniu listă din care utilizatorul poate alege un singur element. Poate fi afișat ca un meniu derulant.

<option>...</option>

Creați un element de meniu.

<input type="radio">

Creați o singură casetă de alegere a butonului radio.

<input type="checkbox">

Creați o casetă de selectare pentru a verifica conținutul intrării (casetă de selectare).

<input type="radio">

Creați un buton radio; dacă mai multe butoane radio au același nume, utilizatorul poate selecta doar unul.

<input type='button....></input> sau <button></button>

Creați un buton

<input type="submit" value="NAME">

Creează un buton pentru a trimite toate datele formularului cu numele afișat egal cu valoarea atributului Value .

<input type="image" border=0 name="NAME" src="name.gif">

Creați un buton de trimitere pentru toate datele formularului utilizând o imagine.

<input type="reset">

Creează un buton de resetare a datelor introduse care restabilește valorile modulului la cele inițiale.

HTML 5

HTML 5 a introdus elemente noi în formulare ^[2] :

<input> element

Elementul <input> are valori noi pentru atributul type .

• search : un câmp de search .
• tel : control pentru schimbarea unui număr de telefon. Puteți utiliza atributele pattern și maxlength pentru a limita valorile introduse de utilizator.
• url : control pentru editarea unei adrese URL .
• email : verificați dacă ați schimbat o adresă de e-mail.

Atribute noi ale <input>

• list : ID-ul unui element <datalist> al cărui conținut, format din elemente <option> , ar trebui folosit ca indiciu.
• pattern : O expresie regulată utilizată în <input> tipuri de text , tel , search , url și email .
• form : Un șir care indică elementul <form> al cărui element este intrarea.
• formmethod : Un șir care indică metoda HTTP (GET sau POST) de utilizat pentru trimiterea datelor către server.
• xm-errormessage : Conține un mesaj atunci când câmpul eșuează la validare (numai Firefox ).

<form>: element <form>:

• novalidate : acest nou atribut novalidate formularul să novalidate validarea utilizatorului.

element <datalist>

<datalist> conține o listă de elemente <option> de sugerat utilizatorului atunci când compilează un <input>.

element <output>

<output> reprezintă rezultatul unui calcul. Folosim atributul for a specifica o relație între un element <output> și alte elemente ale documentului (intrări sau parametri).

atribut <placeholder>

Exemplu de formular HTML 5 cu focalizare automată (primul formular din partea de sus evidențiat imediat ce utilizatorul vizualizează formularul)

<placeholder> se aplică elementelor <input> și <textarea> , oferind utilizatorului un indiciu despre ceea ce ar trebui să introducă în câmp.

atributul <autofocus>

<autofocus> evidențiază un câmp. Poate fi atribuit unui singur câmp pentru fiecare formular. Se aplică elementelor <input> , <button> , <select> și <textarea> .

Constrângeri de validare

• Atributul required în elementele <input> , <select> și <textarea> indică faptul că câmpul trebuie completat.
• Atributul pattern din elementul <input> stabilește valoarea pentru a se potrivi cu o anumită cifră.
• Atributele min și max din elementul <input> specifică valoarea minimă și maximă care poate fi introdusă.
• Atributul step din elementul <input> constrânge valorile care pot fi introduse.
• Atributul maxlength pe elementele <input> și <textarea> stabilește numărul maxim de caractere pe care utilizatorul îl poate introduce.
• Valorile url și email din atributul de type limitează valorile acceptate la o adresă URL validă sau, respectiv, la o adresă de e-mail.

Alte utilizări

Dincolo de utilizările specifice descrise mai sus, în informatică (în general: în informațiile dactilografiate) se înțelege prin formă o mască (sau modul ) sau o zonă, de obicei structurată în rânduri și coloane (ale căror margini sau fundaluri nu pot fi, de asemenea, vizibile) și cu câmpuri care acționează ca etichete descriptive, în care informațiile (date, valori, comenzi, expresii etc.) trebuie introduse de către utilizatorul aplicației software relative. Informațiile pot fi, de asemenea, preumplute și, prin urmare, utilizatorul trebuie să aleagă (pentru fiecare celulă sau casetă) valoarea preferată (meniul derulant, lista selectabilă, butonul etc.).

Pentru a fi precis, formularul este formularul care nu este completat: atunci când este completat, acesta devine rezultatul informațiilor documentate (o rezervare, o comandă, o evaluare, un chestionar, o declarație etc.).

Formatare

Exemplu de formular formatat cu CSS

Formularele sunt formatate prin CSS care permit să ofere un aspect profesional și captivant formularelor în comparație cu HTML pur ^{[3] [4]} . Exemplu:

 input [ type = text ], select , textarea {
  lățime : 100 % ; 
  căptușeală : 12 px ;  
  chenar : 1 px solid #ccc ; 
  raza chenarului : 4 px ;  
  box-sizing : border-box ; * /
  marginea de sus : 6 px ;  
  marginea-fund : 16 px ; 
  redimensionare : vertical }

Conectare socială

Conectarea socială este o formă de conectare unică care folosește informațiile existente dintr-un serviciu de rețele sociale, cum ar fi Facebook , Twitter sau Google, pentru a vă conecta la un site web al unei terțe părți ^[5] în loc de a crea o nouă autentificare specifică pentru acel site web. Acesta este conceput pentru a simplifica accesul utilizatorilor finali și pentru a oferi informații demografice din ce în ce mai fiabile dezvoltatorilor de web ^[6] .

Exemplu de formular care permite accesul social

Beneficii

Studiile au arătat că formularele de înregistrare a site-urilor web sunt ineficiente, deoarece mulți oameni furnizează date false, își uită informațiile de conectare la site sau pur și simplu refuză să se înregistreze în primul rând. Un studiu din 2011 realizat de Janrain și Blue Research a constatat că 77% dintre consumatori au preferat conectarea socială ca mijloc de autentificare în comparație cu metodele de înregistrare online mai tradiționale ^[7] . Avantajele suplimentare sunt:

• Conținut vizat: site-urile web pot obține un profil și date grafice sociale pentru a viza conținut personalizat către utilizator.
• Identități multiple : utilizatorii pot accesa site-uri web cu identități sociale multiple, permițându-le să-și controleze mai bine identitatea online.
• Date de înregistrare : Multe site-uri web folosesc datele de profil returnate prin autentificare socială în loc să permită utilizatorilor să introducă manual informațiile de identificare personală) în formulare. Acest lucru accelerează procesul de înregistrare sau înscriere.
• E - mail pre-validat - Împiedică utilizatorul să furnizeze o adresă de e-mail inventată în timpul procesului de înregistrare.
• Conectarea contului : multe site-uri web permit utilizatorilor anteriori să-și conecteze contul de site existent la contul lor de conectare socială, fără a forța reînregistrarea.

Riscuri

Principalul risc asociat cu utilizarea formularelor este furtul datelor dvs. în timp ce le completați ^{[8] [9]} . În plus, conectările sociale sunt adesea implementate într-un mod nesigur. Utilizatorii, în acest caz, trebuie să aibă încredere în fiecare aplicație care a implementat această funcție pentru a-și gestiona confidențial identificatorul ^[10] .

Mai mult, bazându-se pe un cont care poate fi utilizat pe multe site-uri web, conectarea socială creează un singur punct de eșec, crescând astfel foarte mult daunele care ar fi cauzate dacă contul ar fi spart ^[11] .

Solutii posibile

Un captcha

Același subiect în detaliu: CAPTCHA .

Acronimul englez CAPTCHA denotă în domeniul informaticii un test format din una sau mai multe întrebări și răspunsuri pentru a determina dacă utilizatorul este un om și nu un computer sau, mai exact, un bot .

Accesibilitate

Același subiect în detaliu: Accesibilitate (web) , Accesibilitate (design) și Wai-aria .

Exemplu de cod cu etichete WAI-ARIA adecvate pentru accesibilitate ^[12] :

 < form id = "send-comment" aria-label = "Adaugă un comentariu" >
< label for = "username" > Nume utilizator </ label >
  < input id = "username" name = "username" autocomplete = "nickname" autocorrect = "off" type = "text" >

  < label for = "email" > Email </ label >
  < input id = "email" name = "email" autocomplete = "email" autocapitalize = "off" autocorrect = "off" spellcheck = "false" type = "text" >

  < etichetă pentru = "comentariu" > Comentariu </ etichetă >
  < textarea id = "comment" name = "comment" > </ textarea >

  < input value = "Comment" type = "submit" >
</ forma >

Plugin CMS

Același subiect în detaliu: CMS .

Formularele din CMS sunt inserate prin pluginuri speciale ^{[13] [14] [15]} sau bucăți de cod (API) în general în PHP sau ASP.NET ^{[16] [17]} .

Exemplu de formular în ASP.NET

 @ {
if (IsPost) { 
string companyname = Request ["companyname"]; 
string companyname = Request ["companyname"]; 
<p> Ați introdus: <br />
Nume companie: @companyname <br />
Contact: @contact </p>
}
altceva
{
<form method = "post" action = "" >
Nume companie: <br />
<input type = "text" name = "Nume companie" value = "" /> <br />
Numele persoanei de contact: <br />
<input type = "text" name = "Contact" value = "" /> <br /> <br />
<input type = "submit" value = "Submit" class = "Submit" />
</form>
}
}

Exemplu de formular PHP:

 Nume: <input type = "text" name = "name" value = " <? Php echo $ name ; ?> ">
E-mail: <input type = "text" name = "email" value = " <? Php echo $ email ; ?> ">
Site web: <input type = "text" name = "website" value = " <? Php echo $ website ; ?> ">
Comentariu: <textarea name = "comment" rows = "5" cols = "40"> <? Php echo $ comment ; ?> </textarea>
Gen:
<input type = "radio" name = "gender"
<? php if ( isset ( $ gender ) && $ gender == "feminin" ) ecou "bifat" ; ?>
value = "feminin"> feminin
<input type = "radio" name = "gender"
<? php if ( isset ( $ gender ) && $ gender == "masculin" ) ecou "bifat" ; ?>
value = "mascul"> mascul
<input type = "radio" name = "gender"
<? php if ( isset ( $ gender ) && $ gender == "altul" ) echo "bifat" ; ?>
value = "altul"> altul

Notă

Elemente conexe

• Caseta de bifat
• Buton
• Buton de radio
• Fișier încărcat
• Web dinamic

linkuri externe

• (RO) Formular în documente HTML , pagina specifică W3C pentru formularele din HTML 4.
• jotform.com .

Portal IT : accesați intrările Wikipedia care se ocupă cu IT