Crearea controalelor de selectie într-un formular (SELECT, OPTGROUP, OPTION)
HTML permite crearea mai multor tipuri de liste de selectie (meniuri), de orice lungime, prin intermediul elementului SELECT. Fiecare lista prezinta utilizatorului unul sau mai multe elemente care pot fi selectate individual sau multiplu. Lis 111j95b tele pot fi afisate în interiorul unei ferestre sau de forma drop-down. Ferestrele inserate permit accesarea elementelor continute cu ajutorul unor bare de derulare.
În interiorul elementului SELECT sînt permise doar doua elemente: text simplu si cel putin un element OPTION. Elementul OPTION este utilizat pentru definirea fiecarui element al meniului. OPTION are un singur parametru: SELECTED. Utilizarea lui înseamna ca elementul respectiv este selectat implicit.
Atunci cînd un formular este transmis spre a fi prelucrat (submit), numele (NAME) listei va fi trimis serverului împreuna cu elementul selectat din lista.
Elementele unui meniu pot fi grupate logic în grupuri cu ajutorul elementului OPTGROUP. Aceasta posibilitate este utila cînd trebuie ales dintr-o lista foarte lunga: optiunile ce au legatura între ele dpdv logic se pot grupa si utiliza împreuna mai usor decît daca sînt toate într-o singura lista (la fel ca submeniurile unui meniu). În HTML 4.0 grupurile nu pot fi, însa, îmbricate.
Optiuni preselectate
Dintre optiunile unei liste pot fi preselectate zero sau mai multe. Determinarea elementelor preselectate se face dupa cum urmeaza:
Daca nici un element OPTION nu are atributul SELECTED setat, atunci nu vor fi elemente preselectate.
Daca un element OPTION are atributul SELECTED setat, atunci acesta va fi preselectat.
Daca elementul SELECT are atributul MULTIPLE si mai mult de un element OPTION are atributul SELECTED setat, atunci toate acestea vor fi preselectate
Se considera eroare daca mai mult de un element OPTION are atributul SELECTED setat si elementul SELECT nu are atributul MULTIPLE. Fiecare browser va actiona diferit, dar nu trebuie sa fie preselectat mai mult de o singura optiune
La afisarea unui menu, se foloseste valoarea atributului LABEL de la fiecare element OPTION pentru afisarea acelei optiuni. Daca nu este specificata se foloseste continutul elementului OPTION. În cazul unui grup de optiuni, atributul LABEL specifica eticheta acelui grup de optiuni.
Exemplu:
Se creaza un meniu ce permite selectarea unor componente software care sa se instaleze. Prima si a doua componenta sînt preselectate si pot fi deselectate, celelalte nefiind preselectate. Atributul SIZE indica faptul ca meniul are doar 4 rînduri, chiar daca sînt 7 optiuni. Ce nu se vede se acceseaza dupa ce se face scroll. Dupa definirea meniului apar butoanele Submit si Reset.
<FORM action="https://somesite.com/prog/component-select" method="post">
<P>
<SELECT multiple size="4" name="component-select">
<OPTION selected value="Component_1_a">Component_1</OPTION>
<OPTION selected value="Component_1_b">Component_2</OPTION>
<OPTION>Component_3</OPTION>
<OPTION>Component_4</OPTION>
<OPTION>Component_5</OPTION>
<OPTION>Component_6</OPTION>
<OPTION>Component_7</OPTION>
</SELECT>
<INPUT type="submit" value="Send"><INPUT type="reset">
</P>
</FORM>
Exemplu:
În acest exemplu se utilizeaza OPTGROUP pentru a grupa optiunile meniului:
<FORM action="https://somesite.com/prog/someprog" method="post">
<P>
<SELECT name="ComOS">
<OPTGROUP label="PortMaster 3">
<OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
<OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7
<OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
<OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7
<OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5
</OPTGROUP>
<OPTGROUP label="IRX">
<OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R
<OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R
</OPTGROUP>
</SELECT>
</FORM>
Grupurile (logice) de optiuni sînt, în acest caz:
PortMaster 3
3.7.1
3.7
3.5
PortMaster 2
3.7
3.5
IRX
3.7R
3.5R
 |
Sintaxa:
<SELECT> ... </SELECT>
Atribute posibile:
NAME=CDATA (numele care se va asocia elementului)
MULTIPLE (permite selectii multiple)
SIZE=Number (numarul de optiuni vizibile)
DISABLED (element inactiv/dezactivat)
TABINDEX=Number (pozitia în ordinea de parcurgere cu TAB)
ONFOCUS=Script (elementul a primit focusul)
ONBLUR=Script (elementul a pierdut focusul)
ONCHANGE=Script (valoarea elementului a fost modificata)
atribute comune
Contine:
Unul sau mai multe elemente OPTGROUP sau OPTION
Continut în:
elemente de tip block-level, elemente inline, cu exceptia lui BUTTON
Descriere:
Acest element defineste un control pentru selectia dintr-o lista de optiuni. El este utilizat de obicei în cadrul lui FORM, dar HTML 4.0 permite si folosirea lui în orice element block-level sau inline (cu exceptia lui BUTTON). De remarcat, totusi ca Netscape Navigator NU va afisa nici un element SELECT în afara unui formular definit cu FORM.
Elementul SELECT contine unul sau mai multe elemente OPTGROUP sau OPTION pentru a oferi un meniu de posibilitati de alegere pentru utilizator. Fiecare optiune este continuta într-un element OPTION, iar acestea pot fi grupate logic cu OPTGROUP. Valoarea atributului NAME va fi trimisa serverului ca identificator al controlului (împreuna cu optiunea selectata).
Elementul SELECT are un parametru optional, SIZE. Daca acest parametru lipseste, valoarea lui implicita este l, lista va fi de tip drop-down si din lista poate fi selectat doar un singur element. Utilizarea este pentru situatii similare celor rezolvate de butoanele radio. Daca parametrul este mai mare decît 1, lista este prezentata într-o fereastra inserata, valoarea lui SIZE indicînd cîte elemente pot fi vazute simultan. Daca lista este mai lunga, celelalte elemente pot fi vazute cu ajutorul barei de derulare (scroll) care apare în dreapta listei.
Un alt parametru optional pentru <SELECT> este MULTIPLE. Parametrul nu are o valoare numerica asociata, iar prezenta lui asigura doar posibilitatea selectiei mai multor elemente ale listei simultan (cu ajutorul tastei CTRL) care vor fi trimise la Submit, ca în exemplul urmator.
<P>Selectati una sau mai multe sectiuni în care doriti sa cautati:
<SELECT NAME=sections MULTIPLE>
<OPTION>Web
Authoring Reference</OPTION>
<OPTION>FAQ Archives</OPTION>
<OPTION>Design Elements</OPTION>
<OPTION>Tools</OPTION>
<OPTION>Feature Article</OPTION>
</SELECT>
Atributele DISABLED si TABINDEX, precum si cele legate de actiunile de scriptare pe anumite evenimente sînt similare cu cele de la INPUT.
Exemplu:
Exemplul urmator creaza un meniu de 5 optiuni (5 elemente OPTION), afisat într-o fereastra în care sînt vizibile simultan 3 optiuni (SIZE prima fiind selectata implicit (OPTION SELECTED>Rosu), cu posibilitatea de a selecta mai multe optiuni (MULTIPLE).
<FORM>
Selectati culorile favorite din urmatoare lista:
<SELECT NAME="culori" SIZE=3 MULTIPLE>
<OPTION SELECTED>Rosu
<OPTION>Verde
<OPTION>Albastru
<OPTION>Turcoaz
<OPTION>Magenta
</SELECT>
</FORM>
Sintaxa:
<OPTGROUP> ... </OPTGROUP>
Atribute posibile:
LABEL=Text (eticheta grupului de optiuni)
DISABLED (grupul de optiuni este dezactivat)
atribute comune
Contine:
Unul sau mai multe elemente OPTION
Continut în:
elementul SELECT
Descriere:
Acest element defineste un grup de optiuni într-un meniu definit cu SELECT si trebuie sa contina cel putin un element OPTION. Atributul LABEL este obligatoriu, identifica grupul de optiuni, fiind afisat de browser si pentru utilizator. El trebuie sa descrie grupul de optiuni grupate dpdv logic împreuna cu atributele LABEL ale fiecarei optiuni în parte.
OPTGROUP nu este foarte bine suportat de toate browserele, dar cele care nu îl recunosc nu creaza nici o problema. Cele care îl suporta permit o afisare mai compacta prin intermediul meniurilor cascadate (submeniuri). Cascadarea este însa în HTML 4.0 doar pe un singur nivel (nu sînt permise OPTGROUP în OPTGROUP)!
Atributul DISABLED face întregul grup de optiuni inactive (le dezactiveaza), acestea neputînd fi selectate si nici trimise la server odata cu formularul.
Exemplu:
Exemplul urmator se poate folosi pentru a cere utilizatorului informatii despre browser-ul pe care îl utilizeaza mai frecvent. Se utilizeaza OPTGROUP pentru a grupa informatiile legate de acelasi tip de browser (Netscape Navigator, Microsoft Internet Explorer, Opera sau altul).
<P>Ce browser Web folositi în mod curent?
<SELECT NAME=browser>
<OPTGROUP LABEL="Netscape Navigator">
<OPTION LABEL="4.x">Netscape Navigator 4.x or higher</OPTION>
<OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION>
<OPTION LABEL="2.x">Netscape Navigator 2.x</OPTION>
<OPTION LABEL="1.x">Netscape Navigator 1.x</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Microsoft Internet Explorer">
<OPTION LABEL="4.x">Microsoft Internet Explorer 4.x </OPTION>
<OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION>
<OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION>
<OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Opera">
<OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION>
<OPTION LABEL="2.x">Opera 2.x</OPTION>
</OPTGROUP>
<OPTION>Other</OPTION>
</SELECT>
</P>
Sintaxa:
<OPTION > ... </OPTION >
Atribute posibile:
VALUE=CDATA (valoarea optiunii)
SELECTED (optiune initial selectata)
DISABLED (dezactivata/inactiva)
LABEL=Text (eticheta optiunii)
atribute comune
Contine:
Text (inclusiv entitati)
Continut în:
elementul SELECT sau OPTGROUP
Descriere:
Acest element defineste o optiune (un elemnt de meniu) într-un meniu (lista de optiuni). Valoarea acestei optiuni este cea care va fi trimisa la Submit si este specificata cu atributul VALUE. Daca lipseste, se considera valoare a acestui element continutul lui OPTION.
Atributul boolean SELECTED defineste o optiune ce este initial selectata - preselectata (a se vedea paragraful anterior relativ la elemente preselectate). Exista posibilitatea de a stabili ca optiune preselectata o valoare fara semnificatie (dummy) pentru a fi siguri ca utilizatorul selecteaza o optiune si nu trece doar peste meniu. De exemplu, starea civila se poate cere astfel:
<SELECT NAME="marital_status">
<OPTION SELECTED VALUE="">Select...</OPTION>
<OPTION>Single</OPTION>
<OPTION>Married</OPTION>
<OPTION>Separated</OPTION>
<OPTION>Divorced</OPTION>
<OPTION>Widowed</OPTION>
</SELECT>
Atributul DISABLED, desi nu este suportat global, determina transformarea unei optiuni în optiune inactiva (nu poate fi selectata, nu este trimisa odata cu formularul).
Atributul LABEL specifica eticheta unei optiuni, care altfel (implicit) este continutul elementului. Se recomanda folosirea ei pentru ca permite utilizarea mult mai usoara a gruparii cu OPTGROUP, fara a sacrifica compatibilitatea cu browser-ele care nu suporta acest element.
Exemplu:
<P>Which Web browser do you use most often?
<SELECT NAME=browser>
<OPTGROUP LABEL="Netscape Navigator">
<OPTION LABEL="4.x or higher">Netscape Navigator 4.x</OPTION>
<OPTION LABEL="3.x">Netscape Navigator 3.x</OPTION>
<OPTION LABEL="2.x">Netscape Navigator 2.x</OPTION>
<OPTION LABEL="1.x">Netscape Navigator 1.x</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Microsoft Internet Explorer">
<OPTION LABEL="4.x or higher">Microsoft Internet Explorer 4.x</OPTION>
<OPTION LABEL="3.x">Microsoft Internet Explorer 3.x</OPTION>
<OPTION LABEL="2.x">Microsoft Internet Explorer 2.x</OPTION>
<OPTION LABEL="1.x">Microsoft Internet Explorer 1.x</OPTION>
</OPTGROUP>
<OPTGROUP LABEL="Opera">
<OPTION LABEL="3.x or higher">Opera 3.x or higher</OPTION>
<OPTION LABEL="2.x">Opera 2.x</OPTION>
</OPTGROUP>
<OPTION>Other</OPTION>
</SELECT>
</P>
Atributul LABEL al elementelor OPTGROUP si OPTION's LABEL au fost introduse împreuna, astfel ca un browser sau le suporta pe amîndoua sau pe niciunul. Cele care le suporta vor afisa acest exemplu folosind atributul LABEL al lui OPTION pentru a oferi ca element de selectie doar numarul de versiune, împreuna cu atributul LABEL al lui OPTGROUP care da numele complet al aplicatiei (browserului), obtinîndu-se o afisare mai compacta. Celelalte, care nu suporta atributul OPTGROUP, le vor ignora (împreuna cu atributele lor, aici LABEL), afisînd numele complet si versiunea la fiecare optiune.
|
