Sunteți pe pagina 1din 31

Cateva taguri si atributele lor

TAG p ATRIBUT = VALOARE EXEMPLE (observaii) align="left" <p align="left"> stanga</p> align="center" <p align="center"> centru</p> align="right" <p align="right"> dreapta</p> size poate fi de la "1" la "7". size="5" <font size="5">fontsize5</font> color="#FFFF00" <font color= "#FFFF00"> Text galben </font> <font face="Arial">Arial</font> face="Arial" border="1" cellpadding="4" cellspacing="4" spatiul intre celule = 4 puncte width="100%"> width="33%" rowspan="2" colspan="2" Vezi tabelul de mai jos

font

table

<td>

celule fuzionate pe verticala 2 celule fuzionate pe orizontala 2

Exemplu de tabel cu fuzionarea celulelor

4
Tabelul de mai sus are codul <table border="1" cellpadding="4" cellspacing="4" width="70%"> <tr> <td width="33%">1</td> <td width="33%">2</td> <td width="34%" rowspan="2">3</td> </tr> <tr> <td width="66%" colspan="2">4</td> </tr> </table> unde <tr> este tag pentru randuri (row) si <td> este tag pentru caseta

13. Tag-uri
Marcaje de baza

<HTML> </HTML>

Defineste un fisier in format Web

<HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> BGCOLOR = culoare

Antetul documentului Tilul documentului Corpul paginii HTML Culoarea de fond a paginii

TEXT=culoare LINK=culoare VLINK=culoare ALINK=culoare BACKGROUND = url

Culoarea textului pe paginii Culoarea legaturiilor nevizitate din paginii Culoarea legaturiilor vizitate din paginii Culoarea legaturiilor pe durata clicului exacutat de utilizator Imaginea de fond pentru pagina

<P> <Hn> <Hn> <FONT> </FONT> SIZE=n FACE="a,b"

Paragraf Nivel de subtitlu al documentului (n = 1-6) Specifica atribute ale textului incadrat Dimensiunea textului este 1-7 Specifica fontul: a, daca este disponibil, sau b

COLOR=s <BR>

Culoarea textului: fie un nume de culoare , fie o valoare RGB Linie noua

<PRE> </PRE> <!-- --> <CENTER> </CENTER> <HR>

Informatie preformatata Comenatriu HTML Centreaza materialul in pagina Rigla orizontala

SIZE=x WIDTH=x NOSHADE ALIGN=x COLOR=x

Inaltimea riglei in pixeli Latimea riglei in pixeli sau in procente Dezactiveaza afisarea umbrei pentru rigla orizontala Alinierea riglei orizontala in pagina (left, center, right) Culoarea riglei orizontale(numai pentru IE)

<A> </A> HREF=url HREF=#nume Name=nume

Marcaj de tip ancora Referinta hipertext Referinta catre o ancora interna Definitia unei ancore interne

Marcaje pentru liste

<DD> <DL> </DL>

Descriere definitie Lista de tip definitie

<DT> <LI> <OL TYPE=tip

Termen de definitie Element de lista Lista ordonata (numerotata) Tipul numerotarii. Valori posibile: A, a, I, i, 1

START=x <UL TYPE=forma

Numarul de inceput al listei ordonate Lista neordonata (marcata) Forma marcajului. Valori posibile: circle, square, disc.

Formatarea caracterelor

<B> </B> <I> </I> <U> </U> <TT> </TT>

Afiseaza text cu caractere aldine Afiseaza text cu caractere cursive Afiseaza text subliniat Text cu font monospatiu

<CITE> </CITE> <CODE> </CODE> <EM> </EM> <KBD> </KBD>

Citare bibliogarfica Listing de program Stil logic de evidentiere Text de la tastatura

<STRONG> </STRONG> <VAR> </VAR> <BASEFONT SIZE = n>

Evidentiere logica puternica Program sau variabila Specifica dimensiunea implicita a fontului din pagina

Marcaje pentru cadre

<FRAMESET> </FRAMESET> COLS=x ROWS=x

Definirea redactarii paginii Numarul si marimea relativa a coloanelor Numarul si marimea relativa a liniilor

BORDER=x FRAMEBORDER =x FRAMESPACING =x <FRAME> SRC=url

Specifica starea "on" (activa) sau "off" (inactiva) pentru chenarul cadrului FRAMESET (1 sau 0) Specifica marimea chenarului Marimea spatiului dintre doua cadre adiacente Definitia unui anumit cadru URL-ul sursa pentru cadru

NAME=nume SCROLLING=scrl FRAMEBORDER=x MARGINHEIGHT=x

Numele cadrului (utilizat impreuna cu TARGET=nume ca parte componenta a marcajului de tip ancora <a> Defineste optiunea barei de derulare.Valori posibile: on(activa), off(inactiva), auto (automat) Marimea chenarului din jurul cadrului Spatiul suplimentar de deasupra si dedesubtul unui anumit cadru

MARGINWIDTH=x <NOFRAMES> </NOFRAMES> <IFRAME> SRC=url

Spatiu suplimetar la stanga si la dreapta unui anumit cadru Sectiunea de pagina afisata pentru utilizatorii care nu pot vedea un cadru Cadru intern (numai pentru (IE) Sursa cadrului

NAME=s HEIGHT=x WIDTH=x

Numele ferestrei (util pentru TARGET) Inaltimea cadrului inglobat Latimea cadrului inglobat

Marcaje pentru tabele

<TABLE> </TABLE> BORDER=x CELLPADDING=x CELLSPACING=x

Tabel HTML Chenarul tabelului Spatiul suplimentar in cadrul celulelor tabelului Spatiul suplimentar intre celulele tabelului

WIDTH=x FRAME=valoare RULES=valoare BORDERCOLOR =culoare

Latimea impusa tabelului Ajustarea fina a tabelului Ajustarea fina a riglelor tabelului Specifica culoarea chenarului tabelului

BORDERCOLORLIGHT = culoare BORDERCOLORDARK = culoare ALIGN=left ALIGN=right

Cea mai deschisa culoare din cele doua culori specificate Cea mai inchisa culoare din cele doua culori specificate Aliniaza tabelul la marginea din stanga a paginii, iar textul curge in partea dreapta Aliniaza tabelul la marginea din dreapta a paginii, iar textul curge in partea stanga

HSPACE=x VSPACE=x COLS=x <COLGROUP> </COLGROUP> <COL WIDTH=x>

Spatiu suplimetar pe orizontala in jurul tabelului Spatiu suplimetar pe verticala in jurul tabelului Specifica numarul de coloane ale unui tabel Defineste un set de definitii de coloane cu ajutorul marcajului <col> Defineste latimea unei coloane exprimata in pixeli

<THEAD> </THEAD> <BODY> </TBODY> <TR </TR> BGCOLOR=culoare ALIGN=aliniere

Defineste titlul tabelului Defineste corpul tabelului Linie de tabel Specifica culoarea de fond pentru intreaga linie Alinierea celulelor de pe linia curenta (left, center, right)

<TD </TD> BGCOLOR=culoare

Celula de date a tabelului Specifica culoarea de fond pentru celula de date

COLSPAN=x ROWSPAN=x ALIGN=aliniere VALIGN=aliniere

Numarul de coloane pe care se intinde celula curenta de date Numarul de linii pe care se intinde celula curenta de date Alinierea materialului din cadrul celulei de date.Valori posibile: (left, right, center) Alinierea pe verticala a materialului din cadrul celulei de date.Valori posibile: (top, bottom, middle)

BACKGROUND=url NOWRAP ALIGN=baseline ALIGN=caracter ALIGN=justify

Specifica imaginea de fond pentru celula tabelului Nu permite despartirea textului pe linii in cadrul unei celule Aliniaza celule de date cu linia de baza a textului adiacent Aliniaza o coloana fata de un anumit carcater (caracterul prestabilit este ".") Aliniaza atat marginea din stanga cat si marginea din dreapta a unui text

Adaugarea imaginilor

<IMG SRC=url

Marcajul de introducere a imaginilor Sursa fisierului grafic

ALT=text ALIGN=aliniere HEIGHT=x WIDTH=x

Textul alternativ de afisat, daca este necesar Alinierea imaginii in pagina. Valori posibile: top (sus), middle(in mijloc), bottom (jos), left (in stanga), right (la dreapta) Inaltimea imaginii (in pixeli) Latimea imaginii

BORDER=x HSPACE=x VSPACE=x

Chenarul din jurul imaginii, atunci cand aceasta este utilizata ca hiperlegatura Spatiul suplimentar pe orizontala din jurul imaginii (in pixeli) Spatiul suplimentar pe verticala din jurul imaginii (in pixeli)

Marcaje pentru formulare

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

Formular HTML activ Programul CGI de pe serverul care receptioneaza datele Modul in care datele sunt transmise serverului(GET sau POST)

<INPUT

Camp de text sau alte date de intrare Tipul campului de intrare <INPUT>. Valori posibile: text,password,checkbox,hidden,file, radio,submit,reset,image. Numele simbolic al valorii campului

TYPE=optiune

NAME=nume

VALUE=valoare CHECKED=optiune SIZE=x SIZE=x <SELECT> </SELECT>

Continutul prestabilit al campului de text Buton/caseta marcata in mod prestabilit Numarul de caractere al unui camp de text Numarul maxim de caractere acceptate Grup de casete de validare

NAME=nume SIZE=x MULTIPLE=x <OPTION

Numele simbolic al valorii campului Numarul de articole de meniu care se afiseaza odata (prestabilit=1) Permite selectia unor articole de meniu multiple Alegerea particulara intr-un domeniu <SELECT>

VALUE=valoare <TEXTAREA> </TEXTAREA> NAME=nume ROWS=x COLS=x

Valoarea rezultanta a acestei selectii din meniu Camp de intare de tip text pe linii multiple Numele simbolic al valorii campului Numarul de linii al casetei de text Numarul de coloane (caractere) pe linie al casetei de text

<FIELDSET> </FIELDSET> <LEGEND> </LEGEND> ALIGN=s TABINDEX=x ACCESKEY=c

Imparte formularul in parti logice Numele asociat setului de campuri (fieldset) Specifica alinierea legendei (explicatiei) afisate (top,bottom,left,right) Specifica ordinea elementelor atunci cand utilizatorul apasa tasta Tab Specifica tasta care asigura comanda rapida de la tastatura asociata unui anumit element

DISABLED READONLY

Elementul este inactiv, dar este afisat pe ecran Elementul este afisat pe ecran dar nu poate fi editat

Carcatere speciale

& <

&amp; ampersand tilda mai mic (less than)

>

mai mare (greater than) simbolul de copyright simbolul pentru marca inregistrata a mic cu accent ascutit (acute) a mic cu accent circiumflex

n mic cu tilda o mic barat (slash)

HTML avansat

<STYLE> </STYLE> TYPE=val <SCRIPT> </SCRIPT> LANGUAGE=limbaj

Specifica informatii referitoare modelul de stiluri Tipul modelului de stiluri. De regula "text/css" Include un script de regula Javascript, in pagina Web Limbajul utilizat

EVENT=eveniment FOR=numeobiect

Eveniment care declanseaza executia unor scripturi specifice Numele obiectului din pagina asupra caruia actioneaza scriptul

Tag-uri de baz n HTML


1. 2. 3. 4. 5. 6. 7. 8. Noiuni generale Marcaje de baz Marcaje pentru liste Formatarea caracterelor Marcaje pentru cadre Marcaje pentru tabele Adugarea imaginilor Tabel diacritice

Noiuni generale O pagin web are n componena dou elemente de baz. <html> <body>

Continutul paginii va fi aici </body> </html> Primul tag se numeste <html> i este cel care i spune browser-ului c a nceput un cod n HTML. Cel de-al doilea tag, <body>, spune browser-ului c aici ncepe partea vizibil sau coninutul paginii HTML. Tag-urile </body> i </html> sunt tag-uri de nchidere. </body>, d de tire browser-ului, c s-a ncheiat coninulul pagini, iar </html> c s-a ncheiat documentul HTML. Slesh "/" este pus naintea numelui tag-ului i spune browserului c ar dori s ncheie respectiva funcie. Deci <tag> este folosit pentru a ncepe o funcie, iar </tag> pentru a o ncheia. Ordinea deschiderii i a nchiderii tag-urilor este foarte important. Dac un tag este deschis ntr-un altul, de exemplu body este deschis n html atunci acel tag (body) este cel care trebuie nchis naintea celui de-al doilea tag (html). Am nchis mai nti body pentru c a fost cel care s-a deschis cel mai recent. Aceast regul i anume deschiderea i nchiderea tag-urilor se aplic la toate celelalte taguri ale documentelor HTML. <head> Acest tag urmeaz imediat dup <html> i este folosit pentru a indica browser-ului, informaii utile precum: titlul pagini, coninutul (folosit de motoarele de cutare vechi) i multe altele <title> Se pune ntre <head> i </head>. Acest tag este cel care d numele pagini. Numele va fi afiat n browser, de obicei n partea stng sus. <h2>

Acesta este titlul care apre n pagin, nainte de coninut i va fi mai mare dect litera de coninut. <h2> nseamn c e ce a de-a doua mrime a literei ntre cele ase care exist. <h1> este cea mai mare iar <h6> va fi cea mai mic. <p> Este tag-ul care marcheaz deschiderea i ncheierea unui paragraf. Aa c atunci cnd vei ncepe un paragraf asigur-te c ai pus <p> la nceput i </p> la sfrit.

napoi Marcaje de baz


<HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> BGCOLOR = culoare TEXT=culoare LINK=culoare VLINK=culoare Definete un fiier n format Web Antetul documentului Tilul documentului Corpul paginii HTML Culoarea de fond a paginii Culoarea textului pe pagin Culoarea legturiilor nevizitate din pagin Culoarea legturiilor vizitate din pagin

ALINK=culoare BACKGROUND = url <P> <Hn> <Hn> <FONT> </FONT> SIZE=n FACE="a,b" COLOR=s <BR> <PRE> </PRE> <!-- -->

Culoarea legturiilor pe durata clicului executat de utilizator Imaginea de fond pentru pagin Paragraf Nivel de subtitlu al documentului (n = 1-6) Specific atribute ale textului ncadrat Dimensiunea textului este 1-7 Specific fontul: a, dac este disponibil, sau b Culoarea textului: fie un nume de culoare, fie o valoare RGB Linie nou Informaie preformatat Comenatriu HTML

<CENTER> </CENTER> Centreaz materialul n pagin <HR> SIZE=x WIDTH=x NOSHADE ALIGN=x COLOR=x Rigl orizontal nlimea riglei n pixeli Limea riglei n pixeli sau n procente Dezactiveaz afiarea umbrei pentru rigla orizontal Alinierea riglei orizontale n pagina (left, center, right) Culoarea riglei orizontale (numai pentru IE)

<A> </A> HREF=url HREF=#nume Name=nume <sup></sup> <sub></sub>

Marcaj de tip ancor Referin hipertext Referin ctre o ancor intern Definiia unei ancore interne Text exponenial, superscript. Exp: 23 se scrie 2<sup>3</sup> Tagul subscript. Exp: H2O se scrie H<sub>2</sub>O

napoi Marcaje pentru liste


<DD> <DL> </DL> <DT> <LI> <OL> TYPE=tip START=x <UL> TYPE=form Descriere definiie Lista de tip definiie Termen de definiie Element de list List ordonat (numerotat) Tipul numerotrii. Valori posibile: A, a, I, i, 1 Numrul de nceput al listei ordonate List neordonat (marcat) Forma marcajului. Valori posibile: circle, square, disc.

napoi

Formatarea caracterelor
<B> </B> <I> </I> <U> </U> <TT> </TT> <CITE> </CITE> <CODE> </CODE> <EM> </EM> <KBD> </KBD> <STRONG> </STRONG> <VAR> </VAR> <BASEFONT SIZE = n> Afieaz text cu caractere aldine Afieaz text cu caractere cursive Afieaz text subliniat Text cu font monospaiu Citare bibliografic Listing de program Stil logic de evideniere Text de la tastatur Evideniere logic puternic Program sau variabil Specific dimensiunea implicit a fontului din pagin

napoi Marcaje pentru cadre


<FRAMESET> </FRAMESET> COLS=x ROWS=x Definirea redactrii paginii Numrul i mrimea relativ a coloanelor Numrul i mrimea relativ a liniilor

BORDER=x FRAMEBORDER = x FRAMESPACING = x <FRAME> SRC=url NAME=nume SCROLLING=scrl FRAMEBORDER=x MARGINHEIGHT=x MARGINWIDTH=x <NOFRAMES> </NOFRAMES> <IFRAME> SRC=url NAME=s HEIGHT=x WIDTH=x

Specific starea "on" (activ) sau "off" (inactiv) pentru chenarul cadrului FRAMESET (1 sau 0) Specific mrimea chenarului Mrimea spaiului dintre dou cadre adiacente Definiia unui anumit cadru URL-ul surs pentru cadru Numele cadrului (utilizat mpreun cu TARGET=nume ca parte component a marcajului de tip ancor<a> Definete opiunea barei de derulare.Valori posibile: on(activ), off(inactiv), auto (automat) Mrimea chenarului din jurul cadrului Spaiul suplimentar de deasupra i dedesubtul unui anumit cadru Spaiu suplimetar la stnga i la dreapta unui anumit cadru Seciunea de pagin afiat pentru utilizatorii care nu pot vedea un cadru Cadru intern (numai pentru IE) Sursa cadrului Numele ferestrei (util pentru TARGET) ntimea cadrului nglobat Limea cadrului nglobat

napoi Marcaje pentru tabele


<TABLE> </TABLE> BORDER=x CELLPADDING=x CELLSPACING=x WIDTH=x FRAME=valoare RULES=valoare BORDERCOLOR = culoare BORDERCOLORLIGHT = culoare BORDERCOLORDARK = culoare ALIGN=left ALIGN=right HSPACE=x Tabel HTML Chenarul tabelului Spaiul suplimentar n cadrul celulelor tabelului Spaiul suplimentar ntre celulele tabelului Limea impus tabelului Ajustarea fin a tabelului Ajustarea fin a riglelor tabelului Specific culoarea chenarului tabelului Cea mai deschis culoare din cele dou culori specificate Cea mai nchis culoare din cele dou culori specificate Aliniaz tabelul la marginea din stnga a paginii, iar textul curge n partea dreapt Aliniaz tabelul la marginea din dreapta a paginii, iar textul curge n partea stng Spaiu suplimetar pe orizontal n jurul tabelului

VSPACE=x COLS=x <COLGROUP> </COLGROUP> <COL WIDTH=x> <THEAD> </THEAD> <BODY> </TBODY> <TR> </TR> BGCOLOR=culoare ALIGN=aliniere <TD> </TD> BGCOLOR=culoare COLSPAN=x ROWSPAN=x ALIGN=aliniere VALIGN=aliniere BACKGROUND=url NOWRAP

Spaiu suplimetar pe vertical n jurul tabelului Specific numrul de coloane ale unui tabel Definete un set de definiii de coloane cu ajutorul marcajului <col> Definete limea unei coloane exprimat n pixeli Definete titlul tabelului Definete corpul tabelului Linie de tabel Specific culoarea de fond pentru ntreaga linie Alinierea celulelor de pe linia curent (left, center, right) Celula de date a tabelului Specific culoarea de fond pentru celula de date Numrul de coloane pe care se ntinde celula curent de date Numrul de linii pe care se ntinde celula curent de date Alinierea materialului din cadrul celulei de date.Valori posibile: (left, right, center) Alinierea pe vertical a materialului din cadrul celulei de date.Valori posibile: (top, bottom, middle) Specific imaginea de fond pentru celula tabelului Nu permite desprirea textului pe linii n cadrul unei celule

ALIGN=baseline ALIGN=caracter ALIGN=justify

Aliniaz celule de date cu linia de baz a textului adiacent Aliniaz o coloan fa de un anumit carcater (caracterul prestabilit este ".") Aliniaz att marginea din stnga ct i marginea din dreapta a unui text

napoi Adugarea imaginilor


<IMG > SRC=url ALT=text ALIGN=aliniere HEIGHT=x WIDTH=x BORDER=x HSPACE=x VSPACE=x Marcajul de introducere a imaginilor Sursa fiierului grafic Textul alternativ de afiat, dac este necesar Alinierea imaginii n pagin. Valori posibile: top (sus), middle (n mijloc), bottom (jos), left (n stnga), right (la dreapta) nlimea imaginii (n pixeli) Limea imaginii Chenarul din jurul imaginii, atunci cnd aceasta este utilizat ca hiperlegtur Spaiul suplimentar pe orizontal din jurul imaginii (n pixeli) Spaiul suplimentar pe vertical din jurul imaginii (n pixeli)

napoi Tabel diacritice

Limba romn folosete cinci litere cu semne diacritice: , , , , . Aspectul i denumirea acestor semne sunt artate n tabelul de mai jos. cciul accent circumflex; virgul, plasat sub literele corespunztoare s, S, t, T.
valoare cod &#259; &#258; &#226; &#194; &#238; &#206; &#351; &#350; &#355; &#354;

napoi

Formulare
Folosind formularele webdesignerul sau administratorul site-ului poate colecta diverse informatii de la vizitatori. Cele mai importante atribute ale etichetei <form> sunt action si method. action metioneaza adresa scriptului (aflat pe server) care va interpreta formularul. Aceste scripturi pot fi scrise in limbajele PHP sau Pearl. method indica metoda folosita de browser pentru transmiterea formularului. Poate lua valorile get si post. get - datele sunt trimise prin adaugarea la adresa indicata de action. Permite trimiterea unor mici cantitati de date. post - datele sunt trimise separat si sunt permise cantitati mari de date. Exemplu: formular cu 2 campuri, buton Trimite si buton Sterge

HTML <form action="script.php" method="post"> Nume:<input type="text" name="nume"> Prenume:<input type="text" name="prenume"><br> <input type="submit" value="Trimite"><input type="reset" value="Sterge"> </form>

Afisare

Nume: Prenume:
Trimite Sterge

Eticheta <input> poate avea atributele: type - indica tipul datelor care vor fi introduse (text=text, submit=trimite, reset=sterge, password=parola, hidden=nu este vizibil, checkbox=caseta de validare, button=buton, radio=selectarea unui singur element dintr-un grup, file=fisier pentru upload, image=butonul va fi inlocuit cu o imagine) name - numele asociat cimpului respectiv. Este folosit la prelucrarea datelor de catre scriptul mentionat in action size - numarul de caractere vizibile din camp maxlength - numarul maxim de caractere introduse in camp readonly - datele prezente in camp nu pot fi modificate Exemplu: formular continand toate valorile atributului <input>

HTML

Afisare

Nume: <form action="script.php" method="post"> Nume:<input type="text" name="nume"> Prenume:<input type="text" name="prenume"><br> Telefon:<input type="text" name="telefon"><br> Fax:<input type="text" name="fax"><br> Email:<input type="text" name="email"><br> Sexul: Masculin<input type="radio" name="sex" value="m"> Feminin<input type="radio" name="sex" value="f"> Prenume: Telefon: Fax: Email:

Sexul: Masculin Studii:


Liceu

Feminin

Studii: <select> <option value="scoala">Scoala profesionala <option value="liceu">Liceu <option value="facultate">Facultate </select> Accesati Internetul de la: Serviciu<input type="checkbox" name="serv"> Acasa<input type="checkbox" name="acasa"> Internet cafe<input type="checkbox" name="cafe"> Fisier: <input type="file" name="file"> Observatii:<textarea name="obs" rows="5" cols="30"></textarea> <input type="submit" value="Trimite"><input type="reset" value="Sterge"> </form>

Accesati Internetul de la: Serviciu Acasa Internet cafe Fisier:

Observatii:
Trimite Sterge

Constructia select introduce un meniu derulant (lista de selectie), valorile fiind declarate prinoption. In campul textarea se poate introduce text, avand atributele cols (numar de coloane) sirows (numar de randuri). Daca doriti puteti particulariza butoanele din formular folosind atributul type=image in cadrul etichetei input si indicand fisierul imagine.

HTML <form action="script.php" method="post"> <input type="image" src="trimite.gif" alt="Trimite"> </form>

Afisare

Sus

HTML - Checkbox
Cu ajutorul CheckBox-urilor userul are posibilitatea de a alege unul, doua sau mai multe variante de raspuns. Atributele name sivalue se folosesc la fel ca si pentru butoanele radio.

<form method="post" action="mailto:youremail@email.com">

<p>Ce culoare de pantofi preferi ? </p> <p>

<input type="checkbox" name="pantofi" value="negru">Negru simplu <br/> <input type="checkbox" name="pantofi" value="alb">Alb simplu <br/> <input type="checkbox" name="pantofi" value="gri">Nuante de gri <br/> <input type="checkbox" name="pantofi" value="alb negru ">Alb cu negru <br/> <input type="submit" value="Email Myself"></p> </form>

Vizualizare
Ce culoare de pantofi preferi ?

Negru simplu Alb simplu Nuante de gri Alb cu negru

Email Myself

HTML - Alte tipuri de formulare de liste


Un alt model de formular tip lista este urmatorul, in care userul selecteaza o anumita linie care va fi trimisa ca si optiunea aleasa.

<form method="post" action="mailto:youremail@email.com">

Preferinte muzicale <select multiple name="music" size="4"> <option value="emo" selected>Emo</option> <option value="metal/rock" >Metal/Rock</option> <option value="hiphop" >Hip Hop</option> <option value="ska" >Ska</option> <option value="jazz" >Jazz</option> <option value="country" >Country</option> <option value="classical" >Classical</option> <option value="alternative" >Alternative</option> <option value="oldies" >Oldies</option> <option value="techno" >Techno</option> </select> <input type="submit" value="Email Yourself"> </form>

Vizualizare
Preferinte muzicale

Emo Metal/Rock Hip Hop Ska

Email Yourself

Un alt model de formular este meniul "dropdown". Acesta va fi afisat ca si un camp, care va afisa o lista atunci cand este executat un clik asupra lui.

<form method="post" action="mailto:youremail@email.com">

Nivel de studii? <select name="studii"> <option>Alege</option> <option>Scoala Generala </option> <option>Liceu</option> <option>Postliceala</option> <option>Facultate</option> <option>Doctorat</option> </select> <input type="submit" value="Email Yourself">

</form>

Vizualizare

Nivel de studii?

Alege

Email Yourself