Limbajul HTML. Formulare - runceanu.ro2017).pdf · pensiune agroturistica ... Studii de caz...

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:



<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>



</form>

</body>

</html>

Problema 3:



<html>

<head>

<title>Optiuni concediu</title>

</head>

<body>


<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>



</form>

</body>

</html>

Problema 4:



<html>

<head>

<title>Cursuri WEB</title>

</head>

<body>


<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>



</form>

</body>

</html>

Problema 5:



<html>

<head>

<title>Ataseaza Fişier</title>

</head>

<body>


<input type="file">

<input type="submit">

</form>

</body>

</html>

Problema 6:



<html>

<head>

<title>Zodiac</title>

</head>

<body>


<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:



<html>

<head>

<title>Librarie informatica</title>

</head>

<body>


<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>



</form>

</body>

</html>

Problema 8:



<html>

<head>

<title>Carte de oaspeti</title>

</head>

<body>


<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"


</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)

Limbajul HTML. Formulare - runceanu.ro2017).pdf · pensiune agroturistica ... Studii de caz...

Documents

Transcript of Limbajul HTML. Formulare - runceanu.ro2017).pdf · pensiune agroturistica ... Studii de caz...