Laborator 4
Limbajul HTML. Formulare
FORMULARE – asigură crearea paginilor web interactive. În general sunt folosite pentru
preluarea datelor de la utilizator (în vederea efectuării unei comenzi pentru diferite produse).
Un formular este constituit din elemente speciale numite controale (CONTROLS): butoane
radio,butoane de validare, meniuri, casete de text, prin intermediul cărora utilizatorul transmite
informaţii server-ului care găzduieşte pagina web.
Înserarea unui formular într-un document web se realizează prin etichetele <form> </form> ,
între care sunt incluse controalele.
1. Elemente de control:
Tagul INPUT –permite inserarea unor elemente de control în funcţie de valorile asociate
atributelor sale:
NAME=şir de caractere (asociază controlului un nume)
VALUE=şir de caractere (specifică o valoare iniţială; strict necesară în cazul grupului
de butoane radio)
TYPE=TEXT PASSWORD CHECKBOX RADIO SUBMIT RESET FILE
HIDDEN IMAGE BUTTON (specifică tipul elementului de control creat).
Control Acţiune utilzator Tag
Text Introducerea unui text de volum redus Input
Password Introducerea uni text de volum redus, care apare,
pe ecran, mascat cu „*” Input
Submit Activare (pentru a transmite informaţiile înscrise
în formular către server) Input
Reset Activare (pentru a restabilii valorile iniţiale ale
tuturor controalelor formularului) Input
Push Activare (pentru a executa o acţiune definită de
autorul formularului) Input
Checkbox Bifare (pentru selecţie multiplă a unor opţiuni) Input
Radio Bifare (pentru selecţie unei singure opţiuni dintr-
o listă de opţiuni) Input
Textarea Introducerea unui text de volum mare Textarea
Menu Alegerea unei opţiuni dintr-un meniu Select, option
Principalele atribute de control dintr-un formular
CONTROL TAG ATRIBUTE
OBLIGATORII
ATRBUTE
OPŢIONALE
Text Input Type ,name Value, size, maxlength
Password Input Type ,name Size, maxlength
Submit Input Type Value
Reset Input Type Value
Checkbox Input Type ,name
Radio Input Type ,name
Textarea Textarea Name Cols, rows
Menu Select,option Name Size, multiple, value
2. Utilizarea tabeleleor pentru a insera un formular:
Se utilizează o structură tabelară pentru poziţionarea corectă a controalelor:
<form>
<table>
<tr>
<td>Nume</td> <td><input type="text" name="a" /></td>
</tr>
<tr>
<td>Glicemie</td> <td><input type="password" name="b" /></td>
</tr>
<tr>
<td>Azi vrei desert? </td>
<td align="center">DA <input type="radio" name="c" />NU <input type="radio"
name="c" /></td>
</tr>
<tr>
<td>Prajituri preferate</td>
<td align="center">
<select name="d">
<option> Cu ciocolata</option>
<option> Cu fructe</option>
<option> Cu frisca</option>
</select>
</td>
</tr>
<tr>
<td>Alte comentarii</td>
<td align="center"> <textarea name="e"> </textarea> </td>
</tr>
<tr bgcolor="f6d324">
<td align="right"> <input type="reset" /> </td>
<td align="left"> <input type="submit" /> </td>
</tr>
</table></form>
Probleme rezolvate
Problema 1:
Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl
salvati apoi cu extensia .html:
<html>
<head>
<title>Exemplu de formular</title>
</head>
<body>
<form method="POST" action=”mailto:[email protected]”>
<p><b>Introduceti numele dvs. --></b> <input type="text" name="nume"
size="30"></p>
<p><input type="submit" value="Expediaza"><input type="reset"
value="Anuleaza"></p>
</form>
</body>
</html>
Problema 2:
Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl
salvati apoi cu extensia .html:
<html>
<head>
<title>Formular logare</title>
</head>
<body>
<form method="POST" action="mailto:[email protected]">
<table border="0">
<tr>
<td><b>Introduceti numele dvs. de identificare --></b> </td>
<td> <input type="text" name="nume" size="30"></td>
</tr>
<tr>
<td><b>Introduceti parola dvs.?</b></td>
<td><input type="password" name="parola" size="30"></td>
</tr>
</table>
<p><input type="submit" value="Expediaza"><input type="reset"
value="Anuleaza"></p>
</form>
</body>
</html>
Problema 3:
Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl
salvati apoi cu extensia .html:
<html>
<head>
<title>Optiuni concediu</title>
</head>
<body>
<form method="POST" action="mailto:[email protected]">
<h4>Unde doriti să va petreceti concediul?</h4>
<p><input type="radio" value="munte" checked name="Loc">la munte</p>
<p><input type="radio" name="Loc" value="mare">la mare</p>
<p><input type="radio" name="Loc" value="acasa">acasa</p>
<hr>
<h4>Daca plecati în concediu, unde ati dori să va cazati?</h4>
<p><input type="radio" name="Cazare" value="hotel" checked>la hotel</p>
<p><input type="radio" name="Cazare" value="vila">vila</p>
<p><input type="radio" name="Cazare" value="pensiune">pensiune
agroturistica</p>
<p><input type="submit" value="Expediaza"><input type="reset"
value="Anuleaza"></p>
</form>
</body>
</html>
Problema 4:
Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl
salvati apoi cu extensia .html:
<html>
<head>
<title>Cursuri WEB</title>
</head>
<body>
<form method="POST" action="mailto:[email protected]">
<h4>Ce cursuri doriti să urmati?</h4>
<p><input type="checkbox" name="Cursuri" value="html" checked>HTML</p>
<p><input type="checkbox" name="Cursuri" value="asp" checked>ASP</p>
<p><input type="checkbox" name="Cursuri" value="jvscript">JAVA SCRIPT</p>
<p><input type="checkbox" name="Cursuri" value="java">JAVA</p>
<p><input type="checkbox" name="Cursuri" value="php">PHP</p>
<p><input type="checkbox" name="Cursuri" value="asp">ASP</p>
<p><input type="submit" value="Expediaza"><input type="reset"
value="Anuleaza"></p>
</form>
</body>
</html>
Problema 5:
Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl
salvati apoi cu extensia .html:
<html>
<head>
<title>Ataseaza Fişier</title>
</head>
<body>
<form method="POST" action="mailto:[email protected]">
<input type="file">
<input type="submit">
</form>
</body>
</html>
Problema 6:
Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl
salvati apoi cu extensia .html:
<html>
<head>
<title>Zodiac</title>
</head>
<body>
<form method="POST" action="mailto:[email protected]">
<p><b><i>Zodia dumneavoastra este: </i></b>
<select name="Zodie" size="1">
<option value="Var">Varsator</option>
<option value="Pes">Pesti</option>
<option value="Ber">Berbec</option>
<option value="Tau">Taur</option>
<option value="Gem">Gemeni</option>
<option value="Rac">Rac</option>
<option value="Leu">Leu</option>
<option value="Fec">Fecioara</option>
<option value="Bal">Balanta</option>
<option value="Sco">Scorpion</option>
<option value="Sag">Sagetator</option>
<option value="Cap">Capricorn</option>
</select>
</p>
<p><input type="submit" value="Expediaza"></p>
<p><input type="reset" value="Anuleaza"></p>
</form>
</body>
</html>
Problema 7:
Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl
salvati apoi cu extensia .html:
<html>
<head>
<title>Librarie informatica</title>
</head>
<body>
<form method="POST" action="mailto:[email protected]">
<h4>Selectati cartile care va intereseaza:</h4>
<p><select size="3" name="Carti" multiple>
<option value="sg" selected>Sabin Buraga - Aplicatii Web la cheie. Studii de caz
implementate în PHP</option>
<option value="ta">Traian Anghel - Programare Web</option>
<option value="lw">Luke Welling, Laura Thomson - Dezvoltarea aplicatiilor Web cu
PHP şi MySQL</option>
<option value="lu" selected>Larry Ullman - PHP şi MySQL pentru site-uri
dinamice</option>
</select></p>
<p><input type="submit" value="Expediaza"><input type="reset"
value="Anuleaza"></p>
</form>
</body>
</html>
Problema 8:
Lansaţi în execuţie editorul de texte Notepad şi introduceţi următorul fişier pe care îl
salvati apoi cu extensia .html:
<html>
<head>
<title>Carte de oaspeti</title>
</head>
<body>
<form method="POST" action="mailto:[email protected]">
<h4>Parerea dvs.:</h4>
<p><textarea name="Comentarii" rows="5" cols="19">
Introduceti
aici parerea dvs.
</textarea></p>
<p><input type="submit" value="Expediaza">
<input type="reset" value="Anuleaza"></p>
</form>
</body>
</html>
Aplicaţie implementată
Un formular complex – Rezervarea unei camere de hotel
<html>
<head>
<title>Rezervare camere hotel</title>
</head>
<body>
<form method="POST" action="rezervari.asp" >
<h3><u>Hotel Costica - Formular de rezervare</u></h3>
<p><u>1. Informatii Generale</u></p>
<table border="0">
<tr>
<td><b>Ce fel de camere doriti ?</b></td>
<td><select size="1" name="Camera">
<option>Single</option>
<option>Double</option>
<option>Apartament</option>
</select></font>
</td>
</tr>
<tr>
<td><b>Optiuni camera:</b></td>
<td><input type="checkbox" name="Televizor" value="ON" checked>Televizor
<br>
<input type="checkbox" name="VederePlaja" value="ON" checked>Vedere catre
plaja
</td>
</tr>
<tr>
<td><b>Ce modalitate de plata alegeti ?</b></td>
<td><input type="radio" name="ModalitatePlata" value="Numerar"
checked>Numerar<br>
<input type="radio" name="ModalitatePlata" value="CarteCredit">Carte credit<br>
<input type="radio" name="ModalitatePlata" value="TransferBancar">Transfer
bancar
</td>
</tr>
<tr>
<td><b>Alte observatii</b></td>
</tr>
<tr>
<td>
<p align="center"><textarea name="Observatii" rows="5" cols="39">Introduceti aici
optiunile dvs. daca nu este disponibila nici o camera conform cererii exprimate
!</textarea></p>
<hr align="center">
</td>
</tr>
</table>
<p><u>2. Informatii Contact</u></p>
<table border="0">
<tr>
<td><b>Nume şi prenume :</b></td>
<input type="text" size="35" maxlength="256" name="Nume">
</tr>
<tr>
<td><b>Telefon :</b></td>
<input type="text" size="35" name="Tel">
</tr>
</table>
<p><input type="submit" value="Rezerva"> <input type="reset"
value="Anuleaza"></p>
</form>
</body>
</html>
Probleme propuse spre rezolvare
1. Editaţi un CV personal în care să adăugaţi o legătură către un document PDF care să se
deschidă într-o nouă fereastră (folosiţi atributul target al tag-ului a). Folosiţi atributul title
pentru a adăuga o descriere (tooltip) legăturii spre fişierul PDF.
2. Realizaţi în HTML o listă ordonată (în ordinea rangului) cu persoane din conducerea
Universităţii Constatin Brâncuşi.
3. Realizaţi în HTML o listă neordonată cu colegii dumneavoastră de grupă.
4. Realizaţi un document HTML care afişează un tabel simplu:
5. Realizaţi o listă de definiţii în care termenii sunt oraşe din ţara în care aţi fost, iar definiţiile
sunt câteva impresii despre fiecare oraş.
6. Realizaţi un formular de introducere date conform următoarelor specificaţii:
Componenta de tip text pentru preluare nume şi prenume
Componenta de tip text pentru preluare adresa e-mail
Componenta de tip casetă de selecţie pentru preluare specializare
Componenta de tip casetă de selecţie pentru preluare curs
Componenta de tip casetă de selecţie pentru preluare activitate. Activităţile pot fi: studiu
curs, lucrare laborator, test grilă
Componenta de tip buton radio pentru selecţie an de studiu (I, II, II sau IV)
Componenta de tip buton validare (checkbox) pentru specificare selecţii dintre variantele:
Activitate interactivă
Activitate de studiu individual
Activitate de lucru în colaborare cu alţi studenţi
Trei butoane de submisie a informaţiilor introduse în formular cu următoarele semnificaţii:
Lansare activitate
Afişare stare student în raport cu activitatea selectată
Anulare informaţii introduse în forma clasică (Cancel)
Top Related