Nume Tutorial:Crearea formularelor
Descriere:Crearea formularelor
Download:Nu necesita
Autor:Anonim
Sursa (Link-ul oficial): Propria parere:Util.
Tutorialul:
De cele mai multe ori formularele HTML sunt create pentru a fi folosite împreună cu alte programe şi scripturi web, cum sunt PHP, JavaScript şi altele.

1. Tag-ul FORM

Pentru a crea un formular în HTML se foloseşte elementul:

<form> ... </form>

în cadrul acestuia se vor adăuga celelalte elemente specifice.
Elementul <form> ... </form> nu conţine atribute pentru format, foloseşte însă următoarele atribute:

action - aici se scrie adresa URL a unui script de pe server (de obicei PHP sau CGI), program care trebuie să accepte datele din FORM , le procesează şi trimite înapoi răspunsul la browser.
method - aici putem scrie get sau post. Aceste valori specifică ce metodă HTTP va fi folosită pentru a trimite conţinutul formularului la server.
enctye - determină mecanismul folosit pentru a codifica conţinutul transmis din formular.
name - Este numele formularului, folosit de scripturi VB (Visual Basic) sau JavaSript.
target - Este ţinta cadrului (frame) unde pagina va fi vizualizată, după transmiterea datelor din form.
2. Elementele de formular

În continuare sunt prezentate restul elementelor de formular care sunt folosite pentru a crea diferite câmpuri, casete, butoane în pagina web, necesare pentru a aduna datele care vor fi trimise la aplicaţie pe server.
Cele mai multe se crează prin atributul type al elementului:

<input> ... </input>

Proprietăţile elementului <input> ... </input>

type - tipul de FORM folosit (caseta text, buton şi altele ...)
name - numele elementului respectiv de formular, folosit de scripturile la care sunt trimise datele
value - datele (valoarea) asociate acelui element de formular şi care sunt trimise, împreună cu numele, către scripturi (PHP, CGI, JavaScript)
size - specifică numărul de caractere care dau lungimea zonei de text
maxlength - numărul maxim de caractere acceptate
checked - specifică dacă un buton sau altă formă va fi iniţial selectată (bifată).
readonly - folosit pentru câmpuri de tip text, împedică modificarea valorii (textului) din acel câmp
disabled - împiedică folosirea câmpului care are această 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 în pagină un câmp pentru text (cu o singură linie).
- Codul este:

<input type="text"></input>

- Acest element foloseşte următoarele atribute:

type - text
name - numele căsuţei de text, folosit de scriptul la care sunt trimise datele
value - va reprezenta propriul context ca valoare aleasă. Un şir de text care apare în căsuţa de text
size - specifică numărul de caractere care dau lungimea căsuţei de text (default 20)
maxlength - numărul maxim de caractere acceptate să fie adăugate de utilizator
Câmp textarea
- "textarea" este un element ce crează un câmp în pagină, în care utilizatorul poate adăuga mai multe linii de text.
- Codul este:

<textarea></textarea>

- Acest element foloseşte următoarele atribute:

name - numele câmpului de text, folosit de scriptul la care sunt trimise datele
rows - numărul de linii a zonei de text
cols - numărul de coloane a zonei de text
wrap - standard este OFF. Dar poate avea valorile: "VIRTUAL" sau "PHYSICAL", astfel ca textul wrap în browser să fie prezentat exact cum este scris de utilizator.
Casete pentru parole
- "password" este folosit pentru a permite adăugarea de parole. Caracterele adăugate în această casetă nu sunt afişate cu valoarea lor reală, pentru a nu se vedea parola scrisă.
- Codul este:

<input type="password"></input>

- Acest element foloseşte următoarele atribute:

type - password
name - numele căsuţei pentru parole, folosit de scriptul la care sunt trimise datele
value - de obicei nu este adăugat. Dacă este scris, va reprezenta parola default din acea casetă.
size - specifică numărul de caractere care dau lungimea căsuţei pt. adăugarea parolei (default 20)
maxlength - numărul maxim de caractere acceptate să fie adăugate de utilizator
Casete de formular ascunse
- "hidden" este folosit pentru a adăuga în formular date care să nu fie vizibile în browser şi care sunt trimise la scripturi împreună cu celelalte date din formular.
- Codul este

<input type="hidden"></input>

- Acest element foloseşte următoarele atribute:

type - hidden
name - numele căsuţei ascunse, folosit de scriptul la care sunt trimise datele
value - valoarea care se doreşte să fie transmisă prin acea casetă ascunsă.
Check box
- este folosit pentru adăugarea mai multor opţiuni pe care utilizatorul le poate alege (oricâte din ele) prin bifarea lor
- Codul este:

<input type="checkbox"></input>

- Acest element foloseşte următoarele atribute:

type - checkbox
name - numele căsuţei checkbox, folosit de scriptul la care sunt trimise datele
value - valoarea casetei checkbox respective, care poate fi selectată (bifată)
checked - dacă este adăugat acest atribut, caseta checkbox respectivă este selectată (bifată).
Radio button
- este folosit pentru adăugarea mai multor opţiuni dintre care utilizatorul poate alege una singură
- Codul este:

<input type="radio"></input>

- Acest element foloseşte următoarele atribute:

type - radio
name - numele căsuţei radio, folosit de scriptul la care sunt trimise datele
value - valoarea casetei radio respective, care poate fi selectată (bifată)
checked - dacă este adăugat acest atribut, caseta radio respectivă este selectată (bifată).
Casete pentru upload
- "file upload" este folosit pentru a permite utilizatorului să încarce alte documente pe serverul web. Această casetă este însoţită 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>

- Acest element foloseşte următoarele atribute:

type - file
name - numele căsuţei upload, folosit de scriptul la care sunt trimise datele
size - specifică numărul de caractere care dau lungimea căsuţei upload.
Buton simplu
- acesta este folosit cu JavaScript sau VBScript pentru a efectua o acţiune când este apăsat
- Codul este:

<input type="button" value="Buton"></input>

- Acest element foloseşte următoarele 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 apăsarea lui browser-ul să trimită numele şi valoarea tuturor celorlalte elemente din formular la scriptul de pe server
- Codul este:

<input type="submit" value="Trimite"></input>

- Acest element foloseşte următoarele 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 imagini în locul butonului Submit standard
- Codul este:

<input type="image" src="locatie_imagine"></input>

- Acest element foloseşte următoarele atribute:

type - image
name - numele butonului, poate fi folosit de scriptul la care se trimit datele
src - locaţia imaginii folosite.
Buton Reset
- permite utilizatorului să şteargă toate datele pe care le-a scris în celelalte elemente din formular
- Codul este:

<input type="reset" value="Sterge"></input>

- Acest element foloseşte următoarele atribute:

type - reset
value - textul care apare pe buton.
Elemente select
- pentru acest element se foloseşte tag-ul

<select></select>

care formează o listă, un meniu, cu date ce pot fi selectate.
- Atributele elementului "<select>" sunt:

name - numele acestui element, necesar pentru a fi folosit de scriptul la care sunt trimise datele
size - setează înălţimea elementului Select, care reprezintă şi numărul de opţiuni din listă care vor fi vizibile iniţial
multiple - prezenţa acestui atribut specifică faptul că utilizatorul poate selecta mai multe opţiuni.
- "<select></select>" este folosit împreună cu elemente "<option> </option>" care reprezintă lista elementelor ce sunt adăugate şi afişate în lista de selectare.
- <option> </option> foloseşte două atribute:

selected - când acesta este adăugat, opţiunea respectivă este selectată când pagina web este iniţial încărcată. Când sunt adăugate mai multe opţiuni, este indicat folosirea acestui atribut doar cu una singură.
value - specifică valoarea variabilei numită în opţiunea respectivă (necesară pt. scriptul care va primi datele).
- sunt două tipuri de elemente Select, unde diferenţa o face folosirea atributului SIZE
- Cele două 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 defineşte numele acestui tag SELECT, iar "<option>" împreună cu "Optiune 1" (şi 2) reprezintă elementele din lista de selectare.

2. List Box
- Codul este:

<select name="select" size="4">
<option>Optiune 1</option>
<option>Optiune 2</option>
</select>

- unde "name" este atributul care defineşte numele acestui tag SELECT, atributul "size" determină înălţimea elementului select care determină şi numărul de opţiuni vizibile iniţial, iar "<option>" împreună cu "Optiune 1" (şi 2) reprezintă elementele din lista de selectare.

Toate aceste elemente trebuie încadrate în tag-ul "<form> ... </form>"!