Un formular este un ansamblu de zone active alcătuit din butoane, casete de selecţie, câmpuri de editare etc.
Formularele ajută la realizarea paginilor Web care permit utilizatorilor să introducă informaţii şi să le transmită serverului. Formularele pot fi de la simple la foarte complicate.
Un formular este definit într-un bloc delimitat de etichetele corespondente <form> şi </form>.
Elementul FORM
<form [action=url] [method=get/post] [enctype=MIMEType] [onsubmit=script] [onreset=script] [acceptcharset=set_caractere] [core] [international] [events]> Elementele formularului </form>
Elementul INPUT
<input [type=text|password|checkbox|radio|submit|image|reset|button|hidden| file] [name=nume] [value=valoare] [checked] [disabled] [readonly] [size=latime] [maxlength=cuvinte_maxime] [src=url] [alt=altText] [usemap=url] [align=left|center|right|justify] [tabindex=numar] [accesskey=keyCombo] [onfocus=script] [onblur=script] [onselect=script] [onchange=script] [accept=set_caractere] [core] [international] [events]>
• action precizează ce se va întâmpla cu datele formularului odată ce acestea ajung la destinaţie. <form action=”http://www.yahoo.com/cgi-bin/nume_fis.cgi”>. Script-urile pot fi scrise in limbajele Perl,C,PHP,Unix shell.
• method precizează metodă utilizată de browser pentru expedierea datelor formularului. Sunt posibile următoarele valori:
o get (implicit) – caz în care datele din formular sunt adăugate la adresa URL precizată de atributul action; nu sunt permise cantităţi mari de date (maxim 1 Kb) – între adresa URL şi date este inserat un “?”.
o post – caz în care datele sunt expediate separat. Sunt permise cantităţi mari de date (ordinul MB)
Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin poşta electronică (e-mail).
Pentru aceasta se foloseşte un atribut al etichetei <form> sş anume action care primeşte ca valoare “mailto:” concatenat cu o adresa validă de e-mail către care se va expedia formularul completat.
• type – indică tipul datelor care vor fi introduse:
o text = text,
o submit = buton de trimitere / validare,
o reset = buton de reset / ştergere,
o password = parola, acest câmp de editare nu afişează caracterele în clar, ci numai caractere *, care ascund de privirile altui utilizator aflat în apropiere valoarea introdusă într-un asemenea câmp.
o hidden = nu este vizibil,
o checkbox = caseta de validare, (checkbox) permite selectarea sau deselectarea unei opţiuni;
o radio = buton radio, permit alegerea, la un moment dat, a unei singure variante din mai multe posibile;
o file = fişier pentru upload;
o select = listă de selecţie – permite utilizatorului să aleagă unul sau mai multe elemente dintr-o listă finită.
– name – permite ataşarea unui nume fiecărui element al formularului;
– value – permite atribuirea unei valori iniţiale unui element al formularului
– size – numărul de caractere vizibile din câmp, dacă se depăşeşte numărul de caractere introduse, are loc o derulare a textului;
– maxlenght – numărul maxim de caractere introduse în câmpul de editare, caracterele introduse în plus sunt neglijate;
– readonly – datele prezente în câmp nu pot fi modificate.
Exemplul 1: Formular cu câmp de editare și buton de expediere:
<html> <head> <title>Formular_1 </title> </head> <body> Formular cu un camp de editare<hr> <form action="mailto:xxxxx@xxx.com" method="post"> Numele: <input type="text" name="numele" value="Popescu Vasile"><br> <input type="submit" value="expedieaza"> </form> </body> </html>
Exemplul 2: Buton RESET
<input type="reset" value="RESET">
Exemplul 3: Editare parolă
Password:<input type="password" name="parola">
Exemplul 4: Butoane radio
Alegeti sexul<br> Masculin:<input type="radio" name="sex" value="b"><br> Femeiesc:<input type="radio" name="sex" value="f"><br>
Exemplul 5: Casete de validare
Alegeti meniul:<br> Pizza <input type="checkbox" name="pizza" value="o portie"> Nectar <input type="checkbox" name="nectar" value="un pahar"> Bere <input type="checkbox" name="bere" value="o sticla"> Cafea <input type="checkbox" name="cafea" value="o ceasca"><br>
Exemplul 6: Casete de fișiere
Alegeti fisierul:<input type="file" name="fisier" enctype="multipart/form-data"><br>
Exemplul 7: Liste de selecție
Judetul Resedinta:<br> <select name="Judetul" size="3"> <option value="AB"> Alba <option value="AR" selected> Arad <option selected value="BC" selected> Bacau <option value="B"> Bucuresti <option value="BV"> Brasov </select><br><br>
Exemplul 8: Câmpuri de editare multilinie
Acestea pot fi introduse cu tag-ul <textarea>, care suportă următoarele atribute:
• cols – specifică numărul de caractere afişate pe o linie;
• rows – specifică numărul de linii afişate simultan;
• name – ataşează un nume câmpului de editare multilinie;
• wrap – (world wrap) – trecerea cuvintelor pe rândul următor : determină comportamentul câ,pului de editare faţă de sfârşitul de linie, şi poate fi:
o off = întreruperea cuvintelor la marginea dreaptă a editorului se produce numai când doreşte utilizatorul; caracterul de sfârşit de linie este inclus în textul transmis serverului o dată cu formularul
o hard = se produce întreruperea cuvintelor la marginea dreapta a editorului ; caracterul de sfârşit de linie este inclus în textul transmis serverului o dată cu formularul;
o soft = se produce întreruperea cuvintelor la marginea dreaptă a editorului; nu se include caracterul de sfârşit de linie în textul transmis serverului o dată cu formularul.
<textarea name="text multilinie" cols="30" rows="5" wrap="off"> Prima linie din textul initial. A doua linie din textul initial. </textarea>
InfoCad Blog 