Documente Academic
Documente Profesional
Documente Cultură
In aceasta lectie vei invata cum poti folosi listele in pagina ta web. Listele pe care le poti crea cu ajutorul limbajului HTML sunt de urmatoarele tipuri: liste neordonate, liste ordonate si liste de definitii. Sa le luam pe rand.
Cuprins Lectia 1 Lectia 2 Lectia 3 Lectia 4 Lectia 5 Lectia 6 Lectia 7 Lectia 8 Lectia 9 Lectia 10 Lectia 11 Lectia 12
Pentru a putea face o lista neordonata trebuie sa folosim tag-urile <UL> si </UL>. (denumirea acestor tag-uri vine de la "unordered list" care inseamna in limba engleza lista neordonata). Fiecare element al listei trebuie introdus de tagul <LI>. Ca sa intelegi mai bine sa vedem impreuna cum arata codul HTML pentru lista de mai sus. <HTML> <HEAD> <TITLE>Liste neordonate</TITLE> </HEAD> <BODY> <UL>Firma noastră vă oferă următoarele servicii: <LI>printare <LI>laminare <LI>îndosariere <LI>xerox <LI>tehnoredactare </UL> </BODY> </HTML>
Salveaza pagina cu numele de liste1.html in directorul Pagini. Pentru a vedea cum ar trebui sa arate aceasta pagina: click aici. 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. Pentru a vedea rezultatele, inlocuieste linia a 6-a din codul HTML de mai sus cu una din urmatoarele linii de cod: pentru cercuri goale: <UL TYPE=circle> Firma noastră vă oferă următoarele servicii: Salveaza pagina cu numele de liste2.html in directorul Pagini. Vezi rezultatul: click aici. pentru patrate pline: <UL TYPE=square>Firma noastră vă oferă următoarele servicii: Salveaza pagina cu numele de liste3.html in directorul Pagini. Vezi rezultatul: click aici. Nu uita: Pentru a invata limbajul HTML trebuie sa scrii codul de la fiecare exemplu si sa vezi daca obtii aceleasi rezultate ca cele din cadrul cursului.
2. 3. 4. 5.
Listele ordonate se formeaza cu ajutorul tag-urilor <OL> si </OL>, denumirea acestora venind din limba engleza ordered list care inseamna lista ordonata. La fel ca si la listele neordonate, fiecare element trebuie introdus de tag-ul <LI>. Iata codul pentru lista ordonata de mai sus: <HTML> <HEAD> <TITLE>Liste ordonate</TITLE> </HEAD> <BODY> <OL>Firma noastră vă oferă următoarele servicii: <LI>printare <LI>laminare <LI>îndosariere <LI>xerox <LI>tehnoredactare </OL> </BODY> </HTML> Salveaza pagina cu numele de liste4.html in directorul Pagini. Pentru a vedea cum ar trebui sa arate aceasta pagina: click aici. 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. Pentru a vedea rezultatele, inlocuieste linia a 6-a din codul HTML de mai sus cu una din urmatoarele linii de cod: pentru litere mari: <OL TYPE=A>Firma noastră vă oferă următoarele servicii:
Salveaza pagina cu numele de liste5.html in directorul Pagini. Vezi rezultatul: click aici. pentru litere mici: <OL TYPE=a>Firma noastră vă oferă următoarele servicii: Salveaza pagina cu numele de liste6.html in directorul Pagini. Vezi rezultatul: click aici. pentru cifre romane mici: <OL TYPE=i>Firma noastră vă oferă următoarele servicii: Salveaza pagina cu numele de liste7.html in directorul Pagini. Vezi rezultatul: click aici. pentru cifre romane mari: <OL TYPE=I>Firma noastră vă oferă următoarele servicii: Salveaza pagina cu numele de liste8.html in directorul Pagini. Vezi rezultatul: click aici. 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. Sa vedem un 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> Codul de mai sus va afisa in cadrul browser-ului urmatoarea lista ordonata: click aici.
<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 catetei</B> <DD>În orice triunghi dreptunghic pătratul catetei este egal cu produsul dintre ipotenuză şi proiecţia catetei pe ipotenuză. <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 vrei 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>. Pentru a intelege mai bine sa luam un exemplu. Salveaza mai intai imaginea de mai jos in directorul Poze cu numele de sageata.gif.
Acum sa scriem codul unei pagini web ce va contine o lista cu persoanele din cadrul departamentului Contabilitate al unei firme: <HTML> <HEAD> <TITLE>Lista personal</TITLE> </HEAD> <BODY> <UL>Lista persoanelor care sunt angajate în cadrul departamentului CONTABILITATE:
<BR><BR><IMG SRC="../Poze/sageata.gif">Gheorghe Maria <BR><BR><IMG SRC="../Poze/sageata.gif">Prodan Eugenia <BR><BR><IMG SRC="../Poze/sageata.gif">Matac Marian <BR><BR><IMG SRC="../Poze/sageata.gif">Neacşu Elena <BR><BR><IMG SRC="../Poze/sageata.gif">Ionescu Violeta <BR><BR><IMG SRC="../Poze/sageata.gif">Manea Cristina <BR><BR><IMG SRC="../Poze/sageata.gif">Ioniţă Laura <BR><BR><IMG SRC="../Poze/sageata.gif">Şerbănescu Mihaela <BR><BR><IMG SRC="../Poze/sageata.gif">Crăciun Dorina <BR><BR><IMG SRC="../Poze/sageata.gif">Neagu Emil </UL> </BODY> </HTML> Salveaza pagina in directorul Pagini cu numele de listapersonal.html. Daca totul a iesit asa cum trebuie pagina ta ar trebui sa arate astfel: click aici. Exercitii: 1. Scrie codul HTML al unei pagini web care sa contina urmatoarea lista:
Michael Schumacher Rubens Barichello Jenson Button Fernando Alonso Giancarlo Fisichella Juan Pablo Montoya Kimi Raikkonen Jacques Villeneuve David Coulthard Ralf Schumacher
Salveaza imaginea cu numele f1.jpg, in directorul Poze (click dreapta, Save As). Salveaza pagina HTML in directorul Pagini, cu numele formula1.html. Pagina ta ar trebui sa arate astfel: click aici.
2. Folosind notiunile invatate pana acum, incearca sa scrii codul urmatoarei pagini HTML, pe care salveaz-o cu numele mate.html: click aici. Pentru a te verifica, dupa ce ai deschis pagina, alege din meniul View, optiunea Source.
Tabele in HTML
Tabelele sunt foarte importante pentru realizarea unei pagini web. Cu ajutorul lor, pe langa crearea propriu-zisa a tabelelor, putem controla mult mai bine elementele din cadrul paginilor web.
Cuprins Lectia 1 Lectia 2 Lectia 3 Lectia 4 Lectia 5 Lectia 6 Lectia 7 Lectia 8 Lectia 9 Lectia 10 Lectia 11 Lectia 12
Sa vedem cu ajutorul unui exemplu cum putem adauga un tabel in cadrul unei pagini web. Scrie urmatorul cod HTML: <HTML> <HEAD> <TITLE>Primul tabel</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD><B>Nume</B></TD> <TD><B>Prenume</B></TD> <TD><B>Nota</B></TD> </TR> <TR> <TD>Ionescu</TD> <TD>Bogdan</TD> <TD>7</TD> </TR> <TR> <TD>Stancu</TD> <TD>George</TD> <TD>9</TD> </TR>
<TR> <TD>Dumitrescu</TD> <TD>Alexandra</TD> <TD>10</TD> </TR> <TR> <TD>Marin</TD> <TD>Paul</TD> <TD>8</TD> </TR> <TR> <TD>Ivanov</TD> <TD>Mihaela</TD> <TD>9</TD> </TR> </TABLE> </BODY> </HTML> Salveaza pagina cu numele de tabel.html. Pentru a vedea rezultatul: click aici.
Proprietatile tabelelor
Asa cum ai observat, in exemplul de mai sus am realizat un tabel, dar fara nici o linie. 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. Astfel, daca vrem ca liniile tabelului nostru sa aiba culoarea rosie vom folosi urmatoarea linie de cod:
<TABLE BORDER="1" BORDERCOLOR="#FF0000">
Inlocuieste in exemplul de mai sus si salveaza pagina cu numele tabel2.html. Pentru a vedea rezultatul: click aici. Dupa cum ai putut observa, liniile tabelului sunt practic niste linii duble. Pentru a avea decat o singura linie vom folosi atributul CELLSPACING cu valoarea "0". Acest atribut specifica distanta dintre celulele unui tabel. Alaturi de acest atribut putem folosi si atributul CELLPADING care indica distanta dintre marginile celulelor si textul din cadrul acestora.
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. Sa facem impreuna o pagina web cu un tabel care sa cuprinda toate notiunile pe care leam invatat pana acum in aceasta lectie. Scrie codul urmator in cadrul unui editor text si salveaza apoi pagina cu numele de tabel3.html. <HTML> <HEAD> <TITLE>Proprietatile tabelelor</TITLE> </HEAD> <BODY> <CENTER><H2>Rezultatele obţinute la matematică</H2></CENTER> <HR WIDTH="50%" ALIGN="center" COLOR="#FF0000"> <TABLE WIDTH="500" ALIGN="CENTER" BORDER="1" BORDERCOLOR="#000000" CELLSPACING=0 CELLPADDING="0"> <TR BGCOLOR="#000000" ALIGN="center" VALIGN="middle"> <TD WIDTH="200" HEIGTH="50"><B><FONT COLOR="#FFFFFF">Nume</FONT></B></TD> <TD WIDTH="200"HEIGTH="50"><B><FONT COLOR="#FFFFFF">Prenume</FONT></B></TD> <TD WIDTH="100" HEIGTH="50"><B><FONT COLOR="#FFFFFF">Nota</FONT></B></TD> </TR> <TR VALIGN="middle"> <TD WIDTH="200" HEIGTH="20">Ionescu</TD> <TD WIDTH="200" HEIGTH="20">Bogdan</TD> <TD WIDTH="100" HEIGTH="20" ALIGN="center">7</TD> </TR> <TR BGCOLOR="#FFFFCC" VALIGN="middle"> <TD WIDTH="200" HEIGTH="20">Stancu</TD> <TD WIDTH="200" HEIGTH="20">George</TD> <TD WIDTH="100" HEIGTH="20" ALIGN="center">9</TD>
</TR> <TR VALIGN="middle"> <TD WIDTH="200" HEIGTH="20">Dumitrescu</TD> <TD WIDTH="200" HEIGTH="20">Alexandra</TD> <TD WIDTH="100" HEIGTH="20" ALIGN="center">10</TD> </TR> <TR BGCOLOR="#FFFFCC" VALIGN="middle"> <TD WIDTH="200" HEIGTH="20">Marin</TD> <TD WIDTH="200" HEIGTH="20">Paul</TD> <TD WIDTH="100" HEIGTH="20" ALIGN="center">8</TD> </TR> <TR VALIGN="middle"> <TD WIDTH="200" HEIGTH="20">Ivanov</TD> <TD WIDTH="200" HEIGTH="20">Mihaela</TD> <TD WIDTH="100" HEIGTH="20" ALIGN="center">9</TD> </TR> </TABLE> </BODY> </HTML> Pentru a vedea rezultatul: click aici.
am folosit pentru celula rosie atributul COLSPAN="2", deoarece se intinde pe doua coloane, iar pentru celula albastra am folosit atributul ROWSPAN="3" deoarece se intinde pe trei randuri. Pentru a intelege mai bine utilizarea tag-urilor si a atributelor lor, nu uita sa exersezi cat mai mult. Incearca sa realizezi diferite pagini web pe baza notiunilor invatate in acest curs.
Cuprins Lectia 1 Lectia 2 Lectia 3 Lectia 4 Lectia 5 Lectia 6 Lectia 7 Lectia 8 Lectia 9 Lectia 10 Lectia 11 Lectia 12
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%. Alaturi de tag-ul <FRAMESET> se mai folosesc si atributele <FRAMESPACING>, pentru marimea spatiilor dintre cadre si <FRAMEBORDER>, care se refera la cadrele definite, daca au sau nu chenar, valorile sale fiind "yes" sau "no". Astfel, linia completa pentru definirea a doua cadre orizontale va fi urmatoarea:
<FRAMESET ROWS="70%,*" FRAMEBORDER="no" FRAMESPACING="0">
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. Nu uita de tag-ul de incheiere </FRAMESET> Dupa ce am stabilit impartirea paginii in cadre, se trece la definirea cadrelor. Astfel intre tag-urile <FRAMESET> si </FRAMESET> vom folosi tag-ul <FRAME>. Principalul atribut al tag-ului <FRAME> este SRC cu ajutorul caruia indicam sursa cadrului. Astfel o linie de cod care defineste un cadru ar putea fi urmatoarea:
<FRAME SRC="numelepaginii.html">
Pentru a intelege mai bine utilizarea cadrelor in paginile web, vom face impreuna o pagina web cu mai multe cadre, care va arata ca in imaginea urmatoare:
Sa ne apucam de treaba. Trebuie sa facem patru pagini web fiecare avand culoarea de background la fel cu una dintre cele patru culori din imaginea de mai sus. Apoi vom face a 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. Paginile rosu.html albastru.html galben.html verde.html ar trebui sa arate astfel:
Pentru a vedea codul sursa al fiecarei pagini alege din meniul View optiunea Source. Acum sa vedem codul sursa al paginii care va contine cele patru pagini web create:
<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>
Salveaza pagina, in acelasi fisier cu celelalte patru, cu numele cadre.html. Daca totul a mers asa cum trebuie pagina ta ar trebui sa arate asa: click aici. Nu a iesit chiar ca in imagine dar important este sa intelegi cum facem o pagina web cu mai multe cadre. Nu uita sa definesti cadrele inainte de tag-ul <BODY> si sa exersezi toate notiunile invatate in aceasta lectie. Fa cat mai multe pagini web care sa fie formate din cadre. Succes!
Cuprins Lectia 1 Lectia 2 Lectia 3 Lectia 4 Lectia 5 Lectia 6 Lectia 7 Lectia 8 Lectia 9 Lectia 10 Lectia 11 Lectia 12
Pentru a folosi un formular in pagina ta web, va trebui sa folosesti tag-urile <FORM> si </FORM>. Intre aceste tag-uri vor fi introduse toate elementele formularului. Tag-ul <FORM> are doua atribute foarte importante: ACTION si METHOD. Cu ajutorul atributului ACTION ii spunem browser-ului ce se va intampla cu datele introduse in formular. Astfel, valoarea atributului ACTION poate fi o adresa URL a unui script, scris intr-un limbaj de programare, care va interpreta datele si le va introduce intr-o baza de date, daca este cazul, sau poate fi o adresa de email, caz in care datele introduse in formular vor fi trimise prin email la adresa respectiva. Atributul METHOD, asa cum ii spune si numele, precizeaza metoda de trimitere a datelor si poate avea doua valori. Valoarea implicita a acestui atribut este GET, cu ajutorul acestei metode putand fi trimise cantitati mici de date, cea mai folosita metoda fiind POST. Nu trebuie sa intelegi acum totul, vei vedea cat de simplu este sa realizezi formulare pentru paginile tale web. La sfarsitul acestei lectii vom face impreuna un formular mai complex, dar mai intai sa ne familiarizam cu elementele formularelor.
Elementele unui formular trebuie introduse, in majoritatea cazurilor, cu ajutorul tag-ului <INPUT>. Atributele cele mai importante ale acestui tag sunt urmatoarele: - TYPE - tipul elementului - NAME - numele elementului - VALUE - valoarea elementului Elementele ale unui formular pot fi: - campurile de editare - butoanele radio - casetele de validare - casetele de fisiere - listele de selectie - butoanele submit si reset In continuare vom vedea cum se poate realiza fiecare element al unui formular HTML
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. Exemplu:
Camp de editare
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 De exemplu, pentru campul de editare de mai sus s-a folosit urmatoarea linie de cod:
<INPUT NAME="exemplu" TYPE="text" VALUE="Camp de editare" SIZE="20" MAXLENGTH="30">
Daca vrei sa introduci 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 . Sa vedem un exemplu:
Scrie cateva caractere in campul de editare de mai sus, pentru a vedea diferenta fata de un camp de editare de tip "text". 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 tagurile <TEXTAREA> si </TEXTAREA>. Sa vedem cum arata linia de cod HTML care introduce un camp de editare multilinie:
<TEXTAREA COLS="50" ROWS ="5" NAME="exemplu"></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. Iata rezultatul:
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". Sa luam un exemplu: n ce categorie de vrst v ncadrai? sub 15 ani 15-20 ani 20-25 ani 25-35 ani 35-45 ani peste 45 ani Codul HTML care va afisa in cadrul browser-ului, intrebarea de mai sus si variantele de raspuns, este urmatorul:
În ce categorie de vârstă vă încadraţi? <BR> <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 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". Casetele de validare permit selectarea sau deselectarea uneia sau mai multor optiuni. Exemplu: Unde v petrecei concediul de obicei? La mare La munte n strintate La ar Acas 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ă petrecei 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">În străinătate<BR> <INPUT TYPE="checkbox" NAME="optiunea4">La ţară<BR> <INPUT TYPE="checkbox" NAME="optiunea5">Acasă
Casetele de fisiere
Pentru a trimite un fisier prin intermediul unui formular, folosim pentru atributul TYPE al tag-ului <INPUT>, valoarea "file". Sa vedem un exemplu: Codul HTML este urmatorul:
<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>. Atributele cele mai folosite pentru tag-ul <SELECT> sunt: NAME, atribuie listei de selectie un nume SIZE, specifica numarul de elemente din cadrul listei de selectie VALUE, atribuie o valoare de tip text care va fi expediata serverului, sub forma de perechi "name = value" SELECTED (fara alte valori), selecteaza in mod prestabilit un element al listei Sa vedem cum arata o lista de selectie: Alege un judet din Romania:
Bucuresti
Pentru a selecta in mod implicit valoarea Bucuresti, am folosit in dreptul acesteia atributul selected. Codul listei de selectie de mai sus este urmatorul: <SELECT> <OPTION value=Alba>Alba</OPTION> <OPTION value=Arad>Arad</OPTION> <OPTION value=Arges>Arges</OPTION> <OPTION value=Bacau>Bacau</OPTION> <OPTION value=Bihor>Bihor</OPTION> <OPTION value=Bistrita-Nasaud>Bistrita-Nasaud</OPTION> <OPTION value=Botosani>Botosani</OPTION> <OPTION value=Brasov>Brasov</OPTION> <OPTION value=Braila>Braila</OPTION> <OPTION value=Bucuresti selected>Bucuresti</OPTION>
<OPTION value=Buzau>Buzau</OPTION> <OPTION value=Caras-Severin>Caras-Severin</OPTION> <OPTION value=Calarasi>Calarasi</OPTION> <OPTION value=Cluj>Cluj</OPTION> <OPTION value=Constanta>Constanta</OPTION> <OPTION value=Covasna>Covasna</OPTION> <OPTION value=Dambovita>Dambovita</OPTION> <OPTION value=Dolj>Dolj</OPTION> <OPTION value=Galati>Galati</OPTION> <OPTION value=Giurgiu>Giurgiu</OPTION> <OPTION value=Gorj>Gorj</OPTION> <OPTION value=Harghita>Harghita</OPTION> <OPTION value=Hunedoara>Hunedoara</OPTION> <OPTION value=Ialomita>Ialomita</OPTION> <OPTION value=Iasi>Iasi</OPTION> <OPTION value=Ilfov>Ilfov</OPTION> <OPTION value=Maramures>Maramures</OPTION> <OPTION value=Mehedinti>Mehedinti</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=Salaj>Salaj</OPTION> <OPTION value=Sibiu>Sibiu</OPTION> <OPTION value=Suceava>Suceava</OPTION> <OPTION value=Teleorman>Teleorman</OPTION> <OPTION value=Timis>Timis</OPTION> <OPTION value=Tulcea>Tulcea</OPTION> <OPTION value=Vaslui>Vaslui</OPTION> <OPTION value=Valcea>Valcea<</OPTION> <OPTION value=Vrancea>Vrancea</OPTION> </SELECT> 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.
Pentru a putea expedia datele introduse in cadrul unui formular, fie prin e-mail, fie catre un script scris intr-un limbaj de programare care va interpreta aceste date, trebuie sa folosim un buton de trimitere. Pentru a introduce un asemenea buton folosim tag-ul <INPUT>, cu atributul TYPE avand valoarea "submit". Putem modifica si valoarea butonului, care in mod implicit este Submit, cu ajutorul atributului VALUE. Astfel, linia de cod pentru un buton de tip submit va fi urmatoarea:
<INPUT TYPE="submit" VALUE="Trimite">
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". Sa vedem cum arata linia de cod care introduce in cadrul unui formular un buton de tip Reset:
<INPUT TYPE="reset" VALUE="Sterge">