Sunteți pe pagina 1din 36

UNITATEA DE ÎNVĂȚARE NR.

7
Formulare în HTML

Cuprins:

7.1 CREAREA FORMULARELOR FOLOSIND HTML........................... 104


7.2 CONTROALELE FORMULARULUI .................................................... 105
7.3 APLICAȚII ................................................................................................ 119

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.

Timp alocat: 2 ore

7.1 Crearea formularelor folosind HTML

Formularele sunt foarte des întâlnite pe Internet. Datele introduse în formular


sunt de regulă trimise către server sau prin poşta electronică spre un cont de e-mail.
Formularele pot varia de la o simplă caseta de text, pentru introducerea unui şir de
caractere pe post de cheie de căutare - element caracteristic tuturor motoarelor de
căutare din Web - până la o structură complexă, cu multiple secţiuni, care oferă
facilităţi puternice de transmisie a datelor.
O sesiune cu o pagină web ce conţine un formular cuprinde următoarele
etape:
1. Utilizatorul completează formularul şi îl expediază unui server.
2. O aplicaţie dedicată de pe server analizează formularul completat şi
(dacă este necesar) stochează datele într-o baza de date.
3. Dacă este necesar serverul expediază un răspuns utilizatorului.
Un formular este definit într-un bloc delimitat de etichetele corespondente
<FORM> şi </FORM>. Sintaxa unui formular este de forma:

<FORM METHOD="metoda" ACTION="url">

 Atributul METHOD al etichetei FORM poate lua una din valorile


GET (nu sunt permise cantităţi mari de date (maxim 1 Kb)) sau POST(datele sunt

104
expediate separat, sunt permise cantităţi mari de date (ordinul MB)). Pentru
moment, specificaţi întotdeauna valoarea POST.

 Atributul ACTION specifică adresa URL a fişierului HTML care


prelucrează datele adunate prin intermediul formularului. Adresa URL poate fi o
adresă completă (de genul http://www.pagina_mea.ro/prelucrare_formular.html),
respectiv o adresa parţială, care specifică o locaţie relativă la locaţia paginii curente
(de genul prelucrare_formular.html). Cel mai simplu mod de utilizare a unui
formular este expedierea acestuia prin poşta electronică (e-mail). Pentru aceasta se
foloseşte atributul ACTION care primeşte ca valoare " MAILTO: " concatenat cu o
adresă validă de e-mail către care se va expedia formularul completat.

7.2 Controalele formularului

Între eticheta <FORM> şi eticheta de închidere </FORM>


corespunzătoare, se plasează controalele formularului. Elementele unui formular
trebuie introduse, în majoritatea cazurilor, cu ajutorul tagului <INPUT>. Atributele
cele mai importante ale acestui tag sunt următoarele:

 TYPE - tipul elementului


 NAME - numele elementului
 VALUE - valoarea elementului

Elementele ale unui formular pot fi:


 câmpurile de editare;
 butoanele radio;
 casetele de validare;
 casetele de fişiere;
 listele de selecţie;
 butoanele submit şi reset.
În continuare vom vedea cum se poate realiza fiecare element al unui
formular HTML

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>

Figura 9.1.1 – Construirea casetelor de text

Dacă se utilizează atributul TYPE configurat la valoarea "PASSWORD",


atunci în formular se introduce un element asemănător cu un câmp de editare
obişnuit (introdus prin type="text"). Toate atributele unui câmp de editare rămân
valabile.
Singura deosebire constă în faptul că acest câmp de editare nu afişează
caracterele în clar, ci numai caractere *, care ascund de privirile altui utilizator aflat
în apropiere valoarea introdusă într-un asemenea câmp.

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"

Atunci când vrem să adăugăm în cadrul formularului nostru un câmp de


editare în care să poată fi introduse mai multe rânduri, folosim câmpurile de editare
de tip multilinie. Pentru a folosi un astfel de câmp de editare, avem nevoie de
tagurile <TEXTAREA> şi </TEXTAREA>. Eticheta are următoarele atribute:

 COLS, care specifică numărul de caractere afişate într-o linie;


 ROWS, care specifică numărul de linii afişate simultan;

 NAME, care permite ataşarea unui nume câmpului de editare


multilinie;

 WRAP, (de la "word wrap"=trecerea cuvintelor pe rândul următor


care determină comportamentul câmpului de editare faţă de sfârşitul de linie. Acest
atribut poate primi următoarele valori:

 " off "; în acest caz:


- întreruperea cuvintelor la marginea dreaptă a editorului se
produce numai când doreşte utilizatorul;
- caracterul de sfârşit de linie este inclus în textul transmis
serverului odată cu formularul;
 " hard "; în acest caz:
- se produce întreruperea cuvintelor la marginea dreaptă a
editorului;
- caracterul de sfârşit de linie este inclus în textul transmis
serverului odată cu formularul;
 " soft "; în acest caz:
- se produce întreruperea cuvintelor la marginea dreaptă a
editorului ;
107
- nu se include caracterul de sfârşit de linie în textul
transmis serverului odată cu formularul;

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>

Figura 9.1.3 – Construirea unui camp de editare multilinie


108
b) Butoanele radio
Dacă avem o întrebare cu mai multe variante de răspuns, vom folosi
butoanele radio. Pentru a introduce un buton radio, folosim tagul <INPUT>, iar la
atributul TYPE, valoarea "RADIO". Butoanele radio permit alegerea, la un moment
dat, a unei singure variante din mai multe posibile. Cu ajutorul atributului
CHECKED, putem selecta un buton radio în mod prestabilit.

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>

Figura 9.1.4 – Butoane radio


109
c) Casetele de validare
Casetele de validare permit selectarea sau deselectarea uneia sau mai
multor opţiuni. Pentru a introduce o caseta de validare (checkbox) se utilizează
eticheta <INPUT> cu atributul TYPE având valoarea "CHECKBOX". Atributele
casetei de validare sunt:

 NAME care stabileşte numele fiecărei casete dintr-un grup.

 CHECKED care defineşte valoarea prestabilită "selectat" a fiecărei


casete.

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>

Figura 9.1.5 – Casetele de validare


110
d)Castele de fişiere
Pentru introducerea unde casete de fişiere se inserează un element
<INPUT> într-un formular , cu atributul TYPE având valoarea "FILE" (fişier).
Atributele pentru un element de tip casetă de fişiere:

 NAME permite ataşarea unui nume

 VALUE primeşte ca valoare adresa URL a fişierului care va fi


expediat o dată cu formularul. Această valoare poate fi atribuită direct atributului
VALUE, sau poate fi tastată într-un câmp de editare ce apare odată cu formularul,
sau poate fi selectată prin intermediul unei casete de tip File Upload sau Choose
File care apare la apăsarea butonului Browse... din formular;

 ENCTYPE precizează metoda utilizată la criptarea fişierului de


expediat. Valoarea acestui atribut este "multipart/form-data".

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>

Figura 9.1.6 – Casete de fişiere


111
e) Listele de selecţie
O listă de selecţie permite utilizatorului să aleagă unul sau mai multe
elemente dintr-o listă finită. Lista de selecţie este inclusă în formular cu ajutorul
etichetelor corespondente <SELECT> şi </SELECT>.
O listă de selecţie poate avea următoarele atribute:

 Atributul NAME, care ataşează listei un nume (utilizat în perechea


"name=value" expediată serverului);

 Atributul SIZE, care precizează (printr-un număr întreg pozitiv,


valoarea prestabilită fiind 1) câte elemente din listă sunt vizibile la un moment dat
pe ecran (celelalte devenind vizibile prin acţionarea barei de derulare ataşate
automat listei).

Elementele unei liste de selecţie sunt incluse în listă cu ajutorul etichetei


<OPTION>. Două atribute ale etichetei OPTION se dovedesc utile:

 Atributul VALUE primeşte ca valoare un text care va fi expediat


serverului în perechea "name=value"; dacă acest atribut lipseşte, atunci către server
va fi expediat textul ce urmează după <OPTION>;

 Atributul SELECTED (fără alte valori) permite selectarea prestabilită


a unui element al listei.

Exemplu: Pentru a selecta in mod implicit valoarea Bucureşti, am folosit în dreptul


acesteia atributul SELECTED.

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

Figura 9.1.7 – Liste de selecţie cu valoarea implicită

113
Figura 9.1.8.- Alegerea din lista de selecţie a unui element

O listă de selecţie ce permite selecţii multiple se creează întocmai ca o listă


de selecţie obişnuită. În plus, eticheta <SELECT> are un atribut MULTIPLE (fără
alte valori). Când formularul este expediat către server, pentru fiecare element
selectat al listei se inserează câte o pereche "name=value", unde name este numele
listei.

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>

Figura 9.1.9 – Listă cu selecţie multiplă

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>

Figura 9.1.10 – Buton de expediere


116
Alături de butonul de tip SUBMIT, putem folosi şi un buton de tip RESET.
Prin apăsarea acestui buton toate elementele formularului vor reveni la valoarea lor
prestabilită, indiferent de valorile introduse de utilizator. Pentru a introduce un
buton de tip RESET, se procedează la fel ca şi la butonul de tip SUBMIT, singura
deosebire fiind că atributul TYPE va avea valoarea "RESET".

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>

Figura 9.1.11 – Formular cu butoanele “Submit” şi “Reset”


117
În urma apăsării pe butonul “Şterge” se vor schimba datele din casetele de
text “Nume” şi “Prenume” cu valorile iniţiale.

Figura 9.1.12 – Rezultatul obţinut după acţionarea butonului “Sterge”

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">&nbsp; &nbsp;
<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

1. Construirea unui site web personal.

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>&nbsp; <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>&nbsp;</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>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;
<p align="right">&nbsp;
</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>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;<p>&nbsp;
<p>&nbsp;
<p align="right">&nbsp;
</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

S-ar putea să vă placă și