16. Formulare HTML

Form-ul sau Formularul este una dintre cele mai importante metode folosite pentru a obtine informatii importante despre un utilizator web, informatii precum email, nume, adressa, telefon, opinii sau orice alte informaii.

In functie de necesitati informatia poate fi procesata si stocata intr-un fisier, se pot realiza statistici, formulare de inscriere sau de opinie si multe altele.

HTML – Campuri de text

Inainte sa intram in detalii trebuie ar trebui sa expunem putin bazele unui formular. Campurile de text au atribute care trebuiesc mentionate inca de la inceput:

  • type – Determina tipul campului de text. De exemplu: text, trimite, sau parola.
  • name – Atribuie un nume campului pentru a putea face referire la el mai tarziu
  • size – Seteaza marimea campului.
  • maxlength – valoarea maxima de caractere ce pot fi introduse
<form method="post" action="mailto:youremail@email.com">
    Nume: <input type="text" size="10" maxlength="40" name="name" /> <br />
    Parola: <input type="password" size="10" maxlength="10" name="password" />
</form>

HTML – Butoane Radio

Butoanele Radio sunt utile si usor de folosit. Cel mai intalnit exemplu a fi o intrebare cu multiple variante de raspuns. Atributele care ar trebui cunoscute sunt urmatoarele.

  • value – specifica ceea ce va fi trimis in cazul in care un utilizator selecteaza un anume buton. (Doar o singura alegere este posibila).
  • name – decide carui set de butoane apartine butonul selectat spre trimitere.
<form method="post" action="mailto:youremail@email.com">
    Ce tip de pantofi porti ? <br />
    
    Culoare: 
    <input type="radio" name="culoare" value="inchis" /> Inchis     
    <input type="radio" name="culoare" value="deschis" /> Deschis <br />
    
    Marime:
    <input type="radio" name="marime" value="mica" /> Mica
    <input type="radio" name="marime" value="medie" />Medie
    <input type="radio" name="marime" value="mare" /> Mare <br />
    <input type="submit" value="Trimite" />
</form>

HTML – Checkbox

Cu ajutorul CheckBox-urilor utilizatorul are posibilitatea de a alege unul, doua sau mai multe variante de raspuns. Atributele name si value se folosesc la fel ca si pentru butoanele radio.

<form method="post" action="mailto:youremail@email.com">
    Ce culoare preferi ?<br/>

    <input type="checkbox" name="culoare" value="negru" /> Negru <br/>
    <input type="checkbox" name="culoare" value="alb" /> Alb  <br/>
    <input type="checkbox" name="culoare" value="gri" /> Rosu <br/>
    <input type="checkbox" name="culoare" value="alb negru " /> Verde <br/>

    <input type="submit" value="Trimite" /> 
</form>

Un alt model de formular este meniul „dropdown”, folosit pentru selectii prestabilite. Acesta va fi afisat ca si un camp, care va afisa o lista atunci cand este executat un clik asupra lui.

<form >
    
    Ce ai dori în localitatea ta?
    <select name="schimbări"> 
        <option>gradinita noua</option> 
        <option>scoala noua</option> 
        <option>dispensar copii</option> 
        <option>spital</option> 

    </select>
    
    <input type="submit" value="Trimite" /> 
</form>

HTML – formular de upload

Mai intai de toate trebuie mentionat ca acest formular este doar interfata (modul in care atata), partea vizibila cu care un utilizator va putea interactiona. Pentru a face un formular complet de upload sunt necesare cunostinte, precum PHP sau PERL.

Un formular de upload este compus din mai multe parti. Vom incepe prin a stabili marimea fisierului pe care il vom uploada. Acest lucru se face cu ajutorul unui camp ascuns. In continuare vom crea campul propriu-zis in care utilizatorul va putea scrie adresa fisierului sau pur si simplu sa apese pe Browse pentru a deschide o fereastra Windows explore.

<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />