Un formular este un ansamblu de zone active alcătuit din butoane, casete de selecţie, câmpuri de editare etc. Formularele Web permit utilizatorilor să introducă efectiv informaţii şi să le transmită serverului. Formularele pot varia de la o simplă caseta de text, pentru introducerea unui şir de caractere pe post de cheie de căutare - element caracteristic tuturor motoarelor de cautare din Web, până la o structură complexă, cu multiple secţiuni, care oferă facilităţi puternice de transmisie a datelor. Această tehnică se bazează pe două elemente: pagina Web care afişează formularul virtual în browserul clientului şi programul (scriptul) de pe server, care procesează datele din formularul completat şi trimis de client, prin intermediul browserului său. În continuare va fi prezentată partea de formular, mai exact cum poate fi creat un astfel de formular în HTML. La trimiterea datelor formularului înapoi la server, toate datele sunt trimise în perechi "nume=valoare".

Realizarea unei pagini web ce conţine un formular cuprinde următoarele etape:

1. Utilizatorul completează formularul şi îl expediează unui server.
2. O aplicaţie dedicată de pe server analizează formularul completat şi (dacă este necesar) stochează datele într-o bază de date.
3. Dacă este necesar serverul expediază un răspuns utilizatorului.

Tag-ul "form"

Un formular este definit într-un bloc delimitat de etichetele corespondente <form> şi </form>. Acest tag specifică browserului că blocul respectiv este un formular virtual. Pot exista mai multe astfel de formulare pe o pagină, dar acestea nu pot fi imbricate.

Există două atribute esenţiale ale tag-ului <form>:

1. Atributul "action" - precizează ce se va întâmpla cu datele formularului odată ce acestea ajung la destinaţie. "Action" menţionează adresa scriptului (aflat pe server) care va interpreta formularul. Script-urile pot fi scrise în limbajele Perl, C, PHP, Unix shell.

2. Atributul "method" precizează metoda utilizată de browser pentru transmiterea formularului. Poate lua valorile:

•  get (valoarea implicită) - în acest caz, datele din formular sunt adăugate la adresa URL precizată de atributul "action"; permite trimiterea unor cantităţi mici de date (maxim 1 Kb);

•  post - în acest caz datele sunt expediate separate; sunt permise cantităţi mari de date (de ordinul MB).

Formularele Web pot conţine zone de introducere text, butoane radio, butoane de selecţie şi butoane pentru a trimite datele din formular serverului sau de a şterge din formular datele introduse anterior. Elementele formularului trebuie să fie organizate pe pagină, cu tag-uri obişnuite, deoarece browserul le afişează una după alta pe pagină, fără să le formateze.

Exemplu:

Tag-ul "input"

În interiorul blocului <form> trebuie inserate elemente care să fie afişate pe pagină. Aceste elemente se specifică prin tag-ul <input>, simplu. Pentru fiecare element <input> trebuie să precizăm :

•  Atributul "type" - indică tipul datelor care vor fi introduse: text, buton, buton radio etc.

•  Atributul "name" - indică numele asociat câmpului respectiv, deoarece datele formularului, trimise înapoi la server, sunt compuse din perechi nume=valoare.

•  Atributul "size"- indică numărul de caractere vizibile din câmp.

•  Atributul "maxlenght" - indică numărul maxim de caractere introduse în câmp.

•  Atributul "readonly" - datele prezente în câmp nu pot fi modificate.

Pentru a preciza tipul de eticheta <input> se foloseşte atributul type care poate lua valorile:

•  type="text" - casetă de text, pentru editare;

•  type="password" - casetă de text tip parolă;

•  type="radio" - buton pentru selectarea unui singur element dintr-un grup;

•  type="checkbox" - casetă de validare;

•  type="file" - casetă de fişiere pentru upload;

•  type="submit" - buton de expediere;

•  type="reset" - buton de ştergere;

•  type="image" - butonul va fi înlocuit cu o imagine;

Butoane

Un formular poate să conţină butoane, care vor permite executarea unor comenzi. Pentru a insera un buton într-un formular se utilizează eticheta <input>, având atributul type cu valoarea "button". Alte două atribute ale elementului "button" pot fi:

•  name, care permite ataşarea unui nume butonului

•  value, care primeşte ca valoare textul ce va fi afişat pe buton.

Există şi o altă modalitate de a introduce un buton într-o pagină Web şi anume prin intermediul blocului <button> ... </button>. Un astfel de buton poate fi inserat într-un formular, în acest caz el declanşând acţiuni legate de acel formular, sau poate fi introdus oriunde în pagină pentru iniţierea unor acţiuni independente de formulare. În corpul blocului <button> ... </button> se poate afla un text sau un marcaj de inserare a unei imagini.

Butoanele din formular se pot particulariza folosind atributul type="image" în cadrul etichetei input şi indicând fişierul imagine.

Exemplu:

<form action="script.php" method="post">
<input type="image" src="trimite.gif" alt="Trimite">
</form>

Butonul radio

Butoanele radio se folosesc de obicei în grup, ceea ce înseamnă că avem mai multe butoane radio, cu valori diferite şi nume identice; utilizatorul poate selecta doar unul dintre ele (celelalte se deselectează automat). Butoanele radio se introduc prin eticheta <input> cu atributul type având valoarea "radio".

Exemplu:

Imagini

În formulare pot fi inserate imagini. Astfel, selectând imaginea, se transmit serverului coordonatele imaginii, împreună cu celelalte date din formular. De obicei, coordonatele nu se procesează, imaginile dintr-un formular fiind utilizate la trimiterea datelor, în locul butonului "Submit".

Exemplu:

<input type="image" src="buton.gif" name="buton">

Liste de selectie

Într-un formular pot exista liste de selecţie. Acestea sunt specificate prin tag-ul dublu <select> .. </select>, în interiorul blocului de selecţie fiind specificate opţiunile cu eticheta <option> .. </option>.

Exemplu:

<select name ="nume">
<option>Procesor</option>
<option>Placa de bază</option>
<option>Placa video</option>
</select>

Zone de text

Zonele de text sunt multi-linie care permit introducerea textelor. Zona este specificată prin tag-ul <textarea>...</textarea>,  cu atributele :

•  "cols"- numărul de caractere afişate într-o linie;

•  "rows" - numărul de linii afişate simultan;

•  "name" - ataşarea unui nume câmpului de editare multilinie;

•  "wrap" - (word wrap= trecerea cuvintelor pe rândul următor), care determină comportamentul câmpului de editare relativ la sfârşitul de linie.
Acest atribut poate primi următoarele valori:
•  "off" - în acest caz:

• întreruperea cuvintelor la marginea dreaptă a editorului se produce numai când doreşte utilizatorul;
• caracterul de sfârşit de linie este inclus în textul transmis serverului odată cu formularul;

•  "hard"- în acest caz:

• se produce întreruperea cuvintelor la marginea dreaptă a rândului;
• caracterul de sfârşit de linie este inclus în textul transmis serverului odată cu formularul;

•  "soft" - în acest caz:

• se produce întreruperea cuvintelor la marginea dreaptă a rândului;
• nu se include caracterul de sfârşit de linie în textul transmis serverului odată cu formularul.

Exemplu:

<html>
<body><h1>Un formular cu un camp de editare multilinie</h1> <hr>
<form action="images.com" method="post">
<textarea name="text multilinie" cols="30" rows="5" wrap="off">
Prima linie din textul initial.
A doua linie din textul initial. </textarea>
<input type="reset"> <input type="submit">
</form></body>
</html>

Zone ascunse

În formulare, pot exista zone ascunse, care nu vor fi afişate pe pagină .

Exemplu: <input type="hidden" name="nume_c" value="Rex">

Exemplu de formular: