Formulare in HTML

Formularele reprezinta o modalitate de comunicare intre utilizatori si server. Pentru prelucrarea lor, sunt folosite diferite scripturi server-side, ex.:PHP, Perl.

Un formular se defineste cu ajutorul marcajului <form>, iar in interiorul acestuia se gasesc diferite campuri de introducere a datelor. Campurile unui formular destinate pentru introducerea datelor se definesc prin intermediul marcajului <input>.

Exemplu

<form action="mailto:AdresaTa@email.com" method="POST"> Numele:<br> <input type="text" name="name"><br> Email:<br> <input type="text" name="email"><br> Mesajul:<br> <textarea cols="30" rows="5"></textarea><br> <input type="submit" name="submit" value="Trimite"> <input type="reset" name="reset" value="Reseteaza"> </form>

Rezultat:

Numele:

Email:

Mesajul:

1.   Ce să mai citim?

2. Ce să mai citim?

3. Tatăl fondator al Uniunii Europene.            

4. Colonizarea de pe Marte !

5.   Ne pregătim pentru Marte

6. Colonizarea Marte poate determina umanitatea să-și modifice ADN-ul ?

7. Cine mai urăște să poarte mască?

Pentru transmiterea informatiilor catre server se utilizeaza una din cele doua metode:

• metoda get - informatiile din formular sunt vizibile in URL
• metoda post- informatiile din formular nu sunt vizibile in URL

Atributul action are ca valoare URL-ul careia ii vor fi transmise informatiile din formular, pentru prelucrare.

Campurile unui formular sunt definite cu ajutorul marcajului <input> care poate lua urmatoarele atribute:

• type - tipul campului. Poate lua urmatoarele valori:
• button - definirea unui buton
• checkbox - casute de bifat. Prin intermediul lor utilizatorul poate selecta (bifa) mai multe variante de raspuns simultan.
• file - permite utilizatorului sa selecteze un fisier din calculatorul sau. (ex. un fisier care se doreste a fi incarcat pe server).
• hidden - acest camp nu va aparea in formular, va fi invizibil.
• submit - informatiile din formular sunt trimise spre prelucrare la URL-ul indicat inaction.
• password - acest camp se foloseste la introducerea parolei. Din motive de securitate se inlocuieste fiecare caracter tastat cu un asterix (*).
• radio - reprezinta un set de elemente cu un singur nume, din care se poate selecta doar unul.
• text - camp in care utilizatorul poate introduce text.
• reset - buton la apasarea careia se goleste formularul.
• name - numele elementului
• value - valoarea atributului elementului
• size - lungimea campului de tip text sau password
• maxlength - numarul maxim de caractere care pot fi introduse intr-un camp de tip text saupassword
• disabled - dezactivarea unui element.

Select HTML

Tagul <select> este utilizat pentru crearea listelor (drop-down lists). Cu ajutorul tagului<option> din interiorul elementului <select>se definesc optiunile disponibile in lista.

Exemplu:

Limba materna: <select> <option>Romana</option> <option>Engleza</option> <option>Franceza</option> </select>

Limba materna:  Romana Engleza Franceza 


Implicit meniul va afisa primul element din lista. Pentru a afisa un alt element decat cel implicit, se va specifica atributulselected="yes" optiunii care dorim sa fie afisata prima in lista.

Limba materna: <select> <option>Romana</option> <option selected="yes">Engleza</option> <option>Franceza</option> </select>

Limba materna:  Romana Engleza Franceza 


Select - atributul "size"
Implicit doar 1 singur element din lista este vizibil, insa acest lucru se poate schimba cu ajutorul atributului size adaugat marcajului <select>

Limba materna: <select size="3"> <option>Romana</option> <option>Engleza</option> <option>Franceza</option> </select>

1.   Ce să mai citim?

2. Ce să mai citim?

3. Tatăl fondator al Uniunii Europene.            

4. Colonizarea de pe Marte !

5.   Ne pregătim pentru Marte

6. Colonizarea Marte poate determina umanitatea să-și modifice ADN-ul ?

7. Cine mai urăște să poarte mască?

Select - selectare multipla
Implicit se permite selectarea unui singur element din lista, insa este posibil ca mai multe de 1 element din lista sa poata fi selectat.
Pentru aceasta se va specifica atributul multiple="yes"

Limba materna: <select size="3" multiple="yes"> <option>Romana</option> <option>Engleza</option> <option>Franceza</option> </select>

TextArea HTML

Un element de tip textarea defineste un control de text cu mai multe linii. Campurile de acest fel sunt folosite de obicei pentru introducerea unor comentarii, scrierea unui mesaj sau in general atunci cand utilizatorul are nevoie de mai mult spatiu de exprimare.

Definirea controlului are loc prin intermediul marcajelor <textarea> </textarea>

Dimensiunele controlului textarea se determina prin numarul de coloane si randuri specificate cu ajutorul atributelorcols si respectiv rows

Exemplu:

<textarea rows="5" cols="20"> Hello World! </textarea> <textarea rows="3" cols="40"> Hello World! </textarea>

TextArea - atributul "wrap"
Atributul "wrap" specifica felul in care va reactiona textul atunci cand acesta va atinge sfarsitul liniei. Exista 3 valori pe care le poate lua acest atribut:

1. soft - va plasa un enter la sfaritul fiecarei linii, dar nu va trimite la server caracterul enter (carriage return)
2. hard - arata exact asa ca si "soft", insa spre deosebire de acesta, caracterul enter este trimis la server.
3. off - Textul este afisat si trimis la server exact asa cum este scris.

<textarea rows="4" cols="15" wrap="soft" > Hello World! </textarea> <textarea rows="4" cols="15" wrap="hard" > Hello World! </textarea> <textarea rows="4" cols="15" wrap="off"> Hello World! </textarea>

Soft	Hard	Off

TextArea - Readonly si Disabled

1. readonly - acest atribut poate lua valorile "yes" sau "no". Cu ajutorul acestui atribut se specifica daca continutul campului de text va putea sau nu, fi modicat.
2. disabled - atributul disabled este asemanator lui readonly, deasemenea nu permite modificarea textului, insa spre deosebire de acesta, textul va fi afisat in gri. In asa fel utilizatorul va percepe vizual ca campul respectiv nu poate fi modificat.

De mentionat ca textul dintr-un textarea definit cu "readonly" putea fi selectat cu mouse-ul, si ulterior copiat, pe cand "disabled" nu ofera aceasta posibilitate. 

<textarea rows="4" cols="15" readonly="yes" > Hello World! </textarea> <textarea rows="4" cols="15" disabled="yes" > Hello World! </textarea>

disabled	readonly

1.   Ce să mai citim?

2. Ce să mai citim?

3. Tatăl fondator al Uniunii Europene.            

4. Colonizarea de pe Marte !

5.   Ne pregătim pentru Marte

6. Colonizarea Marte poate determina umanitatea să-și modifice ADN-ul ?

7. Cine mai urăște să poarte mască?

Checkbox-uri HTML

Checkbox-urile, la fel ca si radio butoanele ofera utilizatorului posibilitatea de a alege o optiune din mai multe variante.

Spre deosebire de radio butoane, unde este permisa alegerea doar a unei singure optiuni, checkbox-urile permit alegerea simultana a mai multor optiuni.

Exemplu:

<p>Limbi cunoscute </p> Romana: <input type="checkbox" name="limba" value="Romana"/> Engleza: <input type="checkbox" name="limba" value="Engleza"/> Germana: <input type="checkbox" name="limba" value="Germana"/>

Checkbox-uri selectate implicit (by default):
La fel ca si pentru radio butoane, pentru bifarea implicita a checkbox-urilor, se va folosi atributulchecked="yes":

<p>Limbi cunoscute </p> Romana: <input type="checkbox" checked="yes" name="limba" value="Romana"/> Engleza: <input type="checkbox" name="limba" value="Engleza"/> Germana: <input type="checkbox" name="limba" value="Germana"/>   Ce să mai citim? Ce să mai citim? Tatăl fondator al Uniunii Europene.             Colonizarea de pe Marte !   Ne pregătim pentru Marte Colonizarea Marte poate determina umanitatea să-și modifice ADN-ul ? Cine mai urăște să poarte mască?

Radio butoane HTML

Radio butoanele permit utilizatorului sa aleaga doar o singura optiune din cele disponibile. Pentru gruparea mai multor radio butoane intr-o singura categorie, fiecare camp trebuie sa fie definit cu acelasi nume.

Exemplu:

<p>Tip transfer </p> Western Union: <input type="radio" name="transfer"/> PayPal: <input type="radio" name="transfer"/> Check:<input type="radio" name="transfer"/> <p>Valuta </p> USD: <input type="radio" name="valuta"/> EU: <input type="radio" name="valuta"/>

Buton radio selectat implicit (by default):

Pentru ca o optiune sa fie implicit selectata, trebuie sa se adauge atributul checked="yes" optiunii respective:

<p>Tip transfer </p> PayPal: <input type="radio" name="transfer"/> Check:<input type="radio" name="transfer" checked="yes" />   Ce să mai citim? Ce să mai citim? Tatăl fondator al Uniunii Europene.             Colonizarea de pe Marte !   Ne pregătim pentru Marte Colonizarea Marte poate determina umanitatea să-și modifice ADN-ul ? Cine mai urăște să poarte mască?

Butoane HTML

Butoanele, ca si campurile sunt definite prin intermediul marcajului <input />

Buton:
<input type="button" /> defineste un buton


Butonul Reset:
<input type="reset" /> defineste un buton de tip reset. El are menirea de a goli toate campurile unui formular.

Pentru functionarea corecta, butonul reset trebuie sa fie inclus intr-un formular. 

<form> <input type="text"/> <input type="reset" /> </form>

 

Butonul Submit:
<input type="submit" /> defineste un buton de tip submit. Butonul submit trebui sa fie inclus intr-un formular pentru ca sa fie functional. El are menirea de a trimite toate datele dintr-un formular la server.

<form method="GET" action="http://w3schools.com/html/html_form_action.asp"> <input type="text" name="user"/> <input type="submit" value="Submit"/> </form>   Ce să mai citim? Ce să mai citim? Tatăl fondator al Uniunii Europene.             Colonizarea de pe Marte !   Ne pregătim pentru Marte Colonizarea Marte poate determina umanitatea să-și modifice ADN-ul ? Cine mai urăște să poarte mască?

Text fields

Campuri (Text fields)

1. Text

2. Password

3. File

Campurile reprezinta niste controale care au menirea de a prelua de la utilizator date, care ulterior sa fie prelucrate.

Definirea unui camp se face prin intermediului marcajului <input />: <input type="text" name="email"/>

Atributul type determina tipul campului, si poate lua valorile: "text", "password" si "file", pentru definirea unui camp de tip text, parola si respectiv fisier, asa dupa cum se vede in exemplele 1, 2 si 3 aratate mai sus.

1.   Ce să mai citim?

2. Ce să mai citim?

3. Tatăl fondator al Uniunii Europene.            

4. Colonizarea de pe Marte !

5.   Ne pregătim pentru Marte

6. Colonizarea Marte poate determina umanitatea să-și modifice ADN-ul ?

7. Cine mai urăște să poarte mască?