Activitatea nr.10: 25.11-29.11

Tema nr.5:  Formulare  HTML

Unitatea de invatare:

Instrumente de lucru pentru crearea site-urilor Web

Tipul lectiei: Dobandire de noi cunostinte

Bibliografie indicata:
  

Formulare  

De cele mai multe ori formularele HTML sunt create pentru a fi folosite impreuna cu alte programe si scripturi web, cum sunt PHP, JavaScript si altele.

 Pentru a crea un formular in HTTML 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.
• enctye - determina mecanismul folosit pentru a codifica continutul transmis din formular.
• name - Este numele formularului, folosit de scripturi VB (Visula Basic) sau JavaSript.
• target - Este tinta cadrului (frame) unde pagina va fi vizualizata, dupa transmiterea datelor din form.

 Elementele de formular

In continuare sunt prezentate restul elementelor 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.
Cele mai multe 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 (PHP, CGI, JavaScript)
• 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>
  In browser va apare:  
• - 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

Camp textarea

• - "textarea" este un element ce creaza un camp in pagina, in care utilizatorul poate adauga mai multe linii de text.
• - Codul este <textarea></textarea>
  In browser va apare:  
• - Acest element foloseste 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>
  In browser va apare:  
• - 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.

Check box

• - 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>
  In browser va apare:  
• - 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).

Radio button

•  este folosit pentru adaugarea mai multor optiuni dintre care utilizatorul poate alege una singura
•  Codul este <input type="radio"></input>
  In browser va apare:  
•  Acest element foloseste urmatoarele atribute:
  • type - radio
  • name - numele casutei radio, folosit de scriptul la care sunt trimise datele
  • value - valoarea casetei radio respective, care poate fi selectata (bifata)
  • checked - daca este adaugat acest atribut, caseta radio respectiva este selectata (bifata).

Casete pentru upload

• - "file upload" este folosit pentru a permite utilizatorului sa incarce alte documente pe serverul web. Aceasta caseta este insotita de un buton "Browse" prin care se alege documentul care va fi transferat pe server. (upload-ul se face tot prin intermediul unui script (PHP, CGI)
• - Codul este <input type="file"></input>
  In browser va apare:  
• - Acest element foloseste urmatoarele atribute:
  • type - file
  • name - numele casutei upload, folosit de scriptul la care sunt trimise datele
  • size - specifica numarul de caractere care dau lungimea casutei upload.

Buton simplu

•  acesta este folosit cu JavaScript sau VBScript pentru a efectua o actiune când este apasat
•  Codul este <input type="button" value="Buton"></input>
  In browser va apare:  
•  Acest element foloseste urmatoarele atribute:
  • type - button
  • name - numele butonului, necesar pentru a fi folosit de script
  • value - textul care apare pe buton.

Buton Submit

•  acest element face ca prin apasarea lui browser-ul sa trimita numele si valoarea tuturor celorlalte elemente din formular la scriptul de pe server
•  Codul este <input type="submit" value="Trimite"></input>
  In browser va apare:  
•  Acest element foloseste urmatoarele atribute:
  • type - submit
  • name - numele butonului, poate fi folosit de scriptul la care se trimit datele
  • value - textul care apare pe buton.

Imagine pentru buton Submit

•  permite aplicarea unei imagine in locul butonului Submit standard
•  Codul este <input type="image" src="locatie_imagine"></input>
•  Acest element foloseste urmatoarele atribute:
  • type - image
  • name - numele butonului, poate fi folosit de scriptul la care se trimit datele
  • src - locatia imaginii folosite.

Buton Reset

•  permite utilizatorului sa stearga toate datele pe care le-a scris in celelalte elemente din formular
•  Codul este <input type="reset" value="Sterge"></input>
  In browser va apare:  
•  Acest element foloseste urmatoarele atribute:
  • type - reset
  • value - textul care apare pe buton.

Elemente select

•  pentru acest element se foloseste tag-ul "<select></select>", care formeaza o lista, un meniu, cu date ce pot fi selectate.
•  Atributete elementului "<select>" sunt:
  • name - numele acestui element, necesar pentru a fi folosit de scriptul la care sunt trimise datele
  • size - seteaza inaltimea elementului Select, care reprezinta si numarul de optiuni din lista care vor fi vizibile initial
  • multiple - prezenta acestui atribut specifica faptul ca utilizatorul poate selecta mai multe optiuni.
•  "<select></select>" este folosit impreuna cu elemente "<option> </option>" care reprezinta lista elementelor ce sunt adaugate si afisate in lista de selectare.
•  <option> </option> foloseste doua atribute:
  • selected - cand acesta este adaugat, optiunea respectiva este selectata când pagina web este initial incarcat. Cand sunt adaugate mai multe optiuni, este indicat folosirea acestui atribut doar cu una singura.
  • value - specifica valoarea variabilei numita in optiunea respectiva (necesara pt. scriptul care va primi datele).
•  sunt doua tipuri de elemente Select, unde diferenta o face folosirea atributului SIZE
•  Cele doua tipuri de elemente Select sunt:
  1. Drop Down List (Lista de derulare)
  •  Codul este:
      <select name="select">
        <option>Optiune 1</option>
        <option>Optiune 2</option>
    </select>
  •  unde "name" este atributul care defineste numele acestui tag SELECT, iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de selectare.
    In browser va apare:  
• 2. List Box
  • - Codul este:
      <select name="select" size="4">
        <option>Optiune 1</option>
        <option>Optiune 2</option>
    </select>
  •  unde "name" este atributul care defineste numele acestui tag SELECT, atributul "size" determina inaltimea elementului select care determina si numarul de optiuni vizibile initial, iar "<option>" impreuna cu "Optiune 1" (si 2) reprezinta elementele din lista de selectare.
    In browser va apare:  

Toate aceste elemente trebuie incadrate in tag-ul "<form> ... </form>"!