Documente Academic
Documente Profesional
Documente Cultură
7
Formulare în HTML
Cuprins:
Obiective
Însuşirea noţiunilor generale despre inserarea formularelor în pagini
web.
Înțelegerea controalelorformularelorși a modalităților de utilizare a
acestora.
Utilizarea formularelor și a importanței acestora în proiectarea paginilor
web.
104
expediate separat, sunt permise cantităţi mari de date (ordinul MB)). Pentru
moment, specificaţi întotdeauna valoarea POST.
a) Câmpurile de editare
Pentru a introduce în cadrul unui formular un câmp de editare(casete de
text), trebuie sa folosim pentru atributul TYPE, al tagului <INPUT>, valoarea
TEXT. Atributele cele mai folosite pentru tagul <INPUT> de tipul câmp de editare
sunt:
SIZE, care reprezintă lăţimea câmpului de editare
MAXLENGTH, specifică numărul maxim de caractere care pot fi
introduse în câmpul de editare
VALUE, valoarea iniţială a câmpului de editare
105
Exemplu:
<html>
<head><title>Caseta de text</title></head>
<body>
<form action="mailto:xxxxx@xxx.com" method="post">
<INPUT NAME="exemplu" TYPE="text" VALUE="Camp de editare"
SIZE="20" MAXLENGTH="30">
</form>
</body></html>
Exemplu:
<html><head><title>Parola</title></head>
<body>
<form action="mailto:xxxxx@xxx.com" method="post">
Nume:<input type="text" name="nume" value="Numele"><br>
Prenume:<input type="text" name="prenume" value="Prenumele"><br>
Password:<input type="password" name="parola" ><br>
</form>
</body></html>
106
Figura 9.1.2 – Construirea unui camp de editare de tip "password"
Exemplu:
<html>
<head>
<title>Camp multilinie</title>
</head>
<body>
<h1>Un formular cu un camp de editare multilinie</h1>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
<textarea name="text multilinie" cols="40" rows="5" wrap="off">
Prima linie din textul initial.
A doua linie din textul initial.
</textarea>
</form>
</body>
</html>
Exemplu:
<html>
<head>
<title>Butoane radio</title>
</head>
<body>
In ce categorie de varsta va incadrati?
<form action="mailto:xxxxx@xxx.com" method="post">
<INPUT TYPE="radio" NAME="raspuns" VALUE="a" CHECKED >
sub 15 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="b">15-20 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="c">20-25 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="d">25-35 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="e">35-45 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="f">peste 45 ani
</form></body></html>
Exemplu:
<html><head><title>Casete de validare</title></head>
<body>
<form action="mailto:xxxxx@xxx.com" method="post">
Unde va petreceti concediul de obicei?<BR>
<INPUT TYPE="checkbox" NAME="optiunea1">La mare<BR>
<INPUT TYPE="checkbox" NAME="optiunea2">La munte<BR>
<INPUT TYPE="checkbox" NAME="optiunea3">In strainatate<BR>
<INPUT TYPE="checkbox" NAME="optiunea4">La tara<BR>
<INPUT TYPE="checkbox" NAME="optiunea5">Acasa
</form></body></html>
Exemplu:
<html><head><title>Caseta de fisiere</title></head>
<body>
<h1>Un formular cu caseta de fisiere</h1>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Alegeti fisierul:
<input type="file" name="fisier" value="c:\temp\proba.html"
enctype="multipart/form-data"><br>
</body></html>
<html>
<head>
<title>Liste de selectie</title>
</head>
<body>
<h1>Un formular cu lista de selectie</h1>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Alege un judet
<SELECT>
<OPTION value=Arad>Arad</OPTION>
<OPTION value=Arges>Arges</OPTION>
<OPTION value=Bacau>Bacau</OPTION>
<OPTION value=Brasov>Brasov</OPTION>
<OPTION value=Bucuresti selected>Bucuresti</OPTION>
<OPTION value=Cluj>Cluj</OPTION>
<OPTION value=Constanta>Constanta</OPTION>
112
<OPTION value=Galati>Galati</OPTION>
<OPTION value=Giurgiu>Giurgiu</OPTION>
<OPTION value=Harghita>Harghita</OPTION>
<OPTION value=Hunedoara>Hunedoara</OPTION>
<OPTION value=Iasi>Iasi</OPTION>
<OPTION value=Maramures>Maramures</OPTION>
<OPTION value=Mures>Mures</OPTION>
<OPTION value=Neamt>Neamt</OPTION>
<OPTION value=Olt>Olt</OPTION>
<OPTION value=Prahova>Prahova</OPTION>
<OPTION value=Satu-Mare>Satu-Mare</OPTION>
<OPTION value=Sibiu>Sibiu</OPTION>
<OPTION value=Suceava>Suceava</OPTION>
<OPTION value=Teleorman>Teleorman</OPTION>
<OPTION value=Timis>Timis</OPTION>
<OPTION value=Valcea>Valcea<</OPTION>
<OPTION value=Vaslui>Vaslui<</OPTION>
<OPTION value=Vrancea>Vrancea</OPTION>
</SELECT>
</body>
</html>
113
Figura 9.1.8.- Alegerea din lista de selecţie a unui element
Exemplu:
<html>
<head>
<title>Lista cu selectii multiple</title>
</head>
114
<body>
<h1>Un formular cu o lista de selectie ce accepta selectii multiple</h1>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Limbi straine cunoscute:<br><br>
<select name="limbi straine" size="5" multiple>
<option value="e"> Engleza
<option value="f" selected> Franceza
<option value="s"> Spaniola
<option value="i"> Italiana
<option value="r"> Rusa
<option value="g"> Germana
</select><br><br>
</form>
</body>
</html>
115
f) Butoanele de tip Submit si Reset
Pentru a putea expedia datele introduse în cadrul unui formular, fie prin e-
mail, fie către un script scris într-un limbaj de programare care va interpreta aceste
date, trebuie să folosim un buton de trimitere.
Un buton de expediere al unui formular se introduce cu ajutorul etichetei
<INPUT>, în care atributul TYPE este configurat la valoarea "SUBMIT". Acest
element poate primi un nume prin atributul NAME. Pe buton apare scris "SUBMIT
QUERY" sau valoarea atributului VALUE, dacă această valoare a fost stabilită.
Exemplu:
<html>
<head><title>Buton de expediere</title></head>
<body><h1> Un formular cu un camp de editare si un buton de expediere
</h1> <hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Numele:<input type="text" name="numele" value="Numele si prenumele">
<br><br> <input type="submit" value="expedieaza">
</form>
</body>
</html>
Exemplu:
<html>
<head><title>Butonul RESET</title></head>
<body>
<h1>Un formular cu un buton reset</h1><hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Introduceti numele:
<input type="text" name="nume" value="Numele"><br>
Introduceti prenumele:
<input type="text" name="prenume" value="Prenumele"><br>
<input type="reset" value="sterge"> <input type="submit">
</form>
</body>
</html>
g) Butoane
Într-un formular pot fi afişate butoane.Când utilizatorul apasă un buton, se
lansează în execuţie o funcţie de tratare a acestui eveniment. Limbajul HTML nu
permite scrierea unor astfel de funcţii (acest lucru este posibil dacă se utilizează
limbajele Javascript sau Java).
Pentru a insera un buton într-un formular , se utilizează eticheta <INPUT>
având atributul TYPE configurat la valoarea "BUTTON".
Atribute ale elementului "BUTTON" sunt:
NAME, care permite ataşarea unui nume butonului
VALUE, care primeşte ca valoare textul ce va fi afişat pe buton.
Există o a doua modalitate de a introduce într-o pagină Web un buton de
apăsat, şi anume prin intermediul blocului <BUTTON>...</BUTTON>.
Un astfel de buton poate fi inserat într-un formular, în acest caz declanşând
acţiuni legate de acel formular, sau poate fi introdus oriunde în pagină pentru
iniţierea unor acţiuni independente de formulare.
Atributele posibile ale etichetei <BUTTON> sunt:
NAME acordă elementului un nume;
VALUE precizează textul care va fi afişat pe buton;
118
TYPE precizează acţiunea ce se va executa la apăsarea butonului
dacă acesta este inclus într-un formular.Valorile posibile pentru acest atribut sunt:
- "BUTTON" ,
- "SUBMIT" ,
- "RESET".
În corpul blocului <BUTTON>...</BUTTON> se poate afla un text sau un
marcaj de inserare a unei imagini.
Observaţii finale:
- elementul <FORM> poate avea un atribut TARGET, care primeşte ca
valoare numele unei ferestre a browserului în care va fi încarcat răspunsul trimis
serverului WWW la expedierea unui formular.
- toate elementele cuprinse într-un formular pot avea un atribut
DISABLED care permite dezactivarea respectivului element.
- toate elementele de tip text cuprinse într-un formular pot avea un atribut
READONLY care interzice modificarea conţinutului acestor elemente.
7.3 Aplicații
1.
<html>
<head><title>Creare formular</title></head>
<body>
<form name="form1" method="post" action="">
<input type="text" name="textfield">Textfield<br><br>
<textarea name="textarea"></textarea>Textarea<br><br>
<input type="password" name="textfield2">Textfield pentru parole
<br> <br>
<input type="checkbox" name="checkbox" value="checkbox">Checkbox
<br><br>
<input name="checkbox2" type="checkbox" value="checkbox" checked>
Checkbox cu valoarea checked<br><br>
<input name="radiobutton" type="radio" value="radiobutton"> Radio buton
<br><br>
<select name="select">
<option selected>optiunea 1</option>
<option>optiunea 2</option>
<option>alegerea 3</option></select>
List / Menu<br><br><p><label>
<input name="RadioGroup1" type="radio" value="radio" checked>
Radio</label>Group1<br><label>
<input type="radio" name="RadioGroup1" value="radio">
Radio</label>Group1 </p>
</form></body></html>
119
2.
<HTML>
<HEAD><TITLE>Realizarea unui formular</TITLE></HEAD>
<BODY>
<H2>Realizarea unui formular</H2><HR>
Completeaza formularul urmator pentru a ne trimite parerea ta <br><br>
<FORM ACTION="mailto:luminitaserb@yahoo.com" METHOD="POST">
Nume:
<input name="textfield1" type="text" size="15" maxlength="30"><br><br>
Prenume:
<input name="textfield2" type="text" size="15" maxlength="30"><br><br>
Sex:
<input name="radiobutton" type="radio" value="radiobutton"> feminin
<input name="radiobutton" type="radio" value="radiobutton"> masculin
<br><br>
120
Varsta:
<select name="varsta">
<option>sub 15 ani</option>
<option>15 - 20 ani</option>
<option>20 - 25 ani</option>
<option>25 - 30 ani</option>
<option>30 - 40 ani</option>
<option>peste 40 ani</option>
</select><br><br>
Judetul:
<SELECT>
<OPTION value=Arad>Arad</OPTION>
<OPTION value=Arges>Arges</OPTION>
<OPTION value=Bacau>Bacau</OPTION>
<OPTION value=Brasov>Brasov</OPTION>
<OPTION value=Braila>Braila</OPTION>
<OPTION value=Bucuresti selected>Bucuresti</OPTION>
<OPTION value=Buzau>Buzau</OPTION>
<OPTION value=Cluj>Cluj</OPTION>
<OPTION value=Constanta>Constanta</OPTION>
<OPTION value=Galati>Galati</OPTION>
<OPTION value=Giurgiu>Giurgiu</OPTION>
<OPTION value=Harghita>Harghita</OPTION>
<OPTION value=Hunedoara>Hunedoara</OPTION>
<OPTION value=Iasi>Iasi</OPTION>
<OPTION value=Maramures>Maramures</OPTION>
<OPTION value=Mures>Mures</OPTION>
<OPTION value=Neamt>Neamt</OPTION>
<OPTION value=Olt>Olt</OPTION>
<OPTION value=Prahova>Prahova</OPTION>
<OPTION value=Satu-Mare>Satu-Mare</OPTION>
<OPTION value=Sibiu>Sibiu</OPTION>
<OPTION value=Suceava>Suceava</OPTION>
<OPTION value=Timis>Timis</OPTION>
<OPTION value=Valcea>Valcea</OPTION>
<OPTION value=Vrancea>Vrancea</OPTION>
</SELECT><br><br>
Parerea ta:<br>
<textarea name="textarea" cols="40" rows="5"></textarea><br><br>
Trimite poza ta: <input type="file" name="poza"><br><br>
<INPUT TYPE="submit" VALUE="Trimite">
<INPUT TYPE="reset" VALUE="Sterge">
</FORM>
</BODY></HTML>
121
122
Prin completarea cu date a acestui formular se obţine:
123
3.
<html>
<head>
<title>Formular</title>
</head>
<body>
<center><table bgcolor="lightyellow">
<form action = "mailto:xxxxx@xxx.com" method="post">
<caption align= "top"> <B> FORMULAR COMPLEX </B></caption>
<tr align=left>
<th>Numele:
<td><input type="text" name="numele">
<tr align=left>
<th>Preumele:
<td><input type="text"name="prenumele">
<tr align=left>
<th>Telefon
<td><input type="text" name="telefonul">
<tr align=left>
<th> Alegeti pizza:
<td><input type="checkbox" name="ciuperci">cu ciuperci
<input type="checkbox" name="mexicana">mexicana
<input type="checkbox" name="europeana">europeana
<tr align=left>
<th>Alegeti plata:
<td>
<ul style="background-color:lightblue;">
<li><input type="radio" name="plata">cash
<li><input type="radio" name="plata">card </ul>
<tr align=left>
<th>Comentarii:
<td> <textarea name="comentarii" cols="40" rows="5" wrap="off" >
Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor
noastre </textarea>
<tr align=left valign=top>
<td><input type="reset" value="Sterge">
<td> <input type="submit" value="Expedieaza">
</form>
</table>
</body>
</html>
124
4.
<html>
<head>
<title>Formular</title>
</head>
<body>
<form action="script.php" method="post">
<table>
<tr>
<th>Nume:
<td><input type="text" name="nume"><br>
<tr>
<th>Prenume:
<td><input type="text" name="prenume"><br>
<tr>
125
<th>Telefon:
<td><input type="text" name="telefon"><br>
<tr>
<th>Fax:
<td><input type="text" name="fax"><br>
<tr>
<th>Email:
<td><input type="text" name="email">
</table>
<br>
<b>Sexul:
</b> Masculin<input type="radio" name="sex" value="m">
Feminin<input type="radio" name="sex" value="f">
<br><br>
<b>Studii:</b>
<select>
<option value="scoala">Scoala profesionala
<option value="liceu">Liceu
<option value="facultate">Facultate
</select>
<br><br>
<b>Accesati Internetul de la:</b><br>
<table>
<tr>
<td>Serviciu
<td><input type="checkbox" name="serv">
<tr>
<td>Acasa
<td><input type="checkbox" name="acasa">
<tr>
<td>Internet cafe
<td><input type="checkbox" name="cafe">
</table>
<br><br>
<b>Fisier:</b>
<input type="file" name="file">
<br><br>
<b>Observatii:<b><br>
<textarea name="obs" rows="5" cols="30"></textarea><br><br>
<input type="submit" value="Trimite"> <input type="reset" value="Sterge">
</form>
</body>
</html>
126
127
6.4 Modele de construire a site-urilor web
Start.html
<html>
<head>
<title>Date personale</title>
</head>
<body bgcolor="lightyellow" text="#000000">
<div align="center">
<table width="698" cellspacing="3">
<tr>
<td align="left" height="20">
<center>
<p><font size=4 face="arial,helvetica"><b><font color="#000000">
Date personale </font></b></font></p> </center> </td>
</tr>
<tr>
<td align="center" height="15">
<font size=2 face="arial,helvetica"><b> Date personale
| <a href="siteuri.html">Site-uri favorite</a>
| <a href="contact.html">Contact</a>
</b></font> </td>
</tr>
<tr>
<td align="center" height="376">
<p> Aici se scriu datele personale (<b>evident se sterge acest
text!</b>). se poate introduce chiar si o poza. </p>
<p>Se observa ca pagina de date personale (in care ne aflam) nu
are link </p>
<p>deoarece nu are rost sa facem trimiteri dintr-o pagina catre ea
insasi! </p>
<p>Trimiterile le facem catre celelalte pagini din site.</p> </td>
</tr>
</table>
</div>
</body>
</html>
128
Siteuri.html
<html>
<head>
<title>Site-uri favorite</title>
</head>
<body bgcolor="lightyellow" text="#000000">
<div align="center">
<table width="698" cellspacing="3">
<tr>
<td align="left" height="20">
<center><p> <font size=4 face="arial,helvetica">
<b><font color="#000000">
Site-uri favorite </font></b>
</font> </p> </center> </td>
</tr>
<tr>
<td align="center" height="15">
<font size=2 face="arial,helvetica">
<b> <a href="start.html">Date personale</a>
129
| Site-uri favorite
| <a href="contact.html">Contact</a>
</b> </font> </td>
</tr>
<tr>
<td align="center" height="376">
<p>Aici se scriu adresele catre paginile web sau site-urile preferate
(<b>evident se sterge acest text!</b>). </p>
<p>Se observa ca curenta (in care ne aflam) nu are link </p>
<p>deoarece nu are rost sa facem trimiteri dintr-o pagina catre ea
insasi! </p>
<p>Trimiterile le facem catre celelalte pagini din site.</p>
</td>
</tr>
</table>
</div>
</body>
</html>
130
Contact.html
<html>
<head>
<title>Contact</title></head>
<body bgcolor="lightyellow" text="#000000">
<div align="center">
<table width="698" cellspacing="3">
<tr>
<td align="left" height="20">
<center>
<p><font size=4 face="arial,helvetica">
<b><font color="#000000">Contact</font></b>
</font>
</p>
</center>
</td>
</tr>
<tr>
<td align="center" height="15">
<font size=2 face="arial,helvetica"><b>
<a href="start.html">Date personale</a>
| <a href="siteuri.html"> Site-uri favorite</a>
| Contact </b>
</font>
</td>
</tr>
<tr>
<td align="center" height="376">
<p>Aici se scriu datele de contact, cum ar fi: adresa de e-mail... </p>
<p>Se observa ca pagina de date personale (in care ne aflam) nu
are link </p>
<p>deoarece nu are rost sa facem trimiteri dintr-o pagina catre ea
insasi! </p>
<p>Trimiterile le facem catre celelalte pagini din site.</p>
</td>
</tr>
</table>
</div>
</body>
</html>
131
2. Model site pentru firme.
Profil.html
<html>
<head><title>*** PROFIL ***</title><body text="#0033FF" >
<p align="center"><b>PROFIL COMPANIE</b>
<p align="center">Profil | <a href="servicii.html">Sevicii</a>
| <a href="produse.html">Produse</a>
<p>Firma .............................. a luat nastere in anul.............
<p>Pana in prezent, firma noastra a reusit sa-si atinga toate scopurile
propuse la infiintare:...............
<p>Structura actionariatului firmei .................... este urmatoarea:
<p> <div align="center">
<table width="78%" border="1">
<tr> <td width="51%">
<div align="center">Manager General: .......................</div></td>
<td width="49%"> <div align="center">
<img src="" width="136" height="117"></div> </td> </tr>
132
<tr> <td width="51%"> <div align="center">
<img src="" width="137" height="117"></div> </td>
<td width="49%"> <div align="center">
Director vanzari......................................................................</div>
</td> </tr>
<tr>
<td width="51%">
<p align="center">Sef productie:...........................................</p>
<p align="center">...................................</p> </td>
<td width="49%">
<div align="center"><img src="" width="136" height="117"></div>
</td> </tr></table></div><p> </body></html>
133
Servicii.html
html>
<head>
<title>*** SERVICII ***</title>
<body text="#0033FF" >
<p align="center">
<b>SERVICII</b>
<p align="center">
<a href="profil.html">Profil</a>
| Servicii | <a href="produse.html">Produse</a>
<p>Firma ...............ofera numeroase servicii in domeniul ...........................
cum ar fi:
<p>* .............................................
<p>* ...........................................
<p>* .........................................
</body>
</html>
134
Produse.html
<html>
<head>
<title>*** PRODUSE ***</title>
<body text="#0033FF" >
<p align="center"><b>PRODUSE</b>
<p align="center"><a href="profil.html">Profil</a>
| <a href="servicii.html">Servicii</a> | Produse
<p>Firma ............. realizeaza produse in domaniul....................
<p>Produsele oferitye clientilor nostri sunt de o calitate exceptionala si la
preturi extrem de avantajoase...................
<p>Produsele nostre sunt:
<ul>
<li> ............... <li> ................ <li> .............. <li>................
</ul>
</body>
</html>
135
3. Site de prezentare pentru o firmă.
Index.html
<html>
<head>
<title> *** PAGINA DE START ***</title>
<body background="bg.jpg "text="#0033FF" >
<p align="center"><b><font size="+2">Pagina de start</font></b>
<hr><p align="right"><a href="profil.html">Profil</a>
| <a href="servicii.html">Servicii</a>
| <a href="contact.html">Contact</a>
<p>Bine ati venit pe site-ul firmei noastre........................................
<p>Firma ............. realizeaza produse in domaniul....................
<p>De asemenea, firma presteaza servicii cu caracter ....................
<p> <p> <p> <p> <p>
<p align="right">
</body>
</html>
136
Profil.html
<html>
<head>
<title> *** Profil companie ***</title>
<body background="bg.jpg "text="#0033FF" >
<p align="center"><b><font size="+2">Profil companie</font></b>
<hr>
<p align="right">Profil | <a href="servicii.html">Servicii</a>
| <a href="contact.html">Contact</a>
<p>Firma .............................. a luat nastere in anul.............
<p>Este o firma de prestari servicii in domeniul......................
<p>Pana in prezent, firma noastra a reusit sa-si atinga toate scopurile
propuse la infiintare:...............
<p>Structura actionariatului firmei .................... este urmatoarea: ..............
</body>
</html>
137
Servicii.html
<html>
<head>
<title> *** Servicii ***</title>
<body background="bg.jpg "text="#0033FF" >
<p align="center"><b><font size="+2">Servicii</font></b>
<hr>
<p align="right"><a href="profil.html">Profil</a> | Servicii
| <a href="contact.html">Contact</a>
<p>Bine ati venit pe site-ul firmei noastre........................................
<p>Firma ............. presteaza servicii in domeniul....................
<p>........................................................................
<p> <p> <p> <p> <p>
<p>
<p align="right">
</body>
</html>
138
Contact.html
<html>
<head>
<title> *** PAGINA DE START ***</title></head>
<body background="bg.jpg "text="#0033FF" >
<p align="center"><b><font size="+2">Contact</font></b> <hr>
<p align="right"><a href="profil.html">Profil</a>
| <a href="servicii.html">Servicii</a> | Contact
<p align="center">Contactati-ne la sediul firmei din:
<p align="center"><div align="center"><address>...............
<br> Pitesti, Arges <br> Romania </address></div>
<p align="center">E-mail:
<a href="mailto:company@company.com">
mailto:company@company.com</a>
</body>
</html>
139