Sunteți pe pagina 1din 39

Controale in forme HTML

1. Elementul form

În documentele HTML formele sunt utilizate pentru a trimite informaţii de la un browser la un server Web.
Un prim exemplu de formă simplă este următorul:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Login Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>Login Details</h1>
<form id="loginDetails" name="loginDetails" method="post" action="login.php">
<p>
<label for="user">Username</label>: <br>
<input type="text" size="30" value="" id="user" name="user"><br>
<label for="pswd">Password</label>: <br>
<input type="password" size="30" value="" id="pswd" name="pswd"><br>
<input type="submit" value="Login" name="loginButton">
</p>
</form>
</body>
</html>
Output-ul este:
Cele mai importante atribute ale unui element form sunt:

• action care specifică o URI la care se trimit datele din formă. Prezenţa acestui
atribut este obligatorie

• method care determină modalitatea de trimitere a informaţiei la server.


Atunci când informaţie este trimisă utilizând metoda get, datele formei sunt
adăugate URL-ului după un semn de întrebare.
Aceasta este metoda implicită dar este limitată la 100 de caractere ASCI sau mai
puţine.
Când informaţia este trimisă utilizând metoda post, datele formei sunt trimise în
corpul cererii.
Dacă datele formei conţin caractere non-ASCI, sau sunt mai mari de 100 de
caractere în lungime, trebuie utilizată metoda post

• enctype care specifică tipul conţinutului utilizat pentru a trimite forma


serverului.
Valoarea implicită este: application/x-www-form-urlencoded. Valoarea
multipart/form-data trebuie utilizată în combinaţie cu elementul de intrare
type="file".
• accept care reprezintă o listă de tipuri MIME(Multipurpose
Internet Mail Extension) separate prin virgulă, pe care serverul
Web le acceptă.
Tipurile MIME frecvent utilizate sunt: "text/html", "image/png",
"image/gif", "video/mpeg", "text/css", şi "audio/basic".
Tipurile MIME înregistrate sunt disponibile la IANA(Internet
Assigned Numbers Authority)

• accept-charset care reprezintă o listă de codări de caractere pe care


le acceptă serverul.
Valoarea implicită este şirul rezervat "UNKNOWN".
Valorile codărilor de caractere înregistrate sunt deasemenea
disponibile la IANA.

• id care reprezintă un identificator unic la nivel de document.


Atributul name este depreciat în HTML 4 în favoarea atributului id

• onSubmit este un element opţional care se utilizează pentru a


executa o funcţie Javascript înainde de contactarea serverului
Forma generală a declaraţiei unei forme într-un document HTML este
următoarea:

<form action=...
method=...
enctype=....
onSubmit=....
:
:
</form>

Pe lângă atributele de mai sus, elementul form mai suportă şi următoarele


atribute Event: onchange, onsubmit, onreset, onselect, onblur, şi onfocus.
În exemplul următor, atunci când este trimisă forma, este apelat scriptul
“script1”:

<form action="sendmail.asp" method="post" onsubmit="return


script1()">
2. Elementul input

Elementul input defineşte un câmp care acceptă date de la utilizator.


Nu există etichetă de final pentru elementul input.
Cele mai importante atribute ale unui element form sunt:

• name reprezintă un nume unic pentru câmp în interiorul formei; cu un


atribut de tip radio, atributul nume poate fi utilizat pentru a grupa aceste
butoane astfel încât numai unul să poată fi selectat la un anumit moment
dat

• readonly specifică faptul că utilizatorul nu poate modifica valoarea


câmpului

• size determină lăţimea caracterului pentru tipuri de intrare: parole şi


text; lăţimea implicită a câmpului este 20 de caractere

• src este utilizat pentru a specifica o URI când tipul introdus este
imagine
• type determină tipul câmpului de intrare; forma va trimite numai butoanele radio
şi check box-urile selectate.
Acest atribut poate avea următoarele valori: button, checkbox, file, hidden,
image, password, radio, reset, submit, text

• value specifică valoarea implicită a controlului, când este utilizat cu text sau
parole de tip ascuns şi totodată specifică valoarea trimisă de datele formei când
controlul este selectat, atunci când este utilizat cu tipul checkbox sau radio;
când este utilizat cu un tip buton, reset sau submit specifică valoarea “caption” care
va fi afişată

• accept reprezintă o listă de tipuri MIME(Multipurpose Internet Mail Extension )


separate prin virgulă pe care serverul Web le acceptă.
Tipurile MIME utilizate frecvent sunt: "text/html", "image/png", "image/gif",
"video/mpeg", "text/css", şi "audio/basic".

• checked determină starea (selectat sau nu) a unui buton radio sau a unei check
box atunci când pagina este încărcată

• disabled specificarea acestui atribut semnifică faptul că utilizatorul nu poate


interacţiona cu câmpul respectiv

• maxlength determină numărul maxim de caractere care pot fi introduse într-un


câmp ca date de intrare
Exemplul următor prezintă codul pentru o formă care conţine trei butoane radio
care evaluează un student prin intermediul valorilor: slab, bun şi foarte bun,
opţiunea bun fiind selectată implicit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Evaluare</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>Evaluare studenţi</h1>
<p>
Numele studentului
</p>
<form id="nota" name="nota" method="post" action="nota.asp">
<p>
Rezultatul evaluării
</p>
<p>
<label for="slab">
<input type="radio" id="slab" name="nota" value="slab">
Slab </label>
<label for="bun">
<input type="radio" id="bun" name="nota" value="bun"
checked="checked">
Bun </label>
<label for="foarte bun">
<input type="radio" id="foarte bun" name="nota" value="bun">
Foarte bun </label>
</p>
<p>
<input type="submit" value="Evaluează" name="evalButton">
</p>
</form>
</body>
</html>
Output-ul va fi:
Pentru a crea o asociere cu un element form se utilizează etichete
(labels).
Un browser non-vizual poate utiliza etichete pentu a citi valoarea unui
control al unei forme.
Astfel, în exemplul anterior, fiecare din cele trei butoane radio sunt
incluse într-un element label, pentru a face o asociere între text şi
element.
Există două tipuri de asocieri implicite şi explicite.

Asocieri implicite se realizează atunci când elementul label include un


control al formei.
O astfel de asociere trebuie să conţină elementul asociat cu eticheta la
acelaşi nivel, adică nu poate referi mai multe celule ale unei tabele.
Exemplul următor asociază textul “Student” cu câmpul controlului nota

<label>Student
<input type="nota" name="student" size="30">
</label>
Asocieri explicite realizează o asociere cu alte elemente utilizând atributul for.
Acest atribut este utilizat pentru a asocia (mapa) eticheta cu atributul id al elementului
asociat.
Acest tip de asociere poate referi şi alte elemente, cum ar fi coloanele unei tabele.
Exemplul următor crează o etichetă explicită, unde target-ul (prompt) este o coloană a
unei tabele şi controlul formei este altă coloană
<td>
<label for="student">Student</label>
</td>
<td>
<input type="text" id="student"
name="student" size="30">
</td>
În general, toate etichetele trebuie să aibă o asociere explicită cu controlul asociat din
form.
Asocierile implicite pot să devină explicite; în acest sens, exemplul de asociere implicită
anterior poare fi convertit la o asociere explicită astfel:
<label for="surname">Student
<input type="text" id="student"
name="student" size="30">
</label>
În continuare vom analiza cele mai importante elemente ale unei
forme.

Toate elementele unei forme pot să trimită informaţii despre


conţinutul lor şi despre starea lor (activată sau dezactivată).

Fiecare element include un atribut “type” şi o valoare unică care îl


identifică.

Atunci când datele unei forme sunt trimise la un server web, fiecare
element îşi trimite numele şi starea sau valoarea sa curentă.
Introducerea unei singure linii de text

Pentru a introduce o linie de text într-o formă se utilizează sintaxa următoare:

<input type="text" name="...." size="X" maxlength="Y" value="...">

unde, valoarea atributului name identifică conţinutul pentru CGI,


atributul size determină lăţimea câmpului de intrare şi este opţional( valoarea
implicită este de 20 de caractere) şi
atributul maxlength determină numărul de caractere permise al şirului de intrare.
Valoarea atributului value va fi afişată atunci când se încarcă prima dată forma
Codul următor va afişa un câmp numit “Câmp de intrare” lat de 30 de caractere:

<input type="text" name="Câmp de intrare" size="30" value="Textul de


intrare implicit">

cu output-ul:
Introducerea unei parole

Introducerea unei parole este similară cu introducerea unei singure


linii de text, cu excepţia faptului că toate literele introduse sunt ascunse.
Pentru a introduce o linie de text într-o formă se utilizează sintaxa
următoare:

<input type="password" name="...." size="X" maxlength="Y"


value="...">

Codul următor va afişa un câmp numit “passwd” lat de 30 de caractere

<input type="password" name="pass3" size="30" value="We are


not alone">
cu output-ul:
3. Elementul Textarea

Elementul Textarea este utilizat pentru inserarea unui text multi-linie.


Forma generală a codului pentru generarea unui câmp Textarea este
următoarea:

<textarea name="..." rows="X" cols="Y" wrap="virtual"> ...</textarea>

unde, valoarea atributului name identifică conţinutul pentru CGI,


valoarea atributului rows reprezintă numărul de linii care determină mărimea
ferestrei text şi
valoarea artibutului cols reprezintă lăţimea suprafeţei de afişare în caractere.
Aceste două atribute sunt obligatorii.
Un exemplu de implementare a acestui element este:

<textarea rows="6" cols="30">


Text typed here will be displayed in the
Text Area.
</textarea>
Pentru a avea o “textarea” fără text, se plasează eticheta de final
imediat după cea de start pentru a evita tipărirea caracterelor “white
space” în interiorul suprafeţei textarea:

<textarea rows="6" cols="30"></textarea>

Alte atribute ce se pot utiliza cu elementul textarea mai sunt:


disabled, utilizat pentru a dezactiva Textarea şi
readonly care face ca textul din Textarea să nu poată fi modificat de
utilizator.
Butoane Radio

Butoanele radio se utilizează de regulă ca mulţimi de butoane mutual


disjuncte, adică numai un buton dintr-un grup poate fi selectat la un anumit
moment dat.
O mulţime de butoane este definită ca având acelaşi nume pentru atributul
name.
Butoanele radio se utilizeaza pentru a alege un articol şi numai unul din mai
mult evariante posibile

Atributul value reprezintă valoarea care este trimisă o dată cu datele formei.
Se mai poate specifica şi o valoare checked opţională care semnifică faptul că
butonul radio respectiv este selectat iniţial, atunci când se încarcă pagina prima
dată.
Sintaxa generală pentru crearea unui set de butoane radio este:

<input type="radio" name="..." value="..." checked>


<input type="radio" name="..." value="...">
Codul următor generează patru butoane radio cu selecţie implicită pe primul buton:

<input type="radio" name="evaluari" value="foarte buni" checked> studenti foarte


buni<br>
<input type="radio" name="evaluari" value="buni"> studenti buni<br>
<input type="radio" name="evaluari" value="mediocri"> studenti mediocri<br>
<input type="radio" name="evaluari" value="slabi"> studenti slabi<br>

cu output-ul:
Casete de selectare (Check box-uri)

Checkbox-urile reprezintă mulţimi de butoane care pot fi selectate la un anumit


moment dat.
O astfel de mulţime trebuie să conţină cel puţin un buton.

Checkbox-urile se utilizeaza pentru a alege yes sau no pentru anumite articole


particulare.

Valoarea atributului name identifică unic conţinutul atunci când datele formei
sunt trimise iar
valoarea atributului value este trimisă o dată cu datele formei.
Ca şi în cazul butoanelor radio, se mai poate specifica şi o valoare checked
opţională şi care semnifică faptul că butonul check respectiv este iniţial selectat.
Sintaxa generală a unui grup de butoane check este:

<input type="checkbox" name="..." value="..." checked>


<input type="checkbox" name="..." value="..." checked>
Codul următor generează patru butoane check box cu selecţie implicită pe primul
buton:

<input type="checkbox" name="evaluari_1" value="foarte buni" checked> studenţi


foarte buni<br>
<input type="checkbox" name="evaluari_2" value="buni"> studenţi buni<br>
<input type="checkbox" name="evaluari_3" value="mediocri"> studenţi
mediocri<br>
<input type="checkbox" name="evaluari_4" value="slabi"> studenţi slabi<br>

cu output-ul:
Listbox

-există două tipuri de liste de marime fixa disponibile: drop down


"combo box" şi "list box."
- elementul HTML pentru aceste liste se numeşte select.
- aceste liste trebuie folosite pentru a realiza alegeri dintr-un număr
relativ mic de opţiuni
-controlul drop down combo box - se utiliz pt a alege numai un
articol dintr-o listă predefinită
-controlul fixed size list box- se utiliz pt a alege unul sau mai multe
art dintr-o listă predefinită

Elementul select crează o listă drop down din care utilizatorul poate
selecta articole.
Elementul select suportă următoarele atribute specifice:
• name reprezintă un nume unic pentru câmpul din formă. Atunci
când forma este afişată, atributul name conţine valoarea selectată
• size determină numărul de linii vizibile atunci când lista este afişată
• multiple permite selecţii multiple ale articolelor din listă
Elementul option este utilizat cu elementul select pentru a indica variante posibile.
Exemplul următor specifică o implementare a celor două elemente:

<select name=studenţi size=2 multiple >


<option>Ionescu
<option>Popescu
<option>Georgescu
</select>

cu output-ul:
Atributele frecvent utilizate ale elementului option sunt:

• value determină valoarea pentru opţiune

• label Elementul option are o etichetă explicită, identificată


prin conţinutul elementului option.
Atributul label permite suprascrierea sa şi specificarea unei
etichete mai scurte.
Dacă este specificat, browser-ul va utiliza (ca etichetă)
conţinutul acestui atribut şi nu conţinutul elementului option.

• selected determină selecţia implicită

• disabled dezactivează un articol din listă


Declaraţia unui combobox

Sintaxa generală unei declaraţii de meniu este:

<select name="...">
<option value="..."> AAA</option>
<option value="..." selected>BBB</option>
<option value="..."> CCC</option>
</select>

unde, valoarea atributului name identifică unic conţinutul atunci când


datele formei sunt trimise şi
valoarea atributului value este trimisă o dată cu datele formei.
În cazul în care atributul value nu este prezent, forma va trimite
textul articolului listei.
AAA, BBB şi CCC sunt articolele prezente în listă.
Opţiunea selected precizează care articole sunt vizibile la afişarea
meniului.
Codul următor generează un meniu cu opţiunea a patra selectată
iniţial

<select name="adrese">
<option value="adresa1" > Strada 1 nr. 1 </option>
<option value="adresa2"> Strada 1 nr. 2 </option>
<option value="adresa3" > Strada 2 nr.1 </option>
<option value="adresa4" selected> Strada 2 nr.2</option>
</select>

cu output-ul:
Observatii:

- este similarităţi între controalele drop down combo box şi btoaneel


radio şi între controalele list box şi check box.

- controlul list box cu selecţie multipla pot fi interpretate ca un grup


de check box-uri

- combobox-ul are un nume şi i se citeşte valoarea ca în cazul unui


text box.

- listbox-ul este tratat la fel cu excepţia faptului că permite selecţia


multiplă;
- dacă o list box permite selecţia multiplă, numele acesteia trebuie să
fie un array.
- de exemplu:

<select name="mylist[]" size="3">

- la acceptarea valorilor dintr-o listbox ce permite selecţie multiplă acestea pot fi tratate ca
un array.
- de ex, codul următor va afişa nr de articole selectate după care va afişa articolele:

<?php
$listvals=$_POST['mylist'];
$n=count($listvals);
echo "User chose $n items from the list.<br>\n"
foreach($i=0;$i<count($listvals);$i++)
echo "Item $i=".$listvals[$i]."<br>\n";
?>

- o diferenţă majoră între checkbox-uri şi butoanele radio este aceea că toate butoanele radio
ale unui grup trebuie să aibă acelaşi nume
- checkbox-urile ar trebui să aibă nume distincte

- se poate obţine valoarea butonlui radio apăsat testând valoarea


$_POST['radiobuttonname']
- checkbox-urile vor fi incluse în array-ul $_POST numai dacă sunt selectate
Grupuri de optare

Elementul optgroup poate fi utilizat pentru a grupa opţiunile relaţionate


pentru elementul selectat.
Atributul label este obligatoriu pentru grupul de opţiuni iar atributul
disabled este opţional.

<select name="Lista">
<optgroup label="Studenţi buni">
<option value="Ionescu">Ionescu</option>
<option value="Popescu">Popescu</option>
</optgroup>
<optgroup label="Studenţi foarte buni">
<option value="Georgescu">Georgescu</option>
<option value="Mihăescu">Mihăescu</option>
</optgroup>
</select>

cu output-ul:
Butoanele Submit şi Reset

Butonul Submit face ca browser-ul să trimită datele formei la locaţia


indicată de atributul action iar butonul Reset face ca toate elementele
formei să revină la starea iniţială.

Sintaxa pentru generarea unor astfel de butoane este:

<input type="submit" value="...">

şi respectiv:

<input type="reset" value="...">


Conţinutul atributului value apare ca o etichetă a butoanelor în pagină.
Codul următor creează un buton Submit şi un buton Reset:

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


<input type="reset" value="Reset">

astfel:
Taste de navigare şi acces

Pentru a naviga de la un buton la altul, se pot utiliza: tastatura, mouse-ul, Tab sau
Taste de Acces(Access Key).

Navigarea cu Tab

Fiecare control care poate primi focus-ul poate avea un tabindex, care determină
ordinea controalelor care vor fi vizitate.
Controlul cu cel mai mic tabindex va fi primul vizitat.
Valorile tabindex-ului nu trebuie să fie secvenţiale (consecutive), şi nu trebuie să
pornească de la o anumită valoare.
Dacă două controale au acelaşi tabindex asociat, ele sunt vizitate în funcţie de
poziţia lor în streamul de caractere.

Elementele dezactivate sunt excluse din taborder.

Exemplul următor asociază o ordine tab pentru două controale text:

<label for="forename">Nume:</label>
<input type="text" id="nume" tabindex="1">
<label for="surname">Prenume:</label>
<input type="text" id="prenume" tabindex="2">

cu output-ul:
Taste de acces

O tastă de acces permite navigarea la un anumit element utilizând o anumită tastă.


Metoda exactă de navigare depinde de sistem.
De exemplu, în MS Windows tastele de acces sunt activate tastând “Alt” şi tasta
respectivă. Rezulatul depinde de acţiunea asociată respectivei taste.
La setarea unor taste de acces, trebuie ţinut cont de tastele de acces predefinite ale
sistemului.
De exemplu, combinaţia Alt+F este predefinită în Internet Explorer.
Exemplul următor asociază ca tastă de acces “1” pentru eticheta elementului prenume.

Prin urmare, tastarea acestei taste de acces va da focus-ul etichetei, care va da focusul
controlului de introdus text:

<label for="prenume" accesskey="1" >Prenume:


<input type="text" id="prenume" tabindex="1">
</label>

cu output-ul:

Elementul fieldset permite controalelor şi etichetelor relaţionate să fie grupate,


adăugând structură formei.
Acest element îmbunătăţeşte accesibilitatea permiţând navigarea cu Tab.
Elementul legend permite să asociem un câmp caption la elementul fieldset.
Acest element are funcţia de a îmbunătăţi structura şi claritatea documentului.
<form action="http://www.math.uaic.ro/înregistrare.asp" method="post">
<fieldset>
<legend>Student</legend>
<label for="Nume" accesskey="N" >Nume:</label>
<input type="text" id="nume" tabindex="1">
<label for="Prenume">Prenume:</label>
<input type="text" id="prenume" tabindex="2">
<!-- further personal information here -->
</fieldset>
<fieldset>
<legend>Adresa...</legend>
<!-- previous emplyment details here -->
</fieldset>
</form>

cu output-ul:
Controale Successful
Un control successful este un control care este trimis ca parte a datelor unei
forme.
Fiecare control successful are un nume şi o valoare.
Pentru a fi successful, controlul trebuie definit într-un element form şi
trebuie să aibă un nume valid.
Controalele dezactivate şi butoanele reset nu pot fi trimise.
Dacă o formă conţine mai multe butoane submit, numai cel apăsat va fi
trimis.
Butoanele radio şi checkbox vor fi trimise numai dacă sunt selectate.
Dacă mai multe butoane radio au acelaşi nume, butoanele devin mutual
exclusive.
Elementul select este în pereche cu toate opţiunile sale de selecţie şi dacă
nu este selectat nimic, elementul select nu este trimis.
Elemente ascunse

Elementele “hidden” nu sunt vizibile în interiorul unei forme dar conţinutul lor este
trimis împreună cu datele formei.

Conţinutul atributului value identifică conţinutul elementului.


Forma generală a unui element hidden este:

<input type="hidden" name="..." value="...">

S-ar putea să vă placă și