|
Страница 4 из 15
OPTGROUP
OPTGROUP - позволяет группировать пункты в элементе SELECT. В этом случае добавляются отступы и названия каждой группы, так что пользователю при выборе необходимого пункта ориентироваться гораздо проще. Название группы задается в атрибуте LABEL элемента OPTGROUP. Вот пример использования группировки:
<form> <br>
<p>Справочники:</p> <br>
<select name="ask">
<optgroup label="HTML"> </optgroup>
<option label="3.2">HTML 3.2</option>
<option label="4.0">HTML 4.0</option>
<optgroup label="CSS"> </optgroup>
<option label="1">CSS-1</option>
<option label="1">CSS-2</option>
<option label="3">CSS-3</option>
<option value="js">JavaScript</option>
<option value="dhtml">DHTML</option>
</select>
</form>
Более того, каждую группу с помощью CSS можно раскрасить в свой цвет! Делается это с использованием свойства Background. Например, первую группу сделаем зеленой, а вторую желтой.
<form> <br> <p>Справочники:</p> <br>
<select name="ask">
<optgroup label="HTML"
style="background: RGB(0, 153, 0) none repeat scroll 0% 50%;
-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;">
</optgroup>
<option label="3.2"
style="background: rgb(0, 153, 0) none repeat scroll 0% 50%;
-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;">HTML 3.2
</option>
<option label="4.0"
style="background: rgb(0, 153, 0) none repeat scroll 0% 50%;
-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;">HTML 4.0
</option>
<optgroup label="CSS"
style="background: rgb(255, 255, 0) none repeat scroll 0% 50%;
-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;">
</optgroup>
<option label="1"
style="background: rgb(255, 255, 0) none repeat scroll 0% 50%;
-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;">CSS-1
</option>
<option label="1"
style="background: rgb(255, 255, 0) none repeat scroll 0% 50%;
-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;">CSS-2
</option>
<option label="3"
style="background: rgb(255, 255, 0) none repeat scroll 0% 50%;
-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;">CSS-3
</option>
<option value="js">JavaScript </option>
<option value="dhtml">DHTML </option>
</select>
</form>
Поддерживается браузерами: MSIE 6, Netscape 6.
|
