DID-CLIO.net

Formulare

Aplicaţiile web presupun afişarea unei interfeţe grafice (Windows), introducere de comenzi sau date de către utilizatorul acestora şi prelucrarea lor în cadrul aplicaţiilor de pe un server. Pagina prezintă codificarea în html a elementelor care compun o interfaţă Windows de bază: casete de text, butoane de diferite tipuri, controale cu listă etc. destinate introducerii datelor care urmează să fie prelucrate într-o aplicaţie web.

Elementul form

Elementul form este delimitat prin marcaje <form>… <form> şi serveşte la gruparea controalelor Windows destinate introducerii de date în cadrul unei aplicaţii web. În cele ce urmează elementul form va fi denumit şi formular.

Un element form are două atribute obligatorii:

• method defineşte modul în care sunt transmise datele spre server. Atributul poate lua două valori: method=”post” dacă datele provenite din controalele formularului vor fi citite de aplicaţia web ca şi fişier standard de intrare (stdin în limbajul C), respectiv method=”get” dacă datele din controalele Windows ale formularului vor fi transmise aplicaţiei web printr-un şir de caractere adăugat în continuarea adresei componentei aplicaţiei web cerută serverului.
• action indică denumirea componentei software a aplicaţiei web care va prelucra datele trimise. Această componentă software este lansată în execuţie de aplicaţia de tip server pentru web (Apache de exemplu).

Exemplu

<form method=”post” action=”programe/calcul.php”>

Script pentru completarea a două formulare

 	<form action="/mailinglist.php" method="post">
<fieldset>
<legend>Completează formularul</legend>


<label for="nume">Nume:</label>
<input type="text" name="username" id="nume">
<label for="email">Email:</label>
<input type="text" name="email" id="email">

<input type="submit" value="Submit">
</fieldset>
</form>
 

Rezultatul codului de mai sus:

 	


Completează formularul


Nume:

Email:





 

Elementul input

Un element input defineşte caracteristicile unui câmp al formularului. Atributele marcajului <input> sunt :

• type = definește tipul controlului Windows;
• name = definește numele asociat valorii câmpului; este unic.
• value = definește conținutul prestabilit al câmpului.
• checked = se folosește pentru un buton radio dintr-un grup de butoane sau pentru o casetă de validare pentru a impune starea selectat.
• maxlength = numărul maxim de caractere acceptate într-un control de tip text.

Pentru modificarea aspectului implicit al unui element input se folosesc stiluri. Se pot astfel defini clase care pot fi asociate controalelor prin adăugarea atributului class. Formularele prezentate în continuare vor conţine modificări ale modului normal de afişare a controalelor Windows folosind stiluri.

HTML 5 permite definirea unei mulţimi extinse de tipuri de câmpuri, cele mai des folosite fiind următoarele: button, checkbox, file, hidden, image, password, radio, reset, submit şi text.

1. Tipul text permite definirea unui câmp pentru introducerea unui şir de caractere :

<input type=”text” name=”oras” value="OrașulTău" id="oras" maxlength = 50>

• name = atribut care permite preluarea valorii de către variabila php
• value = textul prestabilit
• maxlength = stabilește numărul maxim de caractere
2. Tipul password (parolă) permite introducerea unei parole. Caracterele introduse nu vor fi afişate, în câmp apărând doar caractere * :

<input type=”password” name=”parola">

3. Tipul caută<input type=”search” name=”cauta">
4. Tipul telefon<input type=”tel”>
5. Tipul url<input type=”url”>
6. Tipul checkbox (casetă de validare) permite desenarea unei casete izolate de validare:

<input type=”checkbox” name="nume" checked value="da">

De regulă caseta de validare este inclusă între marcaje <label> ... <label> pentru a ataşa casetei un şir de caractere.

7. Tipul radio permite descrierea unui grup de butoane radio. Gruparea se realizează prin atribuirea aceluiaşi nume tuturor controalelor care formează grupul. Pentru a adăuga în dreptul fiecărui buton un şir de caractere (etichetă) descrierea controlului va fi inclusă între marcaje <label> ... </label>. Exemplu:

<label><input type=”radio” name="semestrul" checked value="0"> I
(septembrie-februarie)  </label> 
<label><input type=”radio” name="semestrul" value="1"> II (februarie-iunie)</label>

8. Tipul buton submit are ca şi efect transmiterea spre server a valorilor introduse în câmpurile formularului. Un formular poate conţine mai multe butoane de tip submit. Exemplu:

<input type=”submit” name="gata" value ="Validează" >

9. Tipul buton reset determină crearea unui buton a cărui acţionare permite utilizatorului să şteargă valorile din toate câmpurile formularului.

<imput type =”reset” value="Anulare">

10. Tipul image permite includerea în formular a unei imagini având la selectare un comportament similar unui buton de tip submit:

<input type=”image” src="imagini/poza.gif" alt="Validare">

11. Tipul hidden permite transmiterea unor informaţii spre server fără ca utilizatorul să le vadă pe ecran. De regulă câmpurile hidden servesc la realizarea unei sesiuni de lucru. Aceasta presupune înlănţuirea coerentă a unui ansamblu de pagini, de regulă realizate dinamic de scripturile aplicaţiei web. O astfel de aplicaţie va memora în atributele value din câmpuri hidden informaţii necesare următorului script lansat în execuţie ca urmare a apăsării unui buton de tip submit.
12. Tipul file permite încărcarea unui fişier pe server. Controlul de tip file afişează o casetă de text şi un buton pe care scrie Browse. După ce se apasă butonul Browse şi se selectează fişierul numele acestuia va fi automat afişat în caseta de text. Apăsarea butonului de tip submit al formularului determină transferul fişierului pe server, într-un director temporar. Scriptul asociat formularului va realiza mutarea fişierului din directorul temporar într-un director al saitului, eventual după o validare în care se verifică tipul şi dimensiunea fişierului.
Exemplu

<form enctype=”multipart/form-data” action=”prelucrez.php” method=”post”>
<input type=”hidden” name=”MAX_FILE_SIZE” value=”30000”>
Selectati fisierul : <input type=”file” name=”fisier”>
<input type=”submit” value=”Incarcare server”>
<form>  

Atributul enctype indică natura informaţiei trimise spre server. Valoarea implicită a acestui parametru este enctype="application/x-www-form-urlencoded" şi corespunde formularelor obişnuite care trimit spre server un şir de caractere. În cazul transmiterii unui fişier atributul trebuie schimbat în enctype="multipart/form-data".

Elementul textarea

În cazul în care un formular trebuie să permită introducerea unui text mai lung, dispus pe mai multe linii, se va folosi un element textarea. În acest mod se definesc de exemplu zonele destinate scrierii unor mesaje, impresii etc. Marcajul <textarea> are trei atribute: name, rows (câte linii) şi cols (câte coloane).

<textarea name=”comentariu” rows=”5” cols=”35” placeholder="lasă un comentariu">

Elementul select

Elementul select permite definirea controalelor complexe de tip text plus listă (combo box). Caseta de tip combobox afişează o valoare. Selectarea acesteia sau a săgeţii din dreapta ei cu mouse-ul va provoca afişarea listei asociate, vizitatorul paginii putând selecta linia dorită.

<select name=”obiect”>
  <option value=”nimic” selected>(alegeți obiectul)
  <option value=”info”>Informatică
  <option value=”tic”>TIC 
  <option value=”cosmetice”>Istorie
  <option value=”rom">Limba română
  <option value=”engl”>&Limba engleză
  <option value=”fizica”>Fizică
  <option value=”bio”>Biologie 
</select>

Opțiunile se pot grupa logic prin tagul <optgroup>. De exemplu grupăm obiectele obligatorii la BAC.

Scriptul folosit: <optgroup label="BAC">