Aeronautica	Comunicatii	Drept	Informatica	Nutritie	Sociologie
Tehnica mecanica

Html

Qdidactic » stiinta & tehnica » informatica » html
Formulare HTML - construirea unui formular - verificarea unui formular cu JavaScript

Formulare HTML - construirea unui formular - verificarea unui formular cu JavaScript

Lucrare de laborator

Tema: Formulare (forms)

1. Elementele unui formular

Formularele sunt documente HTML care pun la dispozitia utilizatorului elemente specifice care pot fi selectate, completate si actionate de acesta, pentru diferite scopuri: efectuarea de comenzi de bunuri si servicii prin Internet, cereri de angajare, de inregistrare ca utilizator la anumite servere, etc.

Un formular incepe cu eticheta <FORM> si se termina cu eticheta pereche </FORM>. Eticheta admite cateva atribute dintre care urmatoarele sunt obligatorii (aproape intotdeauna)

NAME, folosita pentru identificarea unui anumit formular intr-o pagina care contine mai multe formulare

ACTION, stabileste actiunea care se efectueaza la apasarea butonului Submit (expediere a datelor din formular)

METHOD, stabileste metoda de transmitere datelor (GET sau POST)

Elementele unui formular sunt:

Elemente de tip Input. Acestea sunt la randul lor de mai multe feluri:

Text: insereaza un camp de text in care utilizatorul poate introduce un sir de caractere

Password: insereaza o caseta asemanatoare celei de tip text cu deosebirea ca in locul caracterelor tastate, in caseta apar asteriscuri

Checkbox: insereaza o caseta de validare care poate fi bifata de utilizator

Radio: insereaza un buton de validare de tip radio; aceste butoane se organizeaza in grupuri, in interiorul aceluiasi grup neputand fi selectat mai mult de un buton

Button: insereaza un buton a carui apasare declanseaza o actiune descrisa printr-un script (un program)

Reset: insereaza un buton la apasarea caruia datele din formular sunt sterse

Submit: insereaza un buton la a carui apasare datele din formular sunt trimise spre prelucrare la server sau, prin e-mail la o adresa specificata.

Image: insereaza o imagine cu functie de buton Submit

Hidden, nu afiseaza nimic pe ecran dar foloseste pentru transmiterea de date “ascunse” utilizatorului.

Toate aceste elemente admit atribute prin care se stabilesc valorile elementelor (VALUE), numele acestora in cadrul formularului (NAME), dimensiunea (SIZE) in cazul elementelor de tip text si password, selectarea implicita a unor optiuni (CHECKED) in cazul casetelor de validare si butoanelor radio.

Referat: Modelul OSI - nivelul fizic, legatura de date, retea, transport

Referat: Alocarea memoriei - alocarea de memorie in limbaje de programare

Camp de selectie: pune la dispozitie o lista de optiuni din care utilizatorul poate selecta pentru una sau mai multe dintre ele. Admite atribute de stabilire a marimii casetei cu optiuni, selectia multipla. Se poate de asemenea seta o optiune ca implicit selectata.

Arie de text: foloseste pentru a pune la dispozitia utilizatorului o suprafata de editare mai mare decat a unei casete de text. Admite atribute de stabilire a latimii si inaltimii ariei de editare, a unui text de fisat in mod implicit, de atribuire a unui nume elementului arie de text.

2. Construirea unui formular

Exemplul urmator este un formular prin care un vizitator al paginii poate face o rezervare pentru cazare la o unitate de turism. Trimiterea datelor din formular se face prin e-mail. Deschideti un document nou NotePad si introduceti urmatoarele linii de cod. Salvati documentul sub numele comanda.htm in directorul dumneavoastra de lucru.

<html>

<head>

<title>comanda de cazare</title>

</head>

<body>

<h4 align='center'>Puteti rezerva din timp locuri de cazare in complexul nostru completand formularul de mai jos</h4>

<p>Numele <input type='text' size='15' name='numele clientului '></p>

<p>Prenumele <input type='text' size='12' name='prenumele clientului '></p>

Doriti cazare la <select name='tip_cazare' size='1'>

<option selected value='Hotel'>Hotel

<option value='Vila'>Vila

<option value='Cabana'>Cabana

</select>

Numele unitatii de cazare <select name= 'numele_unitatii' size='1'>

<option value='Calimani'>Calimani

<option value='Bradul'>Bradul

<option value='Bucovina'>Bucovina

<option value='Casa_alba'>Casa Alba

<option value='Rozalia'>Rozalia

<option value='Marg'>Margareta

<option value='Runc'>Runc

<option value='Piscul'>Piscul

<option value='Doch'>Dochia

</select><p>numar de persoane <input type='text' size='2' name='nr.persoane ' value='1'>

Numar de zile <input type='text' size='2' name='nr.zile ' value='1'></p>

<p>Mijloc de plata <input type='radio' name='mijloc de plata ' value='virament' checked> Transfer bancar

<input type='radio' name='mijloc de plata ' value='card'> Carte de credit</p>

<p>Mese incluse <br>

<input type='checkbox' name='mese incluse ' value='mic dejun' checked=''> Mic dejun

<input type='checkbox' name='mese incluse ' value='dejun'> Dejun

<input type='checkbox' name='mese incluse ' value='cina'> Cina

</form> </body>

</html>

Incarcat in browser formularul are aspectul din figura 12.1.

Fig.12.1 Formularul de rezervare servicii intr-un complex turistic

Examinati linie cu linie codul dintre etichetele <FORM> si </FORM> si incercati sa identificati elementele in pagina. In mod evident exemplul nu acopera toate elementele care pot fi continute intr-un formular. De asemenea el are doar un rol demonstrativ si nu poate fi folosit ca atare intr-o aplicatie profesionala. De exemplu nu exista nici o restrictie care sa impiedice selectia tipului de cazare “hotel” si numele unitatii de cazare care poate fi numele unei vile sau cabane. Problema se poate rezolva fie cu un script (JavaScript de pilda) fie eliminand campul de selectie “tip_cazare”. Introduceti in sursa documentului o adresa valida de e-mail ca argument al atributului ACTION (chiar propria dumneavoastra adresa creata pe Hotmail) si efectuati Refresh. Completati in formular campurile si faceti selectiile dorite dupa care apasati butonul Trimite.

Verificati functia butonului Anuleaza.

3. Verificarea unui formular cu JavaScript

Iata mai jos un script care verifica daca numele unitatii de cazare corespunde categoriei Hotel. Repetand scriptul de trei ori si efectuand foarte mici modificari el poate fi facut sa verifice pe ansamblu corelatia dintre categoria de cazare aleasa si numele unitatii. Scriptul se introduce, de regula, in sectiunea HEAD a documentului.

<!-- function veriform()

}}//--></script>

Scriptul introduce functia veriform() care este apelata la apasarea butonului Submit. Pentru apelul functiei, eticheta butonului submit se completeaza cu handlerul de evenimente onClick, devenind:

Introduceti scriptul de mai sus in documentul HTML, imediat dupa eticheta </TITLE>. Modificati continutul elementului Submit asa cum am aratat mai sus. Reincarcati documentul in browser. Completati campurile din formular si alegeti cateva nume de unitati de cazare care nu apartin categoriei Hotel. Apasati butonul Submit si vizualizati efectul.

Copiati si lipiti de doua ori codul scriptului cuprins intre etichetele comentariu (<!-- si -- > ). Incercati sa adaptati liniile de cod lipite modificand variabilele Hotel cu Vila, respectiv Cabana si Bradul, Calimani, Bucovina cu numele vilelor, respectiv cabanelor. Salvati, reimprospatati si verificati functionarea scriptului.

Fig.12.2 Continutul formularului expediat prin e-mail

Verificati contul de e-mail pe in care ati expediat formularul. In corpul mesajului veti gasi datele sub forma din figura 12.2.

Contact \|- ia legatura cu noi -\|
Adauga document \|- pune-ti documente online -\|
Termeni & conditii de utilizare \|- politica de cookies si de confidentialitate -\|
Copyright © \|- 2024 - Toate drepturile rezervate -\|