Formulare - HTML

Formulare - HTML

By Gabriela Gitu

Definiție

Formularele (chestionarele) sunt instrumente oferite prin limbajul HTML pentru a genera pe ecran zone de dialog cu cititorul documentelor Web. Un formular reprezinta doar o interfata pentru captarea informatiilor, el necesita elemente pentru tratarea datelor colectate.

Folosind formularele se pot colecta diverse informații de la vizitatori precum: email, nume, adresa, telefon sau orice alte informatii.

​Tag-ul FORM

Pentru a crea un formular in HTML se foloseşte elementul <form> ... </form>, in cadrul acestuia se vor adauga celelalte elemente specifice.

  Elementul <form> ... </form> nu contine atribute pentru format, foloseste insa urmatoarele atribute:

•action - aici se scrie adresa URL a unui script de pe server (de obicei PHP sau CGI), program care trebuie sa accepte datele din FORM , le proceseaza si trimite înapoi raspunsul la browser.

•method - aici putem scrie get , sau post. Aceste valori specifica ce metoda HTTP va fi folosita pentru a trimite continutul formularului la server.

•name - Este numele formularului

•target - Este tinta cadrului (frame) unde pagina va fi vizualizata, dupa transmiterea datelor din form.

Elementele de formular

Elementele de formular care sunt folosite pentru a crea diferite campuri, casete, butoane in pagina web, necesare pentru a aduna datele care vor fi trimise la aplicatie pe server se creaza prin atributul type al elementului <input> ... </input>.

Proprietatile elementului <input> ... </input>

•type - tipul de FORM folosit (caseta text, buton si altele ...)

•name - numele elementului respectiv de formular, folosit de scripturile la care sunt trimise datele

•value - datele (valoarea) asociate acelui element de formular si care sunt trimise, impreuna cu numele, catre scripturi

•size - specifica numarul de caractere care dau lungimea zonei de text

•maxlength - numarul maxim de caractere acceptate

•checked - specifica daca un buton sau alta forma va fi initial selectata (bifata).

•readonly - folosit pentru campuri de tip text, impedica modificarea valorii (textului) din acel camp

•disabled - impedica folosirea campului care are aceasta proprietate. Va fi vizibil dar nu va putea fi folosit, datele acestuia nu vor fi trimise din formular la vreun script.

Casete de text​

- este folosit pentru a crea in pagina un camp pentru text (cu o singura linie).

-Codul este <input type="text">...</input>

- Acest element foloseste urmatoarele atribute:

•type - text

•name - numele casutei de text, folosit de scriptul la care sunt trimise datele

•value - va reprezenta propriul context ca valoare aleasa. Un sir de text care apare in casuta de text

•size - specifica numarul de caractere care dau lungimea casutei de text (default 20)

•maxlength - numarul maxim de caractere acceptate sa fie adaugate de utilizator

Câmp textarea

- "textarea" este un element ce creaza un câmp în pagina, în care utilizatorul poate adauga mai multe linii de text.

-Codul este <textarea>...</textarea>

​- Acest element folosește urmatoarele atribute:

•name - numele campului de text, folosit de scriptul la care sunt trimise datele

•rows - numarul de linii a zonei de text

•cols - numarul de coloane a zonei de text

•wrap - standard este OFF. Dar poate avea valorile : "VIRTUAL" sau "PHYSICAL", astfel ca textul wraps in browser sa fie prezentat exact cum este scris de utilizator.

Casete pentru parole

- "password" este folosit pentru a permite adaugarea de parole. Caracterele adaugate in aceasta caseta nu sunt afisate cu valoarea lor reala, pentru a nu se vedea parola scrisa.

-Codul este <input type="password">...</input>

- Acest element foloseste urmatoarele atribute:

•type - password

•name - numele casutei pentru parole, folosit de scriptul la care sunt trimise datele

•value - de obicei nu este adaugat. Daca este scris, va reprezenta parola default din acea caseta.

•size - specifica numarul de caractere care dau lungimea casutei pt. adaugarea parolei (default 20)

•maxlength - numarul maxim de caractere acceptate sa fie adaugate de utilizator

Casete de formular ascunse

- "hidden" este folosit pentru a adauga in formular date care sa nu fie vizibile in browser si care sunt trimise la scripturi impreuna cu celelalte date din formular.

- Codul este <input type="hidden">...</input>

- Acest element foloseste urmatoarele atribute:

•type - hidden

•name - numele casutei ascunse, folosit de scriptul la care sunt trimise datele

•value - valoarea care se doreste sa fie transmisa prin acea caseta ascunsa.

Checkbox

- este folosit pentru adaugarea mai multor optiuni pe care utilizatorul le poate alege (oricate din ele) prin bifarea lor

-Codul este <input type="checkbox">...</input>

- Acest element foloseste urmatoarele atribute:

•type - checkbox

•name - numele casutei checkbox, folosit de scriptul la care sunt trimise datele

•value - valoarea casetei checkbox respective, care poate fi selectata (bifata)

•checked - daca este adaugat acest atribut, caseta checkbox respectiva este selectata (bifata).

​Exemplu

Exemplu 2

​

Multiple Choice

Puteți limita caracterele pe care un utilizator le poate introduce în câmpul de text (de exemplu, data ar fi 4 numere) folosind :

• Lungime minimă

• Lăţime

• Limită

• Lungime maxima

Multiple Choice

Fiecare element <form> necesită un atribut_____

• control

• action

• reference

• active

Multiple Choice

Formularele pot fi trimise folosind una dintre cele două metode __________ sau __________

• open or close

• send or receive

• get or post

• yes or no

Multiple Choice

Care este eticheta utilizată pentru a crea un formular HTML ?

• <fieldset>

• <input>

• <form>

• <label>

Multiple Choice

Aceasta este, de asemenea, o introducere de text pe o singură linie, dar maschează caracterul de îndată ce utilizatorul o tastează

• Introducerea textului pe o singură linie

• Casete checkbox

• Casete pentru introducerea parolei

• Introducerea textului pe mai multe linii

Fill in the Blanks

Câte tipuri de introducere a textului utilizate în formulare există ?

Multiple Select

Formularul HTML este folosit pentru

• pentru colectarea informațiilor utilizatorului

• doar pentru controlul parolei

• pentru a capta informațiile vizitatorilor site-ului web

• Utilizatorii pot introduce date în câmpuri specifice

• Vizittorii pot afla diverse informații despre site