11 – Metode de selectie in HTML

În acest articol voi prezenta cele mai populare 3 metode de selecţie în HTML: tag-ul </select>, checkbox, şi radio button (nu ştiu o traducere oportună, dacă aveţi sugestii vă aştept cu un comentariu).

Tag-ul </select>

Meniurile drop-down sunt încadrate de tag-urile <select>, şi </select>, fiecare opţiune disponibilă având la rându-i tag-urile <option> respectiv </option>.

Ca orice cofetar serios, voi da exemplu tot cu clătitele. Să vedem cum aflăm clătitele preferate ale clienţilor.

[html]
<select>
<option>branza</option>
<option>carne</option>
<option>ciocolata</option>
<option>gem</option>
<option>zahar</option>
</select>
[/html]
branzacarneciocolatagemzahar

Am ordonat alfabetic ingredientele, vreau să păstrez ordinea dar opţiunea implicită să fie gem. Cum? Adaug atributul selected cu valoarea „yes”.
[html]
<select>
<option>branza</option>
<option>carne</option>
<option>ciocolata</option>
<option selected="yes">gem</option>
<option>zahar</option>
</select>
[/html]
branzacarneciocolatagemzahar

Dacă vrei să afişezi mai multe de un element al listei, poţi ataşa tag-ului select atributul size, având ca valoare numărul de elemente afişate.
[html]
<select size="5">
<option>branza</option>
<option>carne</option>
<option>ciocolata</option>
<option>gem</option>
<option>zahar</option>
</select>
[/html]
branzacarneciocolatagemzahar

Nimănui nu-i plac toate felurile de clătite, dar majorităţii clienţilor le plac cel puţin 2-3. Le poţi oferi posibilitatea să aleagă mai multe elemente din lista adăugând tag-ului select atributul multiple cu valoarea „yes”. Selecţia se va face prin CTRL+click în cazul în care dorim selectare multiplă.
[html]
<select size="5" multiple="yes">
<option>branza</option>
<option>carne</option>
<option>ciocolata</option>
<option>gem</option>
<option>zahar</option>
</select>
[/html]
branzacarneciocolatagemzahar

Evident, pentru selectare multiplă atributul size va trebui să fie prezent, altfel va fi un simplu meniu drop’down.

Selecţia prin radio buttons:

Radio Buttons sunt butoane ce permit selecţia unei singure opţiuni dintr-un grup predefinit.

Sunt introduse prin tag-ul <input> şi atributul type cu valoarea „radio”. În plus, vor avea atributul name cu valoarea numelui, ce trebuie să fie identică în toată lista.
[html]
Prefer clatite cu:
Branza: <input type="radio" name="clatite">
Carne: <input type="radio" name="clatite">
Ciocolata: <input type="radio" name="clatite">
Gem: <input type="radio" name="clatite">
Zahar: <input type="radio" name="clatite">
[/html]
Prefer clatite cu:
Branza:
Carne:
Ciocolata:
Gem:
Zahar:

În cazul în care vrei ca unul din elemente să fie selectat implicit, adaugi atributul checked cu valoarea „yes”.
[html]
Branza: <input type="radio" name="clatite">
Carne: <input type="radio" name="clatite">
Ciocolata: <input type="radio" name="clatite">
Gem: <input type="radio" name="clatite" checked="yes">
Zahar: <input type="radio" name="clatite">
[/html]
Branza:
Carne:
Ciocolata:
Gem:
Zahar:

Radio buttons nu permit selectia multiplă. Dacă este necesară selecţia multiplă se vor folosi checkbox, precum în exemplul de mai jos.

Checkbox

Checkbox sunt similare cu radio buttons, dar spre deosebire de acestea permit selectarea multiplă.

Se înserează similar în program, prin tag-ul <input> şi atributele type cu valoarea „checkbox” şi name cu valoarea numelui, ce trebuie să fie identică în toată lista. În plus, vor avea şi atributul „value” unic fiecărui element.
[html]
Branza: <input type="checkbox" name="clatite" value="branza">
Carne: <input type="checkbox" name="clatite" value="carne">
Ciocolata: <input type="checkbox" name="clatite" value="ciocolata">
Gem: <input type="checkbox" name="clatite" value="gem">
Zahar: <input type="checkbox" name="clatite" value="zahar">
[/html]
Branza:
Carne:
Ciocolata:
Gem:
Zahar:

În cazul în care doreşti selectarea implicită a uneia sau mai multor variante, adaugi atributul checked cu valoarea „yes”.
[html]
Branza: <input type="checkbox" name="clatite" value="branza" checked="yes">
Carne: <input type="checkbox" name="clatite" value="carne">
Ciocolata: <input type="checkbox" name="clatite" value="ciocolata">
Gem: <input type="checkbox" name="clatite" checked="yes" value="gem" checked="yes">
Zahar: <input type="checkbox" name="clatite" value="zahar">
[/html]
Branza:
Carne:
Ciocolata:
Gem:
Zahar:

Am incercat sa ofer cat mai multe exemple pentru a intelege cum poti manipula eficient o lista de optiuni.
Care dintre cele 3 metode e cea mai buna? Depinde de la caz la caz.