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>"
Descriere:Crearea formularelor
Download:Nu necesita
Autor:Anonim
Sursa (Link-ul oficial):
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>"