Tehnologii WEBCursul 4

Formulare in HTML

1. Descriere atribute:Atributul action primete ca valoare adresa URL a scenariului CGI ce va primi datele furnizate de utilizator i le va prelucra, genernd un rspuns.Dac atributul action lipsete, datele vor fi trimise la adresa documentului curent.Este posibil expedierea datelor furnizate de ctre utilizator la o adres potal, caz n care atributul action va primi ca valoare adresa de e-mail respectiv, nsoit de prefixul mailto:Atributul method specific modul n care va fi trimis informaia ctre server.Atributul method poate primi dou valori: get postDatele furnizate de utilizator n formular sunt adugate la adresa URL a scriptului CGI, sub form de perechi de tipul:=n cazul valorii get a atributului method, aceste perechi de date sunt adugate la sfritul adresei URL a scriptului, dup semnul ?, separate prin &.Atunci cnd trimit un formular ctre server, majoritatea browser-elor afieaz acest ir.

Exemplu:Tagul ce va conine dou cmpuri de tip text: cmpul nume, n care utilizatorul a introdus valoarea Costica Popescu i cmpul email, n care utilizatorul a introdus valoarea costica@gmail.comva determina transmiterea catre server a cererii: http://www.utgjiu.ro/registration ? nume = PopescuCostica & email = costica@gmail.com

Dac se dorete evitarea afirii lui, va fi utilizat valoarea post a atributului method, caz n care irul este transmis serverului printr-o secven HTTP special.Atributul name primete ca valoare numele formularului, n situaia n care sunt mai multe formulare n document. De asemenea, numele formularului este util i atunci cnd scriptul este scris n JavaScript, pentru a putea fi referit.Atributul target primete ca valoare numele ferestrei n care se va face afiarea rspunsului emis de server. Dac numele transmis ca parametru atributului target nu a fost definit anterior, atunci browserul va crea o ferestr nou cu acest nume. Implicit, browser-ul va afia rspunsul n pagina curent.Exist cteva cuvinte cheie ce pot fi transmise ca valoare atributului target: _self rspunsul scriptului va fi afiat n fereastra ce conine formularul _parent rspunsul scriptului va fi afiat n fereastra printe a ferestrei ce conine formularul _top - rspunsul va fi afiat n fereastra din vrful ierarhiei de ferestre _blank - va fi creat o fereastr nou n care va fi afiat rspunsul.Efectul este similar situaiei n care atributul target a primit valoare un nume de fereastr ce nu a fost definit anterior. Atributul title ofer posibilitatea afirii unui text explicativ de ndat ce mouse-ul se oprete deasupra formularului.

2. Elemente de formularntre perechea de taguri si sunt definite o serie de elemente de formular, destinate recepionrii datelor furnizate de utilizator.Cea mai mare parte a acestora se definesc cu ajutorul tagului .Sintaxa general a tagului input este:

Descriere atribute:type definete tipul de element de formular, care poate fi : text - definete un cmp de editare pentru un cuvnt sau o linie de text.Cmpurile de editare accept parametrii: value size maxlength

password definete un cmp de editare a unei parole.Caracterele introduse de utilizator sunt ascunse, cmpul de editare afind semnul* n locul fiecrui caracter.Atribute acceptate (ca i cmpurile de editare): value size maxlength

radio butoanele radio permit selectarea unei opiuni dintre mai multe existente.O opiune este definit printr-un cmp radio. ntr-un set de butoane radio, la un moment dat, o singur opiune poate fi selectat. Pe un formular pot exista mai multe seturi debutoane radio, gruparea lor ntr-un anumit set realizndu-se prin precizarea unui nume comun (numele este dat de valoarea atributului name).Atribute acceptate: name value - precizeaz ce valoare va fi trimis ctre server, alturi de valoarea atributului name, atunci cnd a fost selectat opiunea respectiv. Dac ns nu aceasta este opiunea aleas din setul respectiv, atunci informaia oferit de buton nu este trimis ctre server checked

checkbox definete un cmp de validare. Un asemenea cmp are dou stri: selectatsau neselectat.Atribute acceptate: name value implicit are valoarea on (cmp de validare selectat) checked

submit definete un buton cu efect predefinit de expediere ctre server a informaiei din formular.Atribute acceptate: name value precizeaz textul afiat pe suprafaa butonului. Implicit, titlul butonului este Submit Query

reset - definete un buton cu efect predefinit de anulare a informaiei din formular. Coninutul tuturor cmpurilor vor fi resetate la valoarea implicit.Atribute acceptate: name value precizeaz titlul butonului. Implicit, acesta este Reset

button definete un buton de comand. Aciunea lui este descris printr-un script (JavaScript, Java, VBScript amd.).Atribute acceptate: name value precizeaz titlul butonuluiCu ajutorul acestui element se pot defini butoane cu imagini, caz n care tagul img, ce defineste imaginea, va fi inclus n interiorul perechii .

file definete un element de tip caset de fiiere, ce conine un cmp de editare unde va fi afiat calea fiierului selectat i un buton de comand Browse.Atribute acceptate: name value precizeaz URL-ul fiierului selectat

hidden definete un cmp ascuns (care nu este afiat n formular). Cmpurile ascunse sunt utilizate pentru a trimite ctre server informaii suplimentare, ce nu pot fi modificate de utilizator.Atribute acceptate: name value

image plaseaza o imagine activa a carei adresa este introdusa printr-un atribut src. Apasand pe imagine formularul va fi trimis, inclusiv coordonatele pointerului de mouse.image poate primi atributele: align ( pentru pozitionarea imaginii relativ la textul inconjurator ) name src

name definete numele cmpului creat. Numele va fi trimis ctre server, alturi de valoarea sa, pentru a permite execuia scriptului.

value precizeaz valoarea implicit a cmpului. Aceast valoare va fi afiat la prima activare a formularului. Utilizatorul o poate modifica sau poate opta pentru pstrarea ei pentru a fi trimis serverului.

checked atribut utilizat n cazul casetelor de validare sau a butoanelor radio. Prezena lui determin selectarea cmpului n cauz.

size determin lungimea cmpului (exprimat n caractere). Atribut utilizat de cmpurile de editare.

maxlength fixeaz numrul maxim de caractere ce vor fi acceptate de ctre cmpurile de editare. Depirea acestui numr va fi semnalat printr-un mesaj sonor. Dac valoarea atributului maxlength este mai mare dect valoarea atributului size, textul introdus n cmpul de editare va defila ctre stnga.

Exemplu: Formular cu 2 campuri, buton Trimite si buton Sterge

Nume:Prenume:

Exemplu: Daca se doreste se pot particulariza butoanele din formular folosind atributul type=image in cadrul etichetei input si indicand fisierul imagine.

3. Cmpuri de editare multilinie

Cmpuri de editare multilinie se realizeaz cu ajutorul tagului textarea. Ele permit introducerea i afiarea unui text pe mai multe linii. Dac lungimea textului depete lungimea cmpului, atunci se va ancora o bar de defilare orizontal. Dac numrul de linii ale textului depesc nlimea cmpului, atunci se va ancora o bar de defilare vertical. Textul introdus intre tagurile textarea va fi afisat in fereastra corespunzatoare din browser.Atribute acceptate: name definete numele cmpului readonly atribut a crui existen inhib utilizatorului dreptul de scriere n cmp cols primete ca valoare un numr ntreg pozitiv reprezentnd numrul de caractere ce vor fi afiate pe linie rows - precizeaz numrul de linii ale cmpului multilinie wrap definete modalitatea de spargere a textului n linii n interiorul cmpului.Atributul poate lua valorile: off (valoarea implicit) Textul este afiat pe un singur rnd. Utilizatorul poate trece pe linia urmtoare apsnd tasta ENTER. Textul trimis serverului va conine caracterele de sfrit de linie hard Textul se aaz automat pe rnduri, lungimea acestora fiind determinat de lungimea cmpului. Deasemenea, textul trimis serverului va conine caracterele de sfrit de linie soft Textul se aaz automat pe rnduri, lungimea acestora fiind determinat de lungimea cmpului, ns textul trimis serverului nu va mai conine caracterele de sfrit de linieExemple de campuri de editare multilinie

4. Liste de selecieListele de selecie permit selectarea uneia sau a mai multe opiuni dintr-o list. Ele reprezint o combinaie ntre butoanele radio (selecie singular) i cmpurile de validare (selecie multipl). Deosebirea este aceea c utilizarea listelor de selecie nu necesit afiarea tuturor opiunilor, ci numai a unora dintre ele, deplasarea printre alternative realizndu-se cu ajutorul unei bare de defilare vertical.Listele de selecie sunt realizate cu ajutorul tagului .Atribute acceptate: name definete numele cmpului de selecie size stabilete cte elemente ale listei sunt vizibile la un moment dat, restul opiunilor fiind accesibile prin utilizarea barei de defilare vertical Implicit, valoarea atributului size este 1 multiple prezena atributului multiple permite selectarea mai multor elemente ale listei (echivalent cmpurilor de selecie), altfel, n cazul seleciei singulare, un singur element al listei poate fi selectat la un moment dat (echivalent butoanelor de opiune). Atributul multiple nu are efectul dorit n cazul listelor de selecie ce au valoarea size egal cu 1.Introducerea opiunilor n list se realizeaz cu tagul , poziionat n interiorul perechii .Acesta accept atributele: name precizeaz numele opiunii selected prezena atributului selected n interiorul tagului face ca opiunea respectiv s fie selectat la ncrcarea formularului. Dac valoarea atributului size a tagului select este 1, atunci, implicit va fi afiat prima opiune a listei de selecii (n cazul n care nici o opiune nu are prezent parametrul selected). value precizeaza valoarea trimisa catre server la activarea optiunii submit a formularului; in cazul in care atributul value lipseste, catre server se va trimite ca valoare chiar textul care urmeaza tagului

Exemple liste de selectie

5. EticheteleEtichetele reprezint un element de formular care, ataat butoanelor radio sau cmpurilor de validare, face ca selectarea/deselectarea unei opiuni s se realizeze i prin apsarea etichetei opiunii respective. Acest lucru se realizeaz plasnd tagul , respectiv n interiorul perechii , unde identificator va fi definit n tagul input, ca valoare a atributului id.

Exemple etichete formular

Ce tip de pantofi porti ?
Culoare:InchisDeschis
Marime:MicaMedieMare

Ce culoare de pantofi preferi ? Negru simplu
Alb simplu
Nuante de gri
Alb cu negru

HTML - formular de upload

Exemplul 1:

Exemplu de formular

Introduceti numele dvs. -->

Exemplul 2:

Formular logare

Introduceti numele dvs. de identificare -->

Introduceti parola dvs.?

Exemplul 3:

Optiuni concediu

Unde doriti sa va petreceti concediul?la muntela mareacasa

Daca plecati in concediu, unde ati dori sa va cazati?la hotelvilapensiuneagroturistica

Exemplul 4:

Cursuri WEB

Ce cursuri doriti sa urmati?HTMLASPJAVA SCRIPTJAVAPHPASP

Exemplul 5:

Ataseaza Fisier

Exemplul 6:

Zodiac

Zodia dumneavoastra este:

VarsatorPestiBerbecTaurGemeniRacLeuFecioaraBalantaScorpionSagetatorCapricorn

Exemplul 7:

Librarie informatica

Selectati cartile care va intereseaza:

Sabin Buraga - Aplicatii Web la cheie. Studii de cazimplementate n PHPTraian Anghel - Tehnologii WebLuke Welling, Laura Thomson - Dezvoltarea aplicatiilor Web cuPHP si MySQLLarry Ullman - PHP si MySQL pentru site-uridinamice

Exemplul 8:

Carte de oaspeti

Parerea dvs.:

Introducetiaici parerea dvs.

Un formular complex Rezervarea unei camere de hotel

Rezervare camere hotel

Hotel Costica - Formular de rezervare1. Informatii Generale

Ce fel de camere doriti ?

SingleDoubleApartament

Optiuni camera:Televizor
Vedere catre plaja

Ce modalitate de plata alegeti ?Numerar
Carte credit
Transfer bancar

Alte observatii

Introduceti aici optiuniledvs.daca nu este disponibila nici o camera conform cererii exprimate !

2. Informatii Contact

Nume si prenume :

Telefon :

6. Harti de imagini

Sintaxa folosita pentru crearea hartilor de imagini este urmatoarea: