Documente Academic
Documente Profesional
Documente Cultură
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:
• action care specifică o URI la care se trimit datele din formă. Prezenţa acestui
atribut este obligatorie
<form action=...
method=...
enctype=....
onSubmit=....
:
:
</form>
• 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ă
• checked determină starea (selectat sau nu) a unui buton radio sau a unei check
box atunci când pagina este încărcată
<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.
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
cu output-ul:
Introducerea unei parole
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:
cu output-ul:
Casete de selectare (Check box-uri)
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:
cu output-ul:
Listbox
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:
cu output-ul:
Atributele frecvent utilizate ale elementului option sunt:
<select name="...">
<option value="..."> AAA</option>
<option value="..." selected>BBB</option>
<option value="..."> CCC</option>
</select>
<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:
- 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
<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
şi respectiv:
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.
<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
Prin urmare, tastarea acestei taste de acces va da focus-ul etichetei, care va da focusul
controlului de introdus text:
cu output-ul:
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.