duminică, 13 noiembrie 2011

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


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>"!

13 comentarii:

  1. marti raman la pregatire ca habar nu am sa lucrez in html :)):))

    RăspundețiȘtergere
  2. @Laura cu ce stii si ce ai pe blog e indeajuns!Succes.

    RăspundețiȘtergere
  3. mi se pare simplu, trebuie sa stim cele 5 tag-uri

    RăspundețiȘtergere
  4. mi-a placut foarte mult ora de astazi pentru ca ati fost foarte intelegatoare cu noi

    RăspundețiȘtergere
  5. Ati explicat foarte bine astazi lectia referitoare la formulare!

    RăspundețiȘtergere
  6. Am inteles tot ce ati explicat astazi la ora !Nu e chiar atat de dificil .

    RăspundețiȘtergere
  7. Noi intelegem lectiile bine dar trebuie sa le citim doar cu mai multa atentie acasa si sa fim atenti si la ora cand ni se explica.

    RăspundețiȘtergere
  8. Sunt interesante aceste formulare html doar ca necesita atentie

    RăspundețiȘtergere
  9. Trebuie sa intelegem ca nu e chiar asa comlicat :D

    RăspundețiȘtergere
  10. da nu e complicat , dar daca nu esti atent nu stii sa le faci!

    RăspundețiȘtergere
  11. imi place mult cum sunt sistematizate lectiile astfel nu se poate sa nu reusim sa luam atestatul

    RăspundețiȘtergere