Solutii IT&C

  • Cum cumperi?
  • Laptopuri
  • Tablete
  • Telefoane mobile
  • Imprimante
  • Stiri
  • Programe utile
  • Facebook
Te afli la: SolutiiPC Cod HTML 11 – Metode de selectie in HTML

11 – Metode de selectie in HTML

Catalin 20/02/2013 Leave a Comment

Î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]

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]

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]

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]

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.

Similare

Filed Under: HTML

Despre autor

Daca vrei sa apara:
- semneaza cu numele tau, nu al firmei
- nu alerga dupa link
- scrie romaneste, nu kum apucy
- daca tii sa ataci, ataci ideea, nu persoana
Primul comentariu e moderat.

Lasă un răspuns Anulează răspunsul

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.

Categorii

  • Aparate Foto (29)
  • Console Jocuri (12)
  • CPanel (8)
  • Cum cumperi? (23)
  • Desktop PC (6)
  • Diverse (49)
  • Electrocasnice (24)
  • Facebook (14)
  • Frigidere (5)
  • Gadgeturi (9)
  • Gmail (2)
  • Guestposts (5)
  • Hardware (27)
  • HDD Extern (10)
  • HTML (11)
  • Imprimante (19)
  • Laptopuri (47)
  • Masini de spalat (5)
  • Microsoft Office (1)
  • Programe utile (4)
  • Reduceri Promotii (3)
  • Reduceri si Promotii (34)
  • Securitate (8)
  • Sisteme Audio (12)
  • Sisteme de Andocare (9)
  • Sisteme de navigatie GPS (14)
  • Sisteme Home Cinema (4)
  • Software (10)
  • Stiri (319)
  • Tablete (43)
  • Telefoane mobile (88)
  • Televizoare (13)
  • Webmasteri (5)
  • Windows (7)
  • Yahoo (4)

Etichete

A4 (4) Acer (11) Allview (17) amazon (7) AMD (12) android (54) apple (49) Asus (23) BlackBerry (6) canon (8) dell (7) facebook (15) featured (310) google (39) Google Nexus (5) HP (14) htc (8) huawei (6) IBM (5) intel (25) ios (5) iphone (5) Lenovo (22) LG (29) linux (6) microsoft (39) motorola (8) nikon (10) Nokia (18) nvidia (6) quad-core (8) qualcomm (12) refacute (24) Samsung (80) seagate (6) snapdragon (7) sony (25) toshiba (10) twitter (6) western digital (7) windows (10) windows phone (5) xiaomi (5) yahoo (7) zuckerberg (5)

Pagini

  • Contact
  • Ghid cumparaturi electronice
  • Ghid de cumparaturi electrocasnice
  • Propune un articol
  • Termeni si conditii

Copyright © 2025 · SolutiiPC.ro