Scribd
Încărcați
156 vizualizări

Laborator 2 HTML&CSS

Documentul prezintă elementele HTML pentru crearea și formatarea tabelelor, inclusiv tagurile <table>, <tr>, <th>, <td>, <thead>, <tbody> și <tfoot>. De asemenea, explică atributele acestor taguri și modul în care pot fi folosite pentru a extinde celulele pe coloane sau rânduri.

Încărcat de

Diana Cuza
Drepturi de autor
© © All Rights Reserved
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
156 vizualizări

Laborator 2 HTML&CSS

Documentul prezintă elementele HTML pentru crearea și formatarea tabelelor, inclusiv tagurile <table>, <tr>, <th>, <td>, <thead>, <tbody> și <tfoot>. De asemenea, explică atributele acestor taguri și modul în care pot fi folosite pentru a extinde celulele pe coloane sau rânduri.

Încărcat de

Diana Cuza
Drepturi de autor
© © All Rights Reserved
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 61

Laborator 2

Tabele
Formulare/Forms
Testare - INFORMATICA
http://wi-fi.cs.pub.ro/fim-info/index.php
Pagina HTML

1. Scrieti structura clasica a oricarei pagini HTML

2. Folositi urmatoarele elemente HTML:

<header> <main> <footer> <article> <p> <h1>


<h2> <h3> <h4> <a>

pentru a crea urmatoarea pagina:


Prima pagina HTML
<!DOCTYPE html>
<html>
<head> <title>Imi place sa invat HTML</title> </head>
<body>
<header>
<h1>News News News</h1>
<h2>Diverse Noutati</h2>
</header>
<main>
<h3>Ultimele Articole </h3>
<article>
<h4> Tehnologie </h4>
<p> Text
<a href="#" target="_blank">Read More...</a></p> </article>
<article>
<h4>Financiar</h4>
<p>Text
<a href="#" target="_blank">Read More...</a></p> </article>
<article>
<h4>Cultural</h4>
<p>Text
<a href="#" target="_blank">Read More...</a></p> </article>
</main>
<footer>
<hr/> <p> Prima tema HTML </p> <hr/>
</footer>
</body></html>
Prima pagina HTML

Adăugați 2 figuri folosind tagul <figure> în al doilea


< article> și apoi mai adăugați un paragraf <p>

<article> <p> ....</p>


<figure>
<img src =/>
<figcaption> Text </figcaption> <figure>
<figure>
<img src =/>
<figcaption> Text </figcaption> <figure>
<p> ...</p>
</article>
Tabele


Tabelele sunt specificate rand cu rand, fiecare rand
continand definitii pentru fiecare din celulele care il
formeaza. Prin urmare, se incepe prin a defini randul din
partea de sus, celula cu celula, apoi se defineste al doilea
rand, celula cu celula etc. Coloanele sunt calculate automat
pe baza numarului de celule care sunt in fiecare rand.

In acest fel, modelul de tabel din HTML este proiectat
astfel incat afisarea acestora sa se faca incremental, pe
masura ce randurile tabelului sosesc, fara a astepta
incarcarea completa.
Elementele HTML pentru Tabele

<table> </table> Definesc inceputul si sfarsitul unui tabel

<tr> </tr> Definesc inceputul si sfarsitul unui rand (row)

<th> </th> Definesc o celula din capul de tabel (header)

<td> </td> Definesc o celula de date dintr-un rand (data)

Celulele unui tabel pot contine doua tipuri de informatie: header
(implicit textul e scrise centrat si ingrosat) şi date.

Celulele date pot fi: text, links, imagini, liste, forms, alte tabele, etc.

Exemplu: <table>
<caption> Despre flori </caption>
<tr>
<th>flori</th>
<td>Randu1 , celula 1</td>
<td>Randul 1, celula 2</td>
<td>Randul 1, celula 3</td>
</tr>
</table>
Elementele HTML pentru Tabele


<caption> </caption> Scurta descriere a continutului
tabelului. Trebuie inserat imediat dupa tag-ul <table>. E
permisa doar o singura descriere pe tabel.

<thead> </thead> Grupeaza continutul capului de tabel
intr-un singur element HTML.

<tbody> </tbody> Grupeaza continutul corpului unui
tabel intr-un singur element HTML.

<tfoot> </tfoot> Defineste “footer” pentru un tabel.

<colgroup> Defineste un grup de coloane dintr-un tabel,
in vederea formatării.

<col /> Defineste valorile atributelor pentru una sau mai
multe coloane dintr-un tabel.
Atributele tag-ului <table> - Mai bine foloseste style!
align - alinierea tabelului relativ la textul inconjurator. Poate lua
valorile left, center, right. E invechit!
bgcolor - seteaza culoarea de fundal a tabelului. E invechit
border- seteaza latimea marginii tabelului, valoarea e in pixeli.
Atributul aplica chenar fiecarei celule si pentru intregul tabel.
Valoarea atributului schimba doar marginea intregului tabel, cea
pentru celule ramane setata la 1 pixel.
border-collapse:collapse – un singur chenar.
width – seteaza latimea tabelului.
cellspacing - spatierea intre celule, valoarea e in pixeli.
cellpadding - spatierea in interiorul celulelor, valoarea e in pixeli.
frame- stabileste marginile exterioare vizibile ale tabelului.Poate lua
valorile void, above, below, hsides, vsides, lhs, rhs, box/border.
IE afiseaza incorect.
rules-stabileste marginile interioare vizibile ale tabelului. Poate lua
valorile none, groups, rows, cols, all. IE afiseaza incorect.
Atributele tag-ului <table> cu style
In loc de atributul align folosim sintaxa CSS:
<table style="float:right">
In loc de atributul bgcolor folosim sintaxa CSS:
<table style="background-color:#00FF00">
In loc de atributul width folosim sintaxa CSS:
<table style="width:50%">
In loc de atributele border, frame si rules folosim:
border - seteaza marginile intr-o singura declaratie, in ordinea:
border-width border-style border-color
border-top /border-right /border-bottom /border-left - seteaza toate
proprietatile marginilor de sus /dreapta /jos /stanga intr-o singura
declaratie, in ordinea: border-top-width border-top-style
border-top-color
In loc de cellpading folosim:
padding - seteaza toate marginile din interiorul elementului, in
ordinea: padding-top padding-right padding-bottom padding-
left
Cateva atribute comune tag-urilor <th> si <td>
align – seteaza alinierea orizontala a continutului celulei. Poate lua
valorile left, right, center, justify, char.
valign - seteaza alinierea verticala a continutului celulei. Poate lua
valorile top, middle, bottom, baseline.
colspan - defineste numarul de coloane pe care o celula se poate
extinde. Ia valoare numerica.
rowspan - defineste numarul de linii pe care o celula se poate
extinde. Ia valoare numerica.
nowrap – continutul celului sa fie doar pe o singura linie. E
invechit, dar in loc folosim sintaxa CSS: <th style="white-space:
nowrap">
height – seteaza inaltimea unei celule. E invechit, dar in loc folosim
sintaxa CSS: <th style="height: 20px">
weight – seteaza latimea unei celule. E invechit, dar in loc folosim
sintaxa CSS: <th style="weight: 30px">
scope - defineste o asociere intre celule header si cele de date. Poate
lua valorile col, row, colgroup, rowgroup. Nu are efect visual in
browser.
Atributele tagurilor <th> sau <td>: colspan si rowspan
<th colspan=nr. coloane></th> sau <th rowspan= nr.randuri></th>

Pentru nevoi de organizare a datelor din tabel sau pentru


obtinerea de efecte, celulele pot fi extinse atat orizontal (pe mai
multe coloane) cat si vertical (pe mai multe randuri).

Celulele se extind intotdeauna in jos si/sau spre dreapta


-pentru a crea o celula care se extinde peste cateva coloane se
foloseste atributul COLSPAN in conjunctie cu tag-ul de
inceput a celei mai din stanga celule din rand,
- pentru a obtine extinderea unei celule peste mai multe randuri se
foloseste atributul ROWSPAN in conjunctie cu tag-ul de inceput a
celei mai de sus celule de pe coloana.

In cazul unor descrieri eronate (cu celule care se „suprapun“)


browserele reactioneaza diferit, efectele putand fi uneori
imprevizibile.
Atributele tagurilor <th> sau <td>: colspan si rowspan

<th colspan=nr. coloane></th> sau <th rowspan= nr.randuri></th>


<td colspan=nr. coloane></td> sau <td rowspan= nr.randuri></td>

Extinderea coloanelor/randurilor nu inseamna doar adaugarea


atributelor colspan/rowspan. Cand browserul intalneste acest
atribut furnizeaza spatiul necesar definit de valoarea
nr.coloane/nr.randuri celulei respective.

Pentru fiecare celula extinsa trebuie inlaturata definitia


corespunzatoare celulei respective.

Cand se extind celulele in ambele directii, adica se folosec ambele


atribute colspan si rowspan, trebuie inlaturate definitiile celulelor
din dreapta, din stanga si de pe diagonala.
Tag-ul <thead>

<thead> </thead> defineste un grup de randuri de tip


header (antet) intr-un tabel.

Un tabel definit cu <table> poate avea un singur <thead>,


care poate apare dupa <caption>, <col> sau <colgroup>,
si poate preceda elementele <tfoot> (optional) si <tbody>
(obligatoriu).

Prin gruparea explicita a randurilor de antet cu <thead>, se


ofera browserelor posibilitatea de a include acele randuri
pe fiecare pagina tiparita a unui tabel mare, precum si
posibilitatea de a prezenta tabele care permit scroll doar
randurilor de date, cele de antet ramanand fixe pe ecran.
Tag-ul <tfoot>
<tfoot></tfoot> defineste un grup de randuri de tip footer.
Poate oferi un rand special, de tip sumar sau de tip „nota
de pagina“, ce se aplica unui tabel intreg sau numai unei
portiuni din el.

Un tabel definit cu <table> poate avea un singur <tfoot>,


care poate apare dupa <thead> (optional) si poate preceda
elementul <tbody> (obligatoriu).

Prin gruparea explicita a randurilor de footer cu <tfoot>,


autorii ofera browserelor posibilitatea de a include acele
randuri pe fiecare pagina tiparita a unui tabel mare,
precum si posibilitatea de a prezenta tabele care permit
scroll doar randurilor de date, cele de footer ramanand
fixe pe ecran.
Tag-ul <tbody>
<tbody></tbody> defineste un grup de randuri de date
intr-un tabel.

Un tabel definit cu <table> poate avea unul sau mai multe


elemente <tbody>, care pot aparea dupa elementul
<tfoot> (optional).

Prin gruparea explicita a randurilor de date cu <tbody>,


autorii ofera browserelor posibilitatea de a prezenta tabele
care permit scroll doar randurilor de date, cele de header
si footer ramanand fixe pe ecran.

Gruparea randurilor de date in mai multe <tbody> permite


sugerarea unor prezentari diverse pentru diferitele
grupuri, prin intermediul style-sheet-urilor.
Ordinea/structura tag-urilor <thead> <tfoot><tbody>
<table>
<caption>Vezi urmatorul tabel ce descrie...</caption>
<thead>
<tr> ... informatii de header ... </tr>
</thead>
<tfoot>
<tr> ... informatii de footer ...</tr>
</tfoot>
<tbody>
<tr> ... primul rand al primului bloc de date ...</tr>
<tr> ... al doilea rand al primului bloc de date ...</tr>
</tbody>
<tbody>
<tr> ... primul rand al blocului doi de date ... </tr>
<tr> ... al doilea rand al blocului doi de date ...</tr>
<tr> ... al treilea rand al blocului doi de date ...</tr>
</tbody></table>
Tag-ul <colgroup>
Diviziune structurala - defineste un grup de coloane intr-un tabel.
Permite o prezentare comuna pentru tot grupul de coloane prin
intermediul style-sheet-urilor in loc sa definim style ptr fiecare
rand, celula.

Tag-ul <colgroup> trebuie sa apara in interiorul tag-ului <table>


dupa elementul optional <caption> si inaintea elementului
optional <thead>.

Poate avea atributele: align, valign, width, span.

Atributul span (implicit 1) defineste numarul de coloane din grup.

Atributul width specifica latimea fiecarei coloane din grup.


Valoarea trebuie sa fie un numar de pixeli, procent din latimea
tabelului sau o latime relativa exprimată ca ” i*”, i intreg.
Tag-ul <col />

Defineste doar atributelor comune unei coloane. Tag-ul <col />


nu grupeaza coloane dpdv structural – acesta fiind rolul lui
<colgroup>.

Tag-ul <col /> poate sa apara in exteriorul (direct in <table>) sau


in interiorul unui grup explicit de coloane defint cu <colgroup>.

Elementele <col /> sunt vide si servesc doar ca suport pentru


atribute.

Poate avea atributele: align, valign, width, span.


Numarul de coloane din tabel
Numarul de coloane ce fac parte dintr-un grup se poate specifica in
doua moduri (mutual exclusive):
-cu atributul span al elementului (valoare implicita 1):
<colgroup span="40" width="20"> </colgroup>
-cu elementul <col/>, inclus in <colgroup>, se reprezinta una
sau mai multe coloane din grupul respectiv.
<colgroup><col width="20"><col width="20">...pana la
40 de coloane </colgroup>.

Cand este necesar sa se individualizeze o coloana (ptr. stil, latime... )


intr-un grup, se poate identifica acea coloana cu un element <col>.
Ptr. exemplul anterior, primele 39 de coloane sunt la fel, iar ultima
coloana, a 40-cea, are alt format.:
<colgroup width="20">
<col span="39">
<col id="format-special"> </colgroup>
Calculul numarului de coloane din tabel
Se folosesc doua metode, prezentate in ordinea in care sunt folosite:

1.Daca <table> contine un element <colgroup> sau <col>


numarul coloanelor se calculeaza adunand:
-Pentru fiecare <col> valoarea atributului span (implicit 1).
-Pentru fiecare <colgroup> ce contine cel putin un <col> se
ignora atributul span al fiecarui <colgroup> si pentru fiecare
<col> se aplica pasul 1.
-Pentru fiecare <colgroup> vid se ia valoarea lui span (implicit1).

2. Daca <table> nu contine <colgroup> sau <col> numarul de


coloane se determina din descrierea randurilor. Numarul de
coloane este egal cu numarul maxim de elemente ce par pe un
rand (incluzînd şi celule ce se extind pe mai multe coloane).
Pentru toate randurile care au mai putine coloane se adauga la
sfarsit celule goale.
Calculul numarului de coloane din tabel
Cele 2 metode trebuie sa dea acelasi rezultat: 3 coloane (din lipsa de
spatiu n-am mai inchis tag-urile </tr> si </td>).
1 <table> 2. <table>
<colgroup span="3"></colgroup> <colgroup>
<tr><td>... <col>
...randurile tabelului... <col span= "2">
</table> </colgroup>
<tr><td>....
... randurile tabelului...
</table>
3. <table>
<colgroup> 4. <table>
<col> <tr>
</colgroup> <td><td><td>
<colgroup span="2"> </tr>
<tr><td>... </table>
... randurile tabelului...
</table>
Tema 1: atributele tag-ului <table>
Faceti o pagina de web care sa contina pe langa text si urmatorul tabel:
<table border=”0”><caption>Money, Money, Money!!!!</caption>
<tr>
<th>Nume </th>
<th>Luna</th>
<th>Economii</th>
</tr>
<tr>
<td></td>
<td>Ianuarie</td>
<td>100</td>
</tr>
</table>
....Introduceti mai multe linii in tabel
Se insereaza “no-breaking space” in celula goala: &nbsp;

Adaugati pe rand atributele:


align=”right” bgcolor = “#909090” border=”3” cellpadding="10"
cellspacing="8" frame="hsides" rules="cols"
Tema 2: tag-urile tabelelor folosind <style>
Folosind aceeasi pagina de web introduceti un nou tabel folosind <style>:

<!DOCTYPE html >


<html>
<head>
<title> Tabele cu stiluri</title>
<style type=”text/css”>
table, th, td { border:1px solid #770000;
border-collapse:collapse;}
th{background-color:#345fa4; color:#ffffff;}
td{ padding: 15px;}
</style>
</head>
<body>
<table>
....
Tema 3: atributele colspan si rowspan
Adaugati in pagina de web urmatorul tabel folosind atributele tag-ului
<th> colspan si rowspan.
Rezolvare Tema 3: atributele colspan si rowspan
<table border="1"><caption><em>Un tabel cu celule extinse pe linii si
coloane </em></caption>
<tr>
<th rowspan="2"> </th>
<th colspan="2">Average </th>
<th rowspan="2">Red<br/>eyes</th>
</tr>
<th>height</th>
<th>weight</th></tr>
<tr>
<th>Males</th>
<td>1.9</td>
<td>0.003</td>
<td>40%</td> </tr>
<tr>
<th>Females</th>
<td>1.7</td>
<td>0.002</td>
<td>43%</td></tr>
</table>
Forms

Forms / formularele – cresc gradul de interactivitate a
unui document HTML prin integrarea in document a
campurilor text statice si editabile, butoanelor radio,
casutelor de selectie, listelor de selectie si a campurilor
de editare.

Forms pot fi utilizate pentru introducerea unor date /
strangerea de informatie necesare aplicatiilor aflate in
"spatele" documentului. Datele sunt introduse de
utilizatorul browser-ului si a documentului HTML.

Exemple tipice de actiuni realizate cu ajutorul / prin
intermediul formularelor: o selectie dintr-o baza de date
(starea vremii dintr-o anumita regiune), un rezultat al unui
sondaj, vizualizarea unui document cu acces restrans.
Etape in proiectarea formularelor

In procesul de proiectare a unui document care utilizeaza


un formular HTML exista trei etape:

designul si implementarea (in HTML) a formularului de


intrare, care va fi vizualizat si completat de utilizator.

scrierea unei aplicatii care sa interpreteze datele introduse


in formular (aplicatie care este executata de un alt
calculator decat cel care ruleaza browser-ul cu formularul
– un server, de obicei cel care gazduieste serverul HTTP).

designul si implementarea documentului generat de


aplicatia de la punctul 2, ca raspuns la cererea
uilizatorului.
Continutul formularelor

Un formular HTML este o sectiune de document care contine: text,
elemente HTML uzuale; elemente speciale numite controale ; si
etichete ale acestor controale.

Fiecare control are obligatoriu:
– un nume, dat de atributul name al acelui control
– o valoare initiala specificata prin intermediul valorii
atributului value. Nu se modifica.
– o valoare curenta initial setata la valoarea initiala. Poate fi
modificata de utilizator prin intermediul actiunilor ce sunt
permise asupra controlului sau de scripturi.

Cand un formular este transmis pentru a fi prelucrat, unele
controale au numele legat de valoarea curenta, astfel se va transmite
un set de dublete numele controlului si valoarea sa curenta. Astfel
de controale sunt numite controale de succes.
Tipuri de controale
text input - permit introducerea unui text. Elementul input creaza
un control care are doar o singura linie disponibila, iar elementul
textarea creaza un control cu mai multe linii in care se poate
introduce text. In ambele cazuri textul ce se introduce devine
valoarea curenta a controlului.
checkbox - sunt elemente cu 2 stari on/off (selectat/deselectat). Este
"on" (selectat) cand atributul checked al lui este setat, devin
controale de succes. Intr-un formular mai multe checkbox-uri pot
avea acelaşi nume. Pentru crearea unui checkbox se foloseste
elementul input.
radio button - sunt exact ca checkbox-urile, cu excepţia faptului ca
atunci cand apar mai multe intr-un formular sunt mutual
exclusive: cand un astfel de buton este "on" (selectat), toate
celelalte care au acelasi nume sunt trecute automat pe "off". Pentru
crearea unui buton radio se foloseste elementul input.
Tipuri de controale
butoane: pentru crearea lor se foloseste elementul input sau buton
-butoane submit: cand este activat (apasat) trimite un formular
unui program de prelucrare. Un formular poate contine mai mult
de un buton submit.
-butoane reset: cand este activat (apasat) reseteaza toate
controalele la valorile lor intiale.
-butoane push: cand este activat nu are o actiune implicita. Poate
avea asociat un script de tip client-side si determina executia lui.
file select - permit sa se selecteze fisiere astfel incat continutul
acestora sa fie transmis odata cu formularul. Pentru crearea unui
control tip file select se foloseste elementul input.
menu -menurile ofera posibilitatea de a alege dintre mai multe
optiuni. Pentru crearea unui control de tip meniu se foloseste
elementul select in combinatie cu elementele optgroup si option.
object controls - permit inserarea de obiecte generice astfel ca
valorile asociate acestora sa fie transmise impreună cu celelalte
controale. Pentru crearea lui se foloseste elementul object.
Descrierea unui formular - tag-ul <form>
<form>...</form> - un container pentru controale, in interiorul
formularului se gasesc tag-urile care definesc controalele <select>
<input />, <textarea>, <button> etc.

Este folosit pentru a pasa date serverului specificand prin atributele


sale:
-programul ce va prelua formularul completat si transmis
-metoda prin care datele introduse vor fi trimise serverului

Exemplu cum se trimite un formular la o adresa de email:


<form action="mailto:[email protected]" method="post"
enctype =”text/plain”>
Nume: <br/> <input type="text" name="fname" size =''20'' />
<br/>
Email:<br /><input type="text" name="email" size="20" />
<br />
</form>
Atributele tag-ului <form>
action – specifica unde sa se trimita datele formularului. Obligator!
action="URL" - URL-ul programului care va fi executat
action="mailto: adresă@domeniu" - program de expediere a
continutului formularului.
method – specifica cum sa se trimita datele formularului la adresa
specificata in atributul action. Poate lua valorile:
method=”get”- datele formularului sunt adaugate la adresa URL:
ex: URL?name=value&name=value. Avantaj, se pot crea
bookmark-uri pe astfel de adrese. Dezavantaje, nu poate contine
caractere non-ASCII si limitarea impusa de lungimea maxima a
adresei URL permisa de browser si de server.
Atentie la informatia senzitiva!
method=”post” - datele formularului sunt in corpul cererii HTTP
post. Avantaj, mai robusta si mai securizata, nu are limitare de
dimensiune. Dezavantaj, nu se pot crea bookmark-uri.
name – specifica numele formularului, furnizand un mod de referire
a formularului cand e folosit intr-un script.
Atributele tag-ului <form>
enctype – specifica cum sa fie encodate datele formularului inainte
de a fi trimise serverului. Poate lua valorile:
enctype= ''application/x-www-form-urlencoded'' - toate
caracterele sunt encodate , cu caracterul spatiu inlocuit de "+" si
cu caracterele speciale inlocuite de valorile ASCII HEX
enctype= ''multipart/form-data'' – niciun caracter nu e encodat,
se foloseste cand avem un control de tipul file select.
enctype = ''text/plain'' – spatiile inlocuite de "+" , dar caracterele
speciale ne encodate.
Biblioteci publice, (exemplu CGI.pm) care ofera rutine ce preiau
transparent ceea ce se trimite cu get sau post (ca application/x-
www-form-urlencoded sau multipart/form-data).
accept-charset – specifica lista de codificari acceptate de serverul
care primeste datele formularului.Valoarea acestui atribut este o
lista "charsets" separate de virgula. (UTF-8 – caractere codificate
ptr Unicode , ISO-8859-1 – caractere codificate ptr alfabetul latin)
Tag-urile folosite in <forms>

<input /> Defineste un control ptr. introducerea
informatiei

<textarea>Defineste o zona pentru intoducerea textului

<label> Defineste o eticheta ptr un control de tip
<input/>

<fieldset> Defineste un chenar in jurul elementelor

<legend> Defineste un caption ptr elementul <fieldset>

<select> Defineste a drop-down list

<optgroup> Grupeaza optiunile intr-o lista

<option> Defineste o optiune in a select list

<button> Defineste un push buton

Tag-urile pentru crearea controalelor apar, in general, intr-un


element <form>, dar pot apare si in afara declaratiei lui <form>,
cand cream interfete si atunci nu pot fi controale de succes.
Crearea controalelor de baza cu tag-ul <input />
<input /> - creaza un control al unui formular permitand
introducerea datelor.

<input /> - utilizat de obicei in cadrul lui <form>, dar HTML


permite si folosirea lui in orice element block-level sau inline.

<input /> - creaza mai multe tipuri de controale (text input,


checkbox, radio buton, file select, button etc), individualizarea lor
facandu-se prin intermediul atributului type. Valoarea implicita
atribuita este type=''text''.

Cand formularul este transmis valoarea curenta a fiecarui


<input /> din <form> este trimisa sub forma unei perechi
nume/valoare. Atributul name ofera numele ce va fi folosit pentru
identificarea controlului respectiv, iar tipul valorii depinde de tipul
<input />.
Atributele tag-ul <input />

type – permite introducerea datelor specificand tipul controlului:


Text, Password, Checkbox, Radio button, Button, Reset,
Submit, File, Image (imagine ptr un buton submit), Hidden
(invizibil in browser, dar a caror valori sunt transmise cu
formularul - pastreaza informatia intre schimburile client/server).
name – specifica numele ce va fi folosit pentru identificarea
controlului respectiv, permite serverului sa interpreteze formularul
pentru a determina corelatia nume/valoare, dintre fiecare raspuns
al utilizatorului si elementele formularului.
value – specifica valoarea curenta, e diferita in functie de type:
type="button", "reset", "submit" - defineste textul de pe buton
type="text", "password", "hidden" - defineste valoarea de default
type="checkbox", "radio", "image" - defineste valoarea ce se
trimite atributului action din <form>.
type="file" nu poate fi folosit.
Atributele tag-ul <input />
checked- preselecteaza checkbox si radio button. Ia valoarea
checked.
disabled – deselecteaza un control. Ia valoarea disabled. Nu se poate
folosi cu type=''hidden''
src – se foloseste numai cu type =''image'' si specifica URL unei
imagini folosite pentru un buton submit.
alt - se foloseste numai cu type="image" si specifica un text
alternativ pentru utilizatorul care din diverse motive nu poate
vedea imaginea.
size - ptr type="text" si type="password", defineste numarul de
caractere visible. Pentru toate celelalte tipuri, defineste latimea in
pixeli.
maxlenght - specifica lungimea maxima, in caractere a controalelor
type="text" sau type="password''.
readonly- specifica textul introdus sa fie read-only pentru
type="text" sau type="password".
Atributele tag-ul <input />

Toate variatiile lui <input /> pot specifica si atribute


pentru evenimente. Sunt utilizate de scripturi pe diverse
evenimente, valoarea atributelor fiind un script:

onfocus cand elementul primeste focusul;


onblur cand elementul pierde focusul;
onselect cand textul dintr-un control de tip text sau
password este selectat;
onchange cand elementul pierde focusul si valoarea lui a
fost schimbata fata de momentul in care l-a primit;
onreset cand formularul se reseteaza;
onsubmit cand formularul e submis;
Exemple tag-ul <input />
<body><form action="form_action.asp" method="get">
Numele: <input type="text" name="fname" value=”Popescu”
size=”40” /><br />
Varsta<input type=”range” name=”age” min=”1” max =”100”
value=”25” /> <br/>
Parola: <input type=”password” name=”ps” size=”40” /><br/>
<input type="radio" name="sex" value="Mas" /> Masculin<br />
<input type="radio" name="sex" value="Fem" /> Feminin<br />
<input type="checkbox" name="cursuri" value="Fizica" /> Tema la
Fizica<br />
<input type="checkbox" name="cursuri" value="Info"
checked="checked" /> Tema la Informatica <br />
<input type="file" name="tema" />
<input type="reset" value="Resetez" />
<input type="submit" name=''trim'' value="Trimit datele" />
</form>
<p>Datele vor fi trimise la server intr-o pagina cu numele
"form_action.asp".<br/> Butonul de reset nu are nume deoarece starea
lui nu e niciodata transmisa serverului </p></body>
Exemple <input type =”hidden” />
type=”hidden” - permit inserarea in formulare a unor elemente care
nu sunt afisate de browser. Extrem de utile ptr aplicatiile cu mai
multe documente HTML: ceea ce se introduce poate fi
„transportat“ de la un formular la altul fara sa fie vizibil

Exemplu:
<html><body>
<form action="form_action.asp" method="get">
Email: <input type="text" name="email" /><br />
<input type="hidden" name="tara" value="Romania" />
<input type="submit" value="Submit" />
</form>
<p>Click pe butonul "Submit" si datele vor fi trimise la server intr-
o pagina cu numele "form_action.asp".</p></body></html>

Serverul a procesat formularul si a intors raspunsul:


email=&tara=Romania
HTML5 input types
color - selector de culoare
date - selector an/luna/zi fără ora.
datetime-local - selector an/luna/zi și ora, dar fara time-zone
month - control ce permite selectia an/luna
week - control ce permite selectia an/saptamana
number - text input ce permite doar valori numerice
range - un slider ce permite selectia unui numar.
search - text input folosit pentru search.
tel - text input folosit pentru numere de telefon
time -control ce permite introducerea orei, dar fara time-zone
url -text input care valideaza un url
email -text input care valideaza o adresa de e-mail.

Noi atribute ale tag<input> :


required, pattern, readonly, min/max, autocomplete, placeholder
Exemple <input type =”button” />
type=”button” un buton care se poate apasa si care se foloseste cu
scripturi (client-side). Atributul onclick este folosit pentru a defini
o acţiune ce se declansează cand butonul este apasat.

Exemplu:<html><head>
<script type="text/javascript">
function msg(){alert("Cucu bau!");}
</script>
</head>
<body>
<form>
<input type="button" name=”bt”value="Click me"
onclick="msg()" />
</form>
<p>Butonul activeaza functia JavaScript cand e apasat.</p>
</body></html>
Exemple: Search in pagina de Web

Urmatoarul exemplu defineste caseta de cautare din Yahoo:

<html>
<body>
<form action="http://search.yahoo.com/search" method="get">
<input type="text" name="p" size=”30” />
<input type="submit" value="search" />

<a href="http://search.yahoo.com/search/options">Options</a>
</form>
</body></html>
Tema tag-ul <input />
Faceti un formular in exemplu. Folositi type = “image” (atributele
src si alt sunt obligatorii si alte atributele width si height) si type=
“password”
tag-ul < button>...</button>
<button> creaza butoane in mod similar cu <input />, dar ofera mai
multe posibilitati de afisare - asocierea cu imagini, continut. Toate
browser-ele sugereaza pentru aceste butoane apasarea, spre
deosebire de cele definite cu <input /> care pot fi „plate“.

Atribute: name, value, type (button, reset, submit), disabled

<html><body>
<form action="form_action.asp" method="get">
Alege tara preferata de vizitat:
<button type="submit" name="tara" value="Italia">
Italia</button>
<button type="submit" name="tara" value="Peru">
Peru</button>
<button name="tara" type="submit" value="China"
disabled=''disabled''> China</button>
</form></body></html>
tag-ul < texarea>...</texarea>
<textarea> - creaza un control pentru introducerea unui text multi-
linie, valoarea initiala fiind afisata de browser in interiorul
controlului (nu trebuie sa contina tag-uri HTML).Poate fi si in
afara tag-ului <form>

Atribute: name, disabled, readonly si rows, cols (exprimate in nr de


caractere pe orizontala/verticala - nu inseamna o limitare,
umplerea ferestrei determina aparitia barelor de derulare)

Exemplu: <html><body>
<form action="http://somesite.com/text-read" method=”post”>
<textarea name="text" rows="10" cols="20">
Prima linie a textului iniţial. A doua linie a textului iniţial.
</textarea>
<input type="submit" value="Send" />
<input type="reset" />
</form></body></html>
Tag-ul <label>
<label>...</label> - asociaza o eticheta (label) cu un
control al unui formular introdus cu <input />. Folosirea
acestui tag permite duplicarea unor caracteristici ale
interfetei utilizator (GUI), cum ar fi de exemplu,
posibilitatea de a apasa o eticheta (text) pentru a selecta un
buton radio sau o un checkbox.

Fiecare element <label> este asociat cu exact un control.


Continutul elementului este eticheta controlului si poate
include elemente inline ( ca de exemplu <img>, <strong>,
<em>,<dfn>, <code>, <cite> etc.)

Atributul for specifica in mod explicit controlul care se


asociaza cu <label>. Valoarea lui for trebuie sa se
Metode de asociere a tag-ului <label> cu un control
Asocierea explicita cu atributul for:

<form><label for="masc">Masculin</label>
<input type="radio" name="sex" id="masc" /><br />
<label for="fem">Feminin</label>
<input type="radio" name="sex" id="fem" /></form>

Asocierea implicita, control continut de <label>:

<form><label>
<input type=”checkbox” name=”save” value=”yes” />
Salveaza user name si parola </label>
<label>Postati comentariile dvs:
<textarea name=”com” rows=”8” cols=”30”>
</textarea> </label></form>
Tag-urile <select>, <option> si <optgroup>

<select>...</select> - creaza un control pentru o lista de


optiuni (drop-down list).

Se foloseste in cadrul lui <form>, dar se permite


folosirea lui si in orice element block-level sau inline
(exceptia <button>). Netscape Navigator nu va afisa nici
un element <select> in afara unui <form>.

<option>...</option> - defineste posibilitatile de alegere


din lista. Fiecare optiune este continuta intr-un element
<option>, ce se gaseste inauntrul elemetului <select>.

Optiunile pot fi grupate logic cu <optgroup>.


Atributele tag-ului <select>

name - specifica numele unei liste drop-down. Valoarea
lui va fi trimisa serverului ca identificator al controlului
impreuna cu optiunea selectata.

size - specifica numarul de optiuni vizible din lista.
Implicit are valoarea 1. Daca este mai mare decat 1, lista
este prezentata intr-o fereastra inserata, valoarea lui size
indicand cate elemente pot fi vazute simultan.

multiple - nu are o valoare numerica asociata, prezenta
lui asigura doar posibilitatea selectiei mai multor elemente
ale listei simultan (cu tasta CTRL) care vor fi trimise la
server. Ia valoarea ''multiple''. E mai bine sa se
foloseasca checkbox-urile.

disabled – setarea ca inactiv (nu poate fi selectat, nu
este trimisa odata cu formularul). Se foloseste JavaScript
ptr a indeparta acest atribut. Ia valoarea ''disabled''.
Exemplu atribute pentru tag-ul <selected>

Selectati culoarea preferata:


<select name="culori" size=”1” >
<option>Rosu</option>
<option>Verde</option>
<option>Albastru </option>
<option>Turcoaz </option>
<option>Magenta </option>
</select>

Schimbati valoarea atributului size. Adaugati atributul


multiple=”multiple”.
Atributele tag-ului <option>

value - specifica valoarea ce va fi trimisa serverului
cand formularul e submis. Daca acest atribut lipseste se
considera valoare continutul tag-ului <option>.

label - specifica eticheta unei optiuni, care altfel
implicit este continutul elementului. E suportat doar IE
7+.

selected - defineste o optiune ce este initial selectata/
preselectata. Optiunea selectata este cea care va fi
afisata prima din lista. Se poate folosi acest atribut chiar
dupa ce pagina a fost incarcata folosind JavaScript. Ia
valoarea ''selected''.

disabled – determina transformarea unei optiuni in
optiune inactiva (nu poate fi selectata, nu este trimisa
odată cu formularul). Ia valoarea ''disabled''.
Exemplu atribute pentru tag-ul <option>

Selectati starea curenta:


<select name="emo" >
<option value=”opt”>Optimist</option>
<option value =”pes”>Pesimist</option>
<option value =”ama”>Amarat </option>
<option selected=”selected”value=”lef”>Lefter
</option>
<option value=”ipo”> Ipohondru</option>
</select>

Adaugati atributul disabled=”disabled”.


Tag-ul <optgroup>
<optgroup>...</optgroup> - defineste un grup de optiuni si
trebuie sa contina cel putin un element <option>. Descrie grupul
de optiuni grupate dpdv logic impreuna cu atributele label ale
fiecarei optiuni in parte.

<optgroup> nu este foarte bine suportat de toate browserele, dar


cele care nu il recunosc nu creaza nicio problema. Cele care il
suporta permit o afisare mai compacta prin intermediul meniurilor
cascadate (submeniuri).

Atributul label este obligatoriu, identifica grupul de optiuni.

Atributul disabled face intregul grup de optiuni


inactive/dezactivate, acestea neputand fi selectate si nici trimise la
server odata cu formularul.
Exemplu atribute pentru tag-ul <optgroup>
Selectati starea curenta:
<select>
<optgroup label="Ciocolata Belgiana">
<option value="Praline">Praline</option>
<option value="Fondante">Fondante</option>
</optgroup>
<optgroup label="Ciocolata Germana">
<option value="Amaruie">Ciocolata Amaruie</option>
<option value="Alba">Ciocolata Alba</option>
<option value="Alune">Ciocolata cu Alune</option>
</optgroup>
</select>

Adaugati atributul disabled=”disabled”.


Tag-urile <fieldset> si <legend>

<fieldset>...</fieldset> - permite gruparea tematica a


controalelor si a etichetelor unui formular. Prin aceasta
operatie formularele se divid in parti mai mici,
utilizatorul putandu-se orienta mai usor. Documentele
devin mai accesibile, oferind in plus si facilitati de
navigare (pentru browserele vizuale, de exmplu cu tasta
TAB).

<legend>...</legend> permite asignarea unei explicatii,


titlu unui element <fieldset>, imbunatatind
accesibilitatea. Elementul <legend> trebuie sa apara la
inceputul lui <fieldset>, inainte de orice alt element.
Exemplu pentru tag-urile <fieldset> si <legend>
<form action="mailto:[email protected]" method="post">
<fieldset>
<legend>Contact Information</legend>
<table>
<tr>
<td><label for=”nume”>Name:</label></td>
<td><input type=”text” name=”nume” id=”nume”></td>
</tr>
<tr>
<td><label for=”email”>E-mail Address:</label></td>
<td><input type=”text” name=”email” id=”email”></td>
</tr>
<tr>
<td><label for=”addr”>Mailing Address:</label></td>
<td><textarea name=”address” id=”addr” rows=4 cols=40>
</textarea></td></tr></table></fieldset></form>
Practica


Faceti un formular pentru a comanda pizza. Folositi toate
tipurile de controale invatate.
Bibliografie


HTML prin exemple – Tudor Gugoniu, Ed.Teora 2002

HTML, XHTML,CSS si XML prin exemple – Tudor Gugoniu,
Ed.Teora 2005

Crearea paginilor Web – Ned Suell, Ed. Teora 2002

Totul despre HTML 4 – Rick Darnell, Ed Teora.

http://www.w3schools.com/html/default.asp

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