Sunteți pe pagina 1din 5

Crearea unui formular HTML

Life is like a coin. You can spend it any way you wish,
but you only spend it once. (Lillian Dickson)

Obiective:

Prezentarea elementelor unui formular


Crearea unui formular de inscriere la facultate

1. Ce este un formular ? - Un formular este un ansamblu de zone active alcatuit din butoane,
casete de selectie, campuri de editare etc. Formularele va asigura construirea unori pagini Web
care permit utilizatorilor sa introduca efectiv informatii si sa le transmita serverului.

Elementele unui formular sunt cuprinse intre tagurile <form></form>.


2. Elementele unui formular

Input text este folosit pentru introducerea de text pe o singura linie.


Input password este folosit pentru introducerea parolelor.
<input type="text" name="utilizator" />
<input type="password" name="parola" />
Input radio sau radio button este folosit in formulare pentru a permite utilizatorului o singura
alegere dintr-o lista de optiuni.

<input type="radio" name="sex" value="masculin" />


<input type="radio" name="sex" checked="checked" value="feminin" />
Combo box este un element grafic alctuit dintr-o list de tip drop-down i un textbox ce
afieaz textul pe o singur linie

<select name="stuenti">
<option value="PI">Popescu</option>
<option value="II" selected="selected">Ion</option>
<option value="GR">Georgescu</option>
<option value="IP">Ionescu</option>
</select>
Input submit. Input reset. Input button

<input type = "submit" value = "Trimite!" /> - este butonul prin care formularul este trimis
<input type = "reset" value = "Reset" /> - este butonul prin care formularul este resetat
<input type = "button" value = "Buton 1" /> - este un buton care nu face nimic, in mod implicit,
decat daca i se atribuie o actiune cu ajutorul limbajului JavaScript
3. Crearea unui formular de inscriere la facultate
In prima instanta vom crea un document html, ce va contine doar tag-urile de baza.
<html>
<head></head>
<body></body>
</html>
Stabilim un titlu documentului, titlu ce va aparea pe bara superioara a browser-ului.
Pentru aceasta il vom introduce in head intre tag-urile <title>Formular inscriere facultate</title>
In body deschidem tag-ul <form> unde vom face un tabel cu doua coloane si grosimea
liniei 0, pentru alinierea corespunzatoare a textului si a elementelor de formular. Primele doua
celule din tabel le vom lipi, pentru a da un nume continutului. In acest moment, codul va arata in
felul urmator:
<html>
<td colspan="2" ><h1>Formular
<head>
inscriere facultate</h1></td>
<title> Formular inscriere facultate </title>
</tr>
</head>
<tr>
<body>
<td></td>
<form>
<td></td>
<table border="0" cellpadding="5">
</tr>
<tr>
</table>
</form>
</body>
</html>
Se poate observa ca in tag-ul table am inclus doua atribute. Atributul border stabileste
grosimea liniei iar atributul cellpadding stabileste distanta din jurul textului pana la tabel. Tagurile <tr></tr> si <td></td> reprezinta linia si respectiv coloana unde va fi creeata celula.
Atributul colspan din tag-ul td, stabileste lipirea primelor doua celule din tabel.
In continuare vom introduce in prima coloana a tabelului urmatoarele elemente: Nume,
Prenume, Sex, Varsta, Data nasterii, Locul nasterii, Domiciliul actual, CNP, Specializarea,
Media la bacalaureat. In acest moment pagina ar trebui sa arate in felul urmator:

In a doua coloana vom introduce elementele active ale formularului. Pentru fiecare
dintre elementele Nume, Prenume, Varsta, Data nasterii, Locul nasterii, Domiciliul actual, CNP
si Media la bacalaureat, vom defini un element input text. De exemplu pentru campul Nume,
vom scrie: <input type="text" name="nume" />. Facem la fel si pentru restul elementelor.
In celula corespunzatoare rubricii Sex, introducem radio butoane, iar ca variante de
raspuns Masculin si Feminin.
<input type="radio" name="sex" value="masculin" />
<input type="radio" name="sex" value="feminin" />
In celula ce corespunde rubricii Specializarea, vom defini un ComboBox ce va contine ca
argumente urmatoarele specializari: Tehnologia Informatiei, Energetica Industriala, Mecatronica,
Informatica si va avea selectat implicit optiunea a doua:
<select name="specializare">
<option value="ti">Tehnologia Informatiei</option>
<option value="ei" selected="selected">Energetica Industriala</option>
<option value="me">Mecatronica</option>
<option value="in">Informatica</option>
</select>
Acum, pagina noastra ar trebui sa arate in felul urmator:
Pentru campul data nasterii puteti folosi facilitate HTML 5 (selectia din calendar)

<input type="date" value="2012-12-12;">

Braowsere-le care suporta acest tip de data sunt:

4. Aplicatie
1. Adaugati un nou rand in tabel, in care sa definiti doua checkbox-uri ce reprezinta tipul
locurilor pentru care se depunde candidatura: Bugetate/Nebugetate.
2. Pentru Varsta si Media la bacalaureat stabiliti lungimea campului de patru caractere.
3. Pentru campul Data nasterii, stabiliti ca valoare implicita textul zz/ll/aaaa.
4. Adaugati pe un rand nou un buton pentru stergerea valorilor (reset).
5. Adaugati un tag tabelului, astfel incat sa-l pozitionati pe mijlocul paginii.
6. Pentru campul Domiciliul actual, inlocuiti elementul de tip input text cu unul ce permite
scrierea textului pe mai multe randuri.
La final formularul va arata asa:

Bibliografie
http://html-tutor.net/formulare/
http://jserv.3x.ro/html/formulare1.html
http://etutoriale.ro/articles/127/1/formularelor-HTML/
http://tools.webmart.de/form-generator
http://wufoo.com/html5/types/4-date.html