Documente Academic
Documente Profesional
Documente Cultură
Curs HTML
Curs HTML
Structura
unui Tag- Atribute Legaturi
Introducere Formatarea Liste Imagini Cadre Formulare
document uri HTML Culori (hyperlink) Tabele
textului
HTML
(CTRL + clic )
1. Introducere in HTML
Sus
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY>
Bine ai venit!<BR>
Aceasta este prima mea pagina web<BR>
</BODY>
</HTML>
Sus
3. Tag-uri
Tag-urile sunt marcaje sau etichete pe care limbajul HTML le foloseste alaturi de texte pentru
a ajuta browser-ul de internet sa afiseze corect continutul paginii web.
Aceste tag-uri (etichete) pot fi de doua feluri:
- tag-uri pereche (un tag de inceput si unul de incheiere). Exemple: <HTML> si </HTML>;
<TITLE> si </TITLE>; <HEAD> si </HEAD>;
- tag-uri singulare (nu au un tag de incheiere) Exemple: <HR>, <BR>.
Sa vedem tag-urile de baza pe care trebuie sa le contina un document HTML:
<HTML> - cu acest tag incepe orice document HTML. Prin folosirea acestui tag ii spunem
browser-ului ca este vorba de un fisier HTML pentru a il putea afisa.
<HEAD> - intre aceste tag-uri sunt trecute, pe langa titlul paginii, diverse informatii folositoare
pentru browser-ul de internet, informatii pe care le vom descoperi pe parcursul acestui curs.
</HEAD> - acesta este tag-ul de incheiere al tag-ului <HEAD>
<TITLE> - da un titlu documentului, textul fiind afisat in bara de titlu a documentului.
1
</TITLE> - este tag-ul de încheiere al tag-ului <TITLE>. Arata sfarsitul titlului documentului.
<BODY> - odata cu acest tag incepe continutul paginii web. Tot ce vei scrie intre tag-urile
<BODY> si </BODY> va fi afisat, de catre browser, pe ecranul monitorului.
</BODY> - ii spunem browser-ului ca am terminat de scris continutul paginii. Tot ceea ce
vom scrie dupa acest tag nu va mai fi afisat.
</HTML> - este tag-ul de încheiere al tag-ului <HTML>. Codul oricarui document se termina
cu acest tag.
Tag-urile (etichetele) pot fi scrise atat cu litere mari cat si cu litere mici.
Sus
2
4. Atribute HTML
Atributele pot fi definite ca niste proprietati ale tag-urilor. Atributele se pun numai in tag-ul de
inceput. Daca un tag nu are nici un atribut, atunci browser-ul va lua in considerare valorile implicite
ale tag-ului respectiv.
Pentru a intelege mai bine notiunea de atribut sa vedem cateva exemple.
Atributul BGCOLOR care se foloseste cu tag-ul <BODY> indica ce culoare va avea fondul
viitoarei pagini web. Fondul unei pagini web are in mod implicit culoarea alba.
Atunci cand vrem sa trasam o linie, folosim tag-ul <HR> care vine de la Horizontal Rule care
inseamna linie orizontala. Daca nu ii asociem acestui tag nici un atribut atunci vom obtine o line
orizontala cat latimea paginii web.
Daca vrem sa diversificam caracteristicile unei linii orizontale vom apela la atributele tag-ului
<HR>.
Aceste atribute sunt urmatoarele: ALIGN - pentru alinierea liniei, COLOR - pentru culoarea
liniei, SIZE - pentru grosimea liniei si WIDTH - pentru lungimea liniei.
Pentru a trasa o linie rosie (COLOR="#FF0000"), cu o lungime de jumatate din valoarea
implicita (WIDTH="50%") si putin mai groasa decat cea implicita (SIZE="5%") ce va fi aliniata in
centrul paginii (ALIGN="center"), vom folosi urmatoarea linie de cod:
<HR COLOR="#FF0000" WIDTH="50%" SIZE="5%" ALIGN="center">
Acum sa folosim cele doua linii de mai sus in cadrul paginii noastre. Prima linie o vom folosi
la sfarsit, in timp ce a doua linie o vom folosi dupa mesajul "Bine ai venit!".
3
_parent
_top
<B> Text bold
<BODY> Cuprinsul documentului
background adresa imaginii Imaginea de fond
bgcolor cod culoare nume culoare Culoarea fondului
leftmargin procent din latimea numar de Distanta dintre marginea din
paginii pixeli stanga a ferestrei browserului
si marginea din stanga a
paginii
topmargin procent din inaltimea numar de Distanta dintre marginea de
paginii pixeli sus a ferestrei browserului si
marginea de sus a paginii
text cod culoare nume culoare Culoarea textului
5
value date de tip caracter Valoare input
<LI> Element al unei liste
<META> Metainformatii
content text Descrie valoarea atributului
name
name author Autor
description Descriere
keywords Cuvinte cheie
<OL> Lista ordonata
start numar Cu ce valoare incepe
numerotarea
type A, a, I, i, 1 Tipul numerotarii: A, a, I, i, 1
(implicit)
<P> Paragraf
align left Alinierea paragrafului
center
right
justify
<SELECT> Lista de selectii
multiple Permite selectia mai multor
elemente
name date de tip caracter Numele listei de selectii
size numar Numarul de elemente ale
listei
<STRONG> Text evidentiat
<SUB> Text indice
<SUP> Text exponent
<TABLE> Tabel
align left Alinierea tabelului
center
right
background URL Imaginea de fond pentru
tabel
bgcolor cod culoare nume culoare Culoarea fondului pentru
tabel
border procent numar de Chenarul tabelului
pixeli
bordercolor cod culoare nume culoare Culoarea chenarului
cellpadding numar de pixeli Spatiu intre continutul
celulelor tabelului si marginile
lor
cellspacing numar de pixeli Spatiu intre celulele tabelului
cols numar Numarul de coloane ale unui
tabel
hspace numar de pixeli Spatiu pe orizontala in jurul
tabelului
vspace numar de pixeli Spatiu pe verticala in jurul
tabelului
width procent numar de Latimea tabelului
pixeli
<TD> Celula de tabel
align left Alinierea continutului celulei
6
center pe orizontala
right
background URL Imaginea de fond pentru
celula
bgcolor cod culoare nume culoare Culoarea fondului pentru
celula
colspan numar Numarul de coloane pe care
se intinde celula
height numar de pixeli Inaltimea celulei
rowspan numar Numarul de linii pe care se
intinde celula
valign top Alinierea continutului celulei
middle pe verticala
bottom
width numar de pixeli Latimea celulei
<TEXTAREA> Camp de editare multilinie
cols numar Numarul de coloane
name date de tip caracter Numele campului de editare
multilinie
rows numar Numarul de randuri
<TITLE> Titlu document
<TR> Rand tabel
align left Alinierea continutului
center celulelor pe orizontala
right
Sus
7
5. Culori
Culoarea fondului unei pagini web
Culoarea paginii se stabileste cu ajutorul atributului BGCOLOR al tag-ului <BODY>.
Culoarea textului
Culoarea textului in cadrul unei pagini html se poate schimba folosind atributul COLOR
(culoare) al tag-ului <FONT>.
Exemplu:
9
LightSkyBlue #87CEFA
LightSlateBlue #8470FF
LightSlateGray #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
10
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
VioletRed #D02090
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32
Sus
11
6. Formatarea textului
Titluri
Atunci cand avem nevoie sa folosim un titlu in cadrul paginii noastre web putem apela la tag-
urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Cu ajutorul acestor tag-uri, care au si tag-uri de
incheiere, vom scrie titlurile din cadrul paginilor noastre web. Astfel in cadrul codului HTML vom
folosi tag-ul <H1>, de exemplu, urmat de textul titlului, iar la sfarsit vom folosi tag-ul de incheiere
</H1>. Tag-urile <H1> si </H1> permit scrierea unui titlu cu caracterele cele mai mari in timp ce
textul incadrat de tag-urile <H6> si </H6> va fi afisat cu caracterele cele mai mici.
Tag-urile <H1> ... <H6> accepta atributul ALIGN cu ajutorul caruia titlul va putea fi aliniat la
stanga, la centru sau la dreapta.
De exemplu :
<FONT FACE= “Arial “ COLOR=”#6495ED” SIZE=4>Limbajul HTML </FONT>
Daca vrem ca textul nostru sa fie scris cu caractere ingrosate, folosim perechea de etichete
<B> si </B>.
<B>Text bold</B>
Text bold
Pentru ca textul sa fie scris cu caractere italice, folosim perechea de etichete <I> si </I>.
<I>Text italic</I>
Text italic
Daca vrem ca textul sa fie afisat in centrul paginii putem folosi perechea de etichete
<CENTER> si </CENTER>.
<CENTER>Text centrat</CENTER>
Text centrat
Atunci cand vrem ca textul din cadrul paginii noastre web sa fie afisat pe mai multe randuri
vom folosi unul din tag-urile <BR> sau <P>. Tag-ul <BR> nu are tag de incheiere, in timp ce tag-ul
<P> are tag de incheiere, insa nu este obligatoriu.
Tag-ul <BR> vine de la line break (intrerupere de linie) si este folosit pentru a face trecerea
de la o linie la alta.
12
Tag-ul <P> vine de la cuvantul paragraf si se deosebeste de tag-ul <BR> prin faptul ca prin
utilizarea lui nu numai ca se trece pe urmatorul rand, dar se si lasa un rand liber intre texte. Sa
revenim la exemplul de mai sus. Se vor folosi ambele tag-uri, <BR> si <P>, pentru a se vedea
diferenta dintre ele.
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<BR>Exersez limbajul HTML.<P>Stiu limbajul HTML.
</BODY>
</HTML>
Daca scriem un text intre tag-urile <P> si </P>, atunci textul va fi incadrat de cate un rand
liber.
Cod HTML
Simbol
Numar Nume
 
¢ ¢ ¢
£ £ £
© © ©
« « «
® ® ®
° ° °
± ± ±
² ² ²
³ ³ ³
µ µ µ
¶ ¶ ¶
¹ ¹ ¹
» » »
¼ ¼ ¼
½ ½ ½
¾ ¾ ¾
  Â
Î Î Î
× × ×
Ø Ø Ø
â â â
î î î
÷ ÷ ÷
13
ø ø ø
Ş Ş
ş ş
Ţ Ţ
ţ ţ
€ € €
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY>
Bine ai venit!<BR>
Vom învăţa împreună limbajul HTML.
Aceasta este prima mea pagină web!
</BODY>
</HTML>
Sus
14
7. Liste
Listele pe care le putem crea cu ajutorul limbajului HTML sunt de urmatoarele tipuri: liste
neordonate, liste ordonate si liste de definitii.
Exemplu:
<HTML>
<HEAD>
<TITLE>Liste neordonate</TITLE>
</HEAD>
<BODY>
<UL>Firma noastră vă oferă următoarele servicii:
<LI>printare
<LI>laminare
<LI>xerox
<LI>tehnoredactare
</UL>
</BODY>
</HTML>
Cu ajutorul atributului TYPE, putem schimba cercul plin din fata fiecarui element. Acesta este
folosit in mod implicit atunci cand folosim o lista neordonata. Astfel, prin atribuirea unei valori
atributului TYPE, vom putea face ca elementele listei sa fie precedate de un patrat sau de un cerc
gol.
Exemplu:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
15
<OL>Pentru a cunoaste internetul trebuie sa studiati:
<LI>HTML
<LI>JAVA
<LI>JAVASCRIPT
</OL>
</BODY>
</HTML>
Ca si in cazul listelor neordonate, si la listele ordonate, atributul TYPE are o valoare implicita,
asa cum am vazut in exemplul de mai sus: numerele. in loc de numere putem folosi si alte
caractere. Pentru a folosi aceste caractere este de ajuns sa utilizam atributul TYPE cu valoarea
potrivita.
Pe langa atributul TYPE, pentru tag-ul <OL> mai putem folosi si atributul START. Acest
atribut este folosit atunci cand vrem sa schimbam valoarea initiala, de exemplu daca vrem sa
incepem de la 4, in cazul numerelor, sau de la D, in cazul literelor mari, etc. Forma generala a
acestui atribut este START=n, unde n este un numar natural.
Exemplu:
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL TYPE=A START=4>În vacanţa de vară am vizitat următoarele
oraşe:
<LI>Roma
<LI>Viena
<LI>Londra
<LI>Paris
<LI>Praga
</OL>
</BODY>
</HTML>
16
Exemplu de lista de definitii:
<HTML>
<HEAD>
<TITLE>Liste definitii</TITLE>
</HEAD>
<BODY>
<DL>
<DT><B>Teorema lui Pitagora</B>
<DD>În orice triunghi dreptunghic suma pătratelor catetelor este egală cu
pătratul ipotenuzei.
<DT><B>Teorema înălţimii</B>
<DD>În orice triunghi dreptunghic pătratul înălţimii este egal cu
produsul proiecţiilor celor două catete pe ipotenuză.
</DL>
</BODY>
</HTML>
Personalizarea listelor
Daca vrem ca in loc de simbolurile folosite in mod prestabilit pentru elementele listelor sa fie
afisate propriile imagini, in loc de tag-ul <LI> cu care introducem fiecare element al listei vom
adauga imaginea dorita cu ajutorul tag-ului <IMG>.
Exemplu:
<HTML>
<HEAD>
<TITLE>Lista personal</TITLE>
</HEAD>
<BODY>
<UL>Lista persoanelor care sunt angajate în cadrul departamentului Secretariat:
<BR><BR><IMG SRC="../Poze/firma.gif">Gheorghe Ana
<BR><BR><IMG SRC="../Poze/firma.gif">Petre Irina
<BR><BR><IMG SRC="../Poze/firma.gif">Mihai Ioana
</UL>
</BODY>
</HTML>
Sus
17
8. Imagini
Formatele imaginilor
Butoane:
buton1.gif marime: 877 bytes
buton2.gif marime: 925 bytes
buton3.gif marime: 921 bytes
Icon-uri:
icon1.gif marime: 336 bytes
icon2.gif marime: 245 bytes
icon3.gif marime: 401 bytes
Animatii:
animatie.gif marime: 9,27 Kb
In cazul fotografiilor, formatul jpg ofera o calitate mai buna a imaginii si ocupa un spatiu mult
mai mic decat in formatul gif.
Pentru a folosi imagini in cadrul paginilor web trebuie sa folosim tag-ul <IMG> insotit de
atributul SRC (source) care indica adresa sau calea catre imaginea respectiva.
<IMG SRC="numeleimaginii.extensie">
Exemplu:
<HTML>
<HEAD>
<TITLE>Imagini</TITLE>
</HEAD>
<BODY>
<CENTER><B>Adăugarea imaginilor în paginile web</B>
<BR>
<IMG SRC=Winter.jpg>
</CENTER>
</BODY>
18
</HTML>
Daca imaginea va fi de dimensiuni mai mari, atunci pana cand se va incarca si va fi afisata de
browser, utilizatorul poate vedea un text inlocuitor al imaginii. Acest lucru se poate realiza folosind
atributul ALT impreuna cu tag-ul <IMG>.
Daca trecem cursorul mouse-ului deasupra imaginii, o sa apara textul pe care l-am scris la
atributul ALT.
<BODY BACKGROUND=”../Poze/background1.jpg”>
Sus
19
9. Legaturi (hyperlink-uri)
Navigarea in cadrul site-urilor este posibila cu ajutorul legaturilor.
Daca pagina respectiva se afla in acelasi folder cu pagina pe care se afla legatura atunci nu
sunt necesare ghilimelele.
Daca pagina catre care vrem sa facem o legatura, nu se afla in acelasi folder cu pagina
noastra atunci trebuie sa specificam calea catre pagina HTML ca valoare a atributului HREF.
Exemplu :
<A HREF="Documente/Carti/Capitolul_I.html">Text link</A>
Exemplu :
<A HREF="http://www.edu.ro">Ministerul Educatiei</A>
Legaturile catre ancorele din cadrul aceleiasi pagini HTML vor avea urmatoarea forma:
<A NAME="#ancora1">Legatura catre prima sectiune</A>
<A NAME="#ancora2">Legatura catre a doua sectiune</A>
Legaturile catre ancore din cadrul altei pagini HTML vor avea urmatoarea forma:
<A NAME="numelepaginii.html#ancora1">Legatura catre prima sectiune</A>
<A NAME="numelepaginii.html#ancora2">Legatura catre a doua sectiune</A>
Pentru fiecare culoare, din cele trei de mai sus, exista cate un atribut al tag-ului </BODY> cu
ajutorul caruia putem schimba culoarea implicita:
• LINK pentru legaturile nevizitate
• VLINK pentru legaturile vizitate
• ALINK pentru legaturile active
Exemplu: Dorim ca in cadrul paginii web, legaturile sa fie de culoare rosie atunci cand nu au
fost vizitate, de culoare neagra cele vizitate si de culoare portocalie atunci cand se trece cu
mouse-ul pe deasupra lor:
Sus
21
10. Tabele
Cu ajutorul tabelelor putem controla mult mai bine elementele din cadrul paginilor web.
Exemplu:
<HTML>
<HEAD>
<TITLE>Tabel elevi olimpici</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><B>Nume</B></TD>
<TD><B>Prenume</B></TD>
<TD><B>Clasa</B></TD>
</TR>
<TR>
<TD>Ion</TD>
<TD>Marian</TD>
<TD>9</TD>
</TR>
<TR>
<TD>Matei</TD>
<TD>Petre</TD>
<TD>10</TD>
</TR>
<TR>
<TD>Dobre</TD>
<TD>Maria</TD>
<TD>9</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Proprietatile tabelelor
Pentru ca liniile unui tabel sa fie vizibile tag-ul <TABLE> trebuie sa fie insosit de atributul
BORDER avand valoarea egala cu cel putin 1. In plus, poti schimba culoarea liniilor unui tabel
folosind atributul BORDERCOLOR insotit de codul culorii dorite.
Pentru a avea decat o singura linie vom folosi atributul CELLSPACING cu valoarea "0". Acest
atribut specifica distanta dintre celulele unui tabel.
Atributul CELLPADING arata distanta dintre marginile celulelor si textul din cadrul acestora.
22
Pentru a stabili dimensiunea unui tabel, unui rand sau a unei celule, folosim atributele WIDTH
pentru latime si/sau HEIGHT pentru inaltime.
Pentru alinierea datelor din cadrul tabelului folosim atributul ALIGN cu una dintre valorile
"left", "center" sau "right".
Pentru a alinia datele tabelului pe verticala folosim atributul VALIGN insotit de una dintre
valorile "top", "middle" sau "bottom".
Pentru a schimba culoarea unei celule, unui rand sau chiar a intregului tabel folosim atributul
BGCOLOR impreuna cu codul culorii alese.
Exemplu :
<HTML>
<HEAD>
<TITLE>TABEL CU CELULE MARI</TITLE>
</HEAD>
<BODY>
<TABLE BORDER COLOR=BLACK CELLSPACING=0 WIDTH=300 HEIGHT=200>
<TR>
<TD BGCOLOR=RED></TD>
<TD COLSPAN="2" BGCOLOR=WHITE></TD>
<TR>
<TD ROWSPAN="3" BGCOLOR=BLUE></TD>
<TD BGCOLOR=YELLOW></TD><TD BGCOLOR=BLACK></TD>
</TR>
<TR>
<TD BGCOLOR=GREEN></TD><TD BGCOLOR=WHITE></TD>
</TR>
<TR>
<TD BGCOLOR=PINK></TD><TD BGCOLOR=RED></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Sus
23
11. Cadre
Cu ajutorul cadrelor putem imparti o pagina web in mai multe zone, iar apoi putem stabili ce
pagina va fi afisata in fiecare zona.
Pentru a imparti o pagina web in mai multe cadre, trebuie sa folosim, inainte de tag-ul
<BODY>, tag-ul <FRAMESET> insotit de unul dintre atributele <COLS> sau <ROWS>, pentru a
defini exact cum va fi impartita pagina respectiva.
De exemplu, pentru a imparti pagina in doua cadre orizontale vom folosi urmatoarea linie de
cod:
<FRAMESET ROWS="70%,*">
Se folosesc procente pentru a defini marimea randurilor sau a coloanelor care vor forma
cadrele. In exemplul de mai sus, primul cadrul va avea 70% din inaltimea paginii, iar al doilea
cadru restul, adica "*" sau 30%.
Pentru a imparti pagina web in mai multe cadre orizontale, se vor asocia mai multe procente
atributului ROWS, dar avand grija ca suma lor sa nu depaseasca 100%. La fel se procedeaza si
pentru impartirea unei pagini web in cadre verticale singura deoasebire fiind aceea ca in locul
atributului ROWS se foloseste atributul COLS.
Exemplu.
Vom crea patru pagini web fiecare avand culoarea de background rosu, respectiv albastru,
galben sau verde. Apoi vom crea cincea pagina web in care vom defini cadrele si care le va
contine practic pe celelalte patru pagini. Numele celor patru pagini web vor fi rosu.html,
albastru.html, galben.html si verde.html.
<HTML>
<HEAD>
<TITLE>Cadre</TITLE>
</HEAD>
<FRAMESET COLS="25%,*" FRAMEBORDER="no" FRAMESPACING="0">
<FRAME SRC="rosu.html">
<FRAMESET ROWS="45%,35%,*" FRAMEBORDER="no" FRAMESPACING="0">
<FRAME SRC="albastru.html">
<FRAME SRC="galben.html">
<FRAME SRC="verde.html">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>
Sus
24
12. Formulare
Campurile de editare
Pentru a introduce in cadrul unui formular un camp de editare, trebuie sa folosim pentru
atributul TYPE, al tagului <INPUT>, valoarea text.
Atributele cele mai folosite pentru tagul <INPUT> de tipul camp de editare sunt:
• SIZE, care reprezinta latimea campului de editare
• MAXLENGTH, specifica numarul maxim de caractere care pot fi introduse in campul de
editare
• VALUE, valoarea initiala a campului de editare
25
Exemplu:
<INPUT NAME="exemplu" TYPE="text" VALUE="Camp de editare" SIZE="20"
MAXLENGTH="30">
Daca vrem sa introducem un camp de editare de tip "parola", atributul TYPE va avea
valoarea "password". In acest caz, caracterele introduse in campul de editare, nu vor fi vizibile .
Atunci cand vrem sa adaugam in cadrul formularului nostru un camp de editare in care sa
poata fi introduse mai multe randuri, folosim campurile de editare de tip multilinie. Pentru a folosi
un astfel de camp de editare, avem nevoie de tag-urile <TEXTAREA> si </TEXTAREA>.
Am folosit atributul COLS pentru a stabili numarul de caractere al fiecarui rand, atributul
ROWS pentru numarul de randuri al campului de editare, iar atributul NAME pentru numele
campului de editare.
Butoanele radio
Daca avem o intrebare cu mai multe variante de raspuns, vom folosi butoanele radio. Pentru
a introduce un buton radio, folosim tag-ul <INPUT>, iar la atributul TYPE, valoarea "radio".
Exemplu:
Codul HTML care va afisa in cadrul browser-ului, intrebarea de mai sus si variantele de
raspuns, este urmatorul:
Cu ajutorul atributului CHECKED, fara alte valori, putem selecta un buton radio in mod
prestabilit. Nu pot fi selectate mai multe butoane radio dintr-un grup, in acelasi timp.
Casetele de validare
Pentru a introduce o caseta de validare (checkbox) se utilizeaza eticheta <INPUT> cu
atributul TYPE avand valoarea "checkbox".
26
Casetele de validare permit selectarea sau deselectarea uneia sau mai multor optiuni.
Exemplu:
Asa cum se poate observa, in cazul casetelor de validare, spre deosebire de butoanele radio,
pot fi selectate mai multe optiuni. Codul casetelor de validare de mai sus este urmatorul:
Unde vă petreceţi 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">Acasă
Casetele de fisiere
Pentru a trimite un fisier prin intermediul unui formular, folosim pentru atributul TYPE al tag-
ului <INPUT>, valoarea "file".
Exemplu:
<INPUT TYPE="file" NAME="file">
Listele de selectie
O lista de selectie, asa cum ii spune si numele, permite utilizatorului sa aleaga una sau mai
multe optiuni dintr-o lista.
Listele de selectie pot fi introduse in cadrul unui formular cu ajutorul tag-urilor <SELECT> si
</SELECT>.
Pentru a selecta in mod implicit valoarea Muntenia, am folosit in dreptul acesteia atributul
selected. Codul listei de selectie de mai sus este urmatorul:
<SELECT>
<OPTION value=Moldova>Moldova</OPTION>
<OPTION value=Transilvania>Transilvania</OPTION>
<OPTION value=Muntenia selected>Muntenia</OPTION>
<OPTION value=Oltenia>Oltenia</OPTION>
<OPTION value=Dobrogea>Dobrogea</OPTION>
<OPTION value=Banat>Banat</OPTION>
</SELECT>
27
Pentru a putea selecta mai multe valori din cadrul unei liste de selectie trebuie sa folosim
pentru tag-ul <SELECT> atributul MULTIPLE, fara alte valori.
Alaturi de butonul de tip Submit, putem folosi si un buton de tip Reset. Prin apasarea acestui
buton toate elementele formularului vor reveni la valoarea lor prestabilita, indiferent de valorile
introduse de utilizator.
Pentru a introduce un buton de tip Reset, se procedeaza la fel ca si la butonul de tip Submit,
singura deosebire fiind ca atributul TYPE va avea valoarea "reset".
Linia de cod care introduce in cadrul unui formular un buton de tip Reset:
<INPUT TYPE="reset" VALUE="Sterge">
Sus
28