В этой статье мы покажем, как создавать красивые выпадающие списки без использования изображений, только при помощи CSS. Также мы добавим немного кода jQuery, чтобы заставить их работать.
Обратите внимание на некоторые вещи, прежде чем мы начнем:
В примерах кода пропущены префиксы браузеров для CSS-свойств, но вы, конечно, можете найти их в исходных файлах.
Лично я использую бокс-модель, где = + + . Чтобы её активировать, необходим следующий фрагмент кода:
Первый вопрос: что нам нужно для создания выпадающего меню? В общем, мы будем использовать блок DIV с вложенным тегом span и неупорядоченный список для выпадающего меню:
>
I"m kinda the label!>
>
I"m hidden!>
>
Me too!>
>
So do I.>
>
>
JavaScript
Нам нужнен небольшой JavaScript, чтобы наш выпадающий список работал как нужно. Этот фрагмент JS мы будем использовать для всех примеров:
Так что же это скрипт делает? Во-первых, он переключает класс .active
, когда вы кликаете на враппер. Это означает, что если враппер не имеет класс .active
, то он добавляется, а если этот класс уже присвоен, то он удаляется.
Во-вторых, скрипт создает поведение по умолчанию для раскрывающегося списка, закрывая его, если вы щелкните в любом другом месте на экране.
Что ж, теперь мы понимаем, как это работает, я думаю, пришло время для создания примеров!
Пример 1
Давайте начнем с чего-нибудь простого: простой раскрывающийся список для указания пола. Давайте сначала посмотрим на разметку:
HTML-разметка
Нам нужно несколько вещей: обертка (div с id#dd), (скрытый) раскрывающийся список и "лейбл", который будет обернут тегом span. Мы используем ссылки-якоря, потому что мне кажется так будет семантически правильно, но вы можете также использовать другой тег.
Давайте теперь перейдем к CSS. Начнем с обертки (враппера):
Wrapper-dropdown
{
/* размер и положение */
position
:
relative
;
width
:
200px
;
padding
:
10px
;
margin
:
0
auto
;
/* цвет и фон */
background
:
#9bc7de
;
color
:
#fff
;
outline
:
none
;
cursor
:
pointer
;
/* шрифт */
font-weight
:
bold
;
}
Итак, мы сделали несколько вещей. Сначала мы установили ширину списка и некоторые отступы. Далее, мы задали ему цвет и фон. И, наконец, мы установили параметры для шрифта.
Давайте закончим с "лейблом", добавив небольшую стрелку справа при помощи псевдо-элемента.
Я думаю, мы все знаем, как создать маленький треугольник на CSS при помощи бордера (границы). Это конечно хак, но если он работает очень хорошо, так почему бы и нет? Там нет ничего особенного: маленькая белая стрелка справа.
Итак, у нас есть симпатичная небольшая кнопка, но без раскрывающегося содержания она имеет никакого смысла. Давайте разберемся с нашим списком!
Wrapper-dropdown-1
.dropdown
{
/* Size & position */
position
:
absolute
;
top
:
100%
;
left
:
0
;
/* Size */
right
:
0
;
/* Size */
Мы зададим раскрывающемуся списку абсолютное позиционирование и разместим его позади кнопки (top: 100%;). Зададим ему такую же ширину, как для кнопки. И, наконец, скроем его, уменьшив его прозрачность до 0.
Теперь зададим стили для элементов списка:
Wrapper-dropdown-1
.dropdown
li a {
display
:
block
;
text-decoration
:
none
;
color
:
#9e9e9e
;
padding
:
10px
20px
;
}
/* Hover state */
.wrapper-dropdown-1
.dropdown
li:hover
a {
background
:
#f3f8f8
;
}
С помощью JavaScript мы будем переключать класс .active
, когда мы нажимаем на кнопку, на основе этого класса мы можем изменить наш CSS для отображения раскрывающегося списка.
/* Active state */
.wrapper-dropdown-1
.active
.dropdown
{
opacity:
1
;
pointer-events:
auto
;
}
Теги используются для отображения маленьких иконок из FontAwesome . Я не буду объяснять что такое FontAwesome здесь, потому как об этом уже было не раз сказано в предыдущих статьях. Просто убедитесь, что это работает.
CSS
Давайте начнем с обертки. В значительной степени она такая же, как и обертка в предыдущем примере. Обратите внимание на левую границу в 5px.
Wrapper-dropdown-2
{
/* Size and position */
position
:
relative
;
/* Enable absolute positioning for children and pseudo elements */
width
:
200px
;
margin
:
0
auto
;
padding
:
10px
15px
;
Обратите внимание, что мы будем использовать переход, чтобы сделать раскрывающийся список постепенно появляющимся (анимированным), а не просто открывающимся, как в первом демо.
Некоторые стили для ссылок и иконок:
Wrapper-dropdown-2
.dropdown
li a {
display
:
block
;
text-decoration
:
none
;
color
:
#333
;
border-left
:
5px
solid
;
padding
:
10px
;
transition:
all 0.3s ease-out;
}
.wrapper-dropdown-3
.dropdown
li:hover
a {
background
:
#f3f8f8
;
}
Все выглядит замечательно, за исключением маленькой стрелки в верхней правой части раскрывающегося списка. Эта стрелка важна: без неё, выпадающий список выглядит как будто он плавает без какой-либо связи с кнопкой.
Мы использовали два псевдо-элемента для этой стрелки, так как мы хотим создать границу вокруг неё.
Теперь стили для раскрытого состояния. Все одно и то же. Тем не менее, обратите внимание, что мы установили переход к .dropdown
немного дольше, чем обычно (0,5 вместо 0,3 с). Таким образом, открытие меню будет очень гладким.
Чтобы закончить этот демо-пример, мы должны добавить немного JavaScript, чтобы заменить значение выбранной кнопки по умолчанию. Мы видели, как это делается в первом примере, но, поскольку мы не оставляем слово "Транспорт" здесь, то JS немного отличается.
Выглядит по-другому, не так ли? Здесь мы создадим список обязательных дел, которые можно отметить и тем самым вычеркнуть. В общем ничего особенного, но этот пример значительно отличается от предыдущих демонстраций.
HTML-разметка
id
="dd"
class
="wrapper-dropdown-4"
>
Сделать
class
="dropdown"
>
>
type
="checkbox"
id
="el-1"
name
="el-1"
value
="donut"
>
>
>
>
type
="checkbox"
id
="el-2"
name
="el-2"
value
="neighbour"
>
>
>
>
type
="checkbox"
id
="el-3"
name
="el-3"
value
="T-rex"
>
>
>
>
>
Здесь нибудет ни ссылок, ни значков. Для каждого элемента, у нас есть две тега: чекбокс с лейблом.
CSS
.wrapper-dropdown-4
{
/* Size and position */
position
:
relative
;
width
:
270px
;
margin
:
0
auto
;
padding
:
10px
10px
10px
30px
;
.wrapper-dropdown-4
.dropdown
li input:
checked ~ label {
color
:
grey;
text-decoration
:
line-through
;
}
Чекбоксы имеют абсолютное позиционирование и размещены справа по середине на каждой линии, но так как они связаны с лейблами, то вы можете нажать в любом месте пункта, чтобы отметить их.
Когда флажок установлен, текст становится серым и перечеркнутым. Просто, но эффективно.
У нас есть еще две тонкие красные линии слева в нашей маленькой записной книжке. Есть два способа сделать это: один с псевдо-элементами и один с градиентами. Давайте посмотрим на оба варианта.
Так какой из этих способов лучше? Вероятно, первый, потому что, если вы хотите изменить эффект при наведении на элементы списка, вы должны изменить градиент, что довольно непросто. Кроме того, псевдо-элементы лучше поддерживаются браузерами (начиная с IE8), в отличии от градиентов (не поддерживаются до IE10).
Теперь стили для раскрытого состояния. Ничего нового здесь нет.
function
DropDown( el)
{
this
.dd
=
el;
this
.opts
=
this
.dd
.find
("ul.dropdown > li"
)
;
this
.val
=
[
]
;
this
.index
=
[
]
;
this
.initEvents
()
;
}
DropDown.prototype
=
{
initEvents :
function
()
{
var
obj =
this
;
Наш последний пример будет похож на выпадающее меню в некоторых админ-панелях. Для этого мы будем использовать анимацию, когда мы переключаем его. Вместо появления/исчезновения, он будет скользить вверх и вниз.
HTML-разметка
id
="dd"
class
="wrapper-dropdown-5"
tabindex
="1"
>
Иван Иванов
На этот раз мы не изменяли непрозрачность до 0, чтобы скрыть меню. Мы установили max-height равную 0 и overflow: hidden. Почему установили max-height, а не height? Потому что мы не знаем точную высоту раскрытого списка.
Простые стили для элементов списка.
.wrapper-dropdown-5
.dropdown
li {
padding
:
0
10px
;
}
.wrapper-dropdown-5
.dropdown
li a {
display
:
block
;
text-decoration
:
none
;
color
:
#333
;
padding
:
10px
0
;
transition:
all 0.3s ease-out;
border-bottom
:
1px
solid
#e6e8ea
;
}
.wrapper-dropdown-5
.dropdown
li:last-of-type
a {
border
:
none
;
}
.wrapper-dropdown-5
.dropdown
li i {
margin-right
:
5px
;
color
:
inherit
;
vertical-align
:
middle
;
}
/* Hover state */
.wrapper-dropdown-5
.dropdown
li:hover
a {
color
:
#57a9d9
;
}
Когда выпадающий список открыт, мы меняем нижние углы кнопки, ее цвет, направление стрелки и цвет стрелки и удаляем её тень и границы. И, чтобы показать меню, мы устанавливаем max-height выпадающего списка равную 400 пикселей. Мы могли бы установить её равную 500px или 1000px, это не имеет значения.
JavaScript
function
DropDown( el)
{
this
.dd
=
el;
this
.initEvents
()
;
}
DropDown.prototype
=
{
initEvents :
function
()
{
var
obj =
this
;
Итак, теперь у нас есть 5 раскрывающихся списков, которые замечательно работают, но как насчет старых браузеров? Эти браузеры не понимают, например, свойство opacity.
В этом нам поможет библиотека Modernizr . Грубо говоря, для тех, кто не знает, Modernizr это библиотека JavaScript, которая обнаруживает поддерживаемые HTML5 и CSS3 свойства в браузер пользователя.
Благодаря этому, мы можем "указать" браузеру, если вы не поддерживаете *это* свойство, то делайте следующее. Ниже приведен пример того, как мы можем управлять стилями для браузеров, которые не поддерживают определенные свойства CSS:
/* Нет поддержки CSS3 */
.no-opacity
.wrapper-dropdown-1
.dropdown,
.no-pointerevents
.wrapper-dropdown-1
.dropdown
{
display
:
none
;
opacity:
1
;
/* If opacity support but no pointer-events support */
pointer-events:
auto
;
/* If pointer-events support but no pointer-events support */
}
Если браузер не поддерживает opacity или pointer-events, то используется свойство display: block;. Ну и так далее.
Заключение.
Я надеюсь, что эта статья помогла вам понять, как создавать пользовательские раскрывающиеся меню. Как вы можете видеть, это довольно просто.
Демонстрация
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
Выпадающий список в HTML можно сделать при помощи тега select
. Помимо выпадающего (или "раскрывающегося") списка, тег select
позволяет создавать элемент-список с множественным выбором. Синтаксис использования тега select
HTML выглядит следующим образом:
Здесь с помощью тега option
задаются элементы списка.
Результат применения:
Электроник
Сыроежкин
Чижиков
Кукушкина
Атрибуты тега SELECT
Рассмотрим атрибуты тега select
:
name
size
- число отображаемых строк в списке (число);
multiple
- включает функцию множественного выбора элементов выпадающего списка;
disabled
- блокирует доступ к элементу;
form
- позволяет связать выпадающий список с формой (может понадобиться, если сам список находится вне формы, к которой должен быть привязан). В качестве аргумента передается id формы.
Пожалуй, это все основные атрибуты тега select
, которые чаще всего используются. Посмотрим теперь, как сделать выпадающий список в HTML с использованием указанных атрибутов:
Выпадающий список с помощью HTML - Нубекс
Атрибуты тега OPTION
Тег option
, как уже отмечалось, позволяет определить дочерние элементы выпадающего списка select
, который, в свою очередь, играет роль контейнера. Тег option
имеет собственные атрибуты:
disabled
- устанавливает запрет на выбор данного элемента списка;
label
- позволяет установить метку для текущего элемента списка (вместо текста, указанного в теге, выводится значение метки, что позволяет выводить сокращенное значение); Внимание: атрибут не поддерживается в браузере Firefox
selected
- текущий пункт списка будет выбран по умолчанию;
value
- значение, которое будет передано на сервер;
Посмотрим на расширенный вариант использования тега option
:
Выглядеть результат приведенного примера будет следующим образом:
Господин Электроник
Сыроежкин
Чижиков
Кукушкина
В конструкторе сайтов "Нубекс" есть возможность создавать произвольные формы с помощью модуля конструктора форм. Работа выпадающих списков в "Нубекс" описана в статье:
Здравствуйте, уважаемые читатели блога сайт. В рамках изучения премудростей в качестве очередной задачи продолжим разбирать подробности создания форм на сайте с помощью соответствующих .
Сегодня мы разберем, как создавать выпадающие (раскрывающиеся) списки
, в том числе со множественным выбором, при помощи select и option, каким образом сконструировать текстовое поле
посредством textarea, а также поговорим о возможности расширения функциональности форм путем применения тегов fieldset, label и legend
.
Напомню, что любая форма, присутствующая на странице, создается при помощи и предназначена для ввода какой-либо информации от пользователя и отправки ее на сервер (пример — ).
К сожалению, средства языка гипертекстовой разметки не позволяют напрямую обрабатывать эту информацию, поэтому с помощью HTML мы создаем лишь внешний вид формы, а необходимые данные отправляются для обработки. С этой целью на вебсервере целенаправленно создается специальный файл, написанный на одном из серверных языков (чаще всего, PHP). Скажем, для обратной связи можно сотворить файлик mail.php, который и будет являться обработчиком.
При практическом использовании полученной в этой публикации информации не забудьте о том, как должна выглядеть , где коды всех видимых элементов страницы, включая формы, всегда находятся в пределах тега body.
Эта информация крайне необходима, поскольку даже в случае использовании всех современных встроенных в инструментов разработчиков (напомню, первой ласточкой в реализации этого функционала был ), вы должны четко представлять себе механизм использования основных тегов, тогда редактирование кода HTML, необходимость которого возникает время от времени, превратится в приятное занятие.
2. Multiple
— этот атрибут, не имеющий параметров, дает возможность множественного выбора в отличие от выше приведенного примера, где можно выбрать только один элемент (строчку). Попробуйте выделить в данном списке мышкой сразу несколько строк (по одной в любых местах, удерживая клавишу Ctrl, либо посредством Shift следующих подряд одна за одной):
3. Size
— устанавливает высоту выпадающего списка, то есть количество отображаемых строк. Если присутствует атрибут multiple, а значение size не указано (как в примере выше), то по умолчанию отображается четыре строки
, а, например, при size="5" будут видны уже пять:
Option Textarea Label Fieldset Legend
4. Required
(параметров не имеет) — определяет, что обязательно нужно сделать выбор перед отправкой данных обработчику. Если элемент из списка не выбран, то данные формы отправлены не будут:
Option Textarea Label Fieldset Legend
5. Autofocus
(значений не имеет) — устанавливает фокус на список сразу после загрузки страницы. Кроме того, если пользователь привык основную часть действий производить клавишами, то как раз такое предварительно настроенное фокусирование поможет делать выбор из списка посредством стрелок на клавиатуре без всякого использования мышки:
6. Disabled
(параметров нет) — блокирует доступ к списку (отключает его). На практике обычно используется вместе со скриптами в тех случаях, когда нужно включать раскрывающийся список только при выполнении определенных условий:
7. Form
— осуществляет связь списка с одной или несколькими формами, к которым он принадлежит, но находится вне контейнера
. При этом в роли значения атрибута form прописывается параметр глобального атрибута id
, который добавлен к тегу form:
Выберите из списка Option Textarea Label Fieldset Legend
Не путайте атрибут тега select и основной тэг для создания формы. В примере выше к тегу form добавлен атрибут id="data", а к select — form="data", что и позволило связать выпадающий список с конкретной формой.
Атрибуты тега option
1. Value
— определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику формы). Собственно, обработчику отправляется имя, которое задается атрибутом name тега select, и значение value
(для данного примера — 1, 2, 3, 4, 5), соответствующее выбранной строке выпадающего списка:
Option Textarea Label Fieldset Legend
2. Disabled
— блокирует для выбора элемент выпадающего списка.
Option Textarea Label Fieldset Legend
Как видно из примера, строчка «Option» неактивна и выбрать ее невозможно.
3. Label
— отображает текстовое содержание (являющееся его значением) того или иного элемента списка. Если label присутствует, то выводится строчка, тождественная значению этого атрибута и игнорируется текстовое содержание, находящееся внутри тега option. То же самое происходит, ежели содержимое между вовсе отсутствует.
Тег Textarea Тег Label Тег Fieldset Тег Legend
Смотрите. В выше предоставленном примере первая строка для option в коде пустая (в левой части таблицы), но прописан параметр label="Тег Option", в результате именно этот текст появился в списке (в правой части). Вторая строка кода в качестве содержимого тега option содержит текст «Тег Textarea», но в раскрывающемся списке справа отображается слово «Textarea», совпадающее со значением label="Textarea".
4. Selected
— выделяет текущий пункт выпадающего списка:
Option Textarea Label Fieldset Legend
Если присутствует атрибут multiple, то есть возможность выделения более одного элемента:
Option Textarea Label Fieldset Legend
Атрибуты тега optgroup
Если выпадающий список необходимо как-то упорядочить, например, разделить по группам, то для каждой из этих групп используют контейнер, состоящий из открывающего и закрывающего тегов optgroup, внутри которого содержится часть пунктов выпадающего списка. При этом существуют два атрибута для настройки подобного раскрывающегося списка.
1. Label
— устанавливает название каждой группы в качестве параметра:
Option Textarea Label Fieldset Legend
То же самое, но с multiple и size="7" тега select:
Option Textarea Label Fieldset Legend
2. Disabled
(нет значений) — блокирует выбор элементов той группы, по отношению к которой он установлен, причем, неактивные пункты обычно выделены серым цветом:
Option Textarea Label Fieldset Legend
Небольшой видеоролик будет здесь как нельзя кстати:
Текстовое поле в форме посредством textarea
Еще один элемент формы для сайта, который мы рассмотрим — поле с возможностью ввода в него многострочного текста. Его можно создать с помощью тега textarea. Без атрибутов по умолчанию применение этого тега даст такой результат:
Введите текст:
В поле можно осуществлять переносы строк, при этом текст будет передаваться обработчику на сервер с учетом сделанных переносов. Поле можно растягивать по ширине и длине, захватив мышкой нижний правый угол, который отмечен двумя диагональными полосками.
Попробуем теперь добавить к первоначальному коду несколько атрибутов с параметрами:
1. Name
— определяет имя текстовой области в качестве значения для ее идентификации после отправки данных формы при их обработке на сервере.
2. Cols
— ширина поля, которая в роли параметра задается числом стоящих рядом одинаковых символов, размещенных по горизонтали. Значение по умолчанию — 20
.
3. Rows
— высота текстового поля, определяемое количеством строк. Если число строк текста, вводимого пользователем, окажется больше значения, заданного этим атрибутом, то справа появится вертикальная полоса прокрутки.
4. Maxlength
— указывает максимальное количество знаков, которые можно поместить в текстовое поле. При превышении лимита дальнейший ввод будет невозможен.
Ниже представлен пример со всеми выше перечисленными атрибутами, действие каждого из которых вы можете проверить самолично, просто поместив в область текста нужное количество букв и строк (можете просто ввести один и тот же символ несколько раз):
Введите текст:
5. Minlength
— указывает минимальное число знаков, которые необходимо ввести в текстовую область. Ежели пользователь попытается отправить текст с меньшим количеством символов, то браузер выведет краткое сообщение с информацией, в которой будет содержаться упоминание о необходимости дополнить содержание формы и о том, сколько знаков уже введено.
7. Readonly
(без параметров) — ежели к textarea прикрутить данный атрибут, то текстовое поле окажется недоступным для изменения пользователями и будет предназначено только для чтения. Но на него можно навести фокус (подведите курсор к полю и щелкните левой кнопкой мышки), а также выделить и скопировать (частично или полностью) текст:
Еще несколько атрибутов, реализующих дополнительный функционал при заполнении полей:
8. Autoсomplete
— указывает, должен ли браузер выдавать подсказки при заполнении формы пользователем на основании ранее вводимых данных и дает возможность автоматически вставлять подходящий текст.
Имеет всего два параметра
: on
(включен) и off
(выключен). Вот пример кода:
Данный атрибут со значением «on» работает только тогда, когда в веб-обозревателе конкретного пользователя включено автозаполнение полей формы.
9. Wrap
— устанавливает для браузера правила переноса строк в текстовой области с помощью трех значений:
Soft
— набор символов, который не помещается в поле по ширине, автоматически переносится на новую строчку. При этом обработчику текст будет передан в виде одной строки
. В том случае, если пользователь осуществит перенос текста в любом нужном месте с помощью клавиши «Enter», то такой перенос сохраняется при отправке вебформы.
Введите текст:
Hard
— переносы производятся автоматически, если текст не влезает в поле по ширине, причем, при отправке обработчику места таких переносов будут сохранены. Этот параметр используется только в связке с атрибутом cols
:
Введите текст:
Off
— отключение переносов строк. Если напечатать текстовый фрагмент без механического переноса посредством клавиши «Enter», то весь текст будет помещен в одну строку, причем, появится горизонтальная полоса прокрутки:
Введите текст:
10. Autofocus
(не имеет параметров) — инициирует фокусирование на текстовое поле при загрузке страницы с формой.
11. Disabled
— в отличие от атрибута readonly (который также запрещает редактировать содержимое поля, но дает возможность навести на него фокус), полностью блокирует доступ к текстовой области, которая окрашивается обычно в серый цвет:
Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности и универсальности, список может занимать одну или несколько строк, в нём можно выбирать одно или несколько значений. Поле со списком создается следующим образом.
Тег
Атрибуты тега
Рассмотрим атрибуты тега
, с помощью которых можно изменять представление списка.
multiple
Наличие multiple
сообщает браузеру отображать содержимое элемента
как список множественного выбора. Конечный вид списка зависит от используемого атрибута size
. Если он отсутствует, то высота списка равна количеству пунктов, если значение size
меньше числа пунктов, то появляется вертикальная полоса прокрутки.
Для выбора нескольких значений списка применяются клавиши Ctrl
и Shift
совместно с курсором мыши.
В примере 1 показано создание списка множественного выбора.
Пример 1. Список множественного выбора
HTML5
IE
Cr
Op
Sa
Fx
Список
name
Определяет уникальное имя элемента
. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.
size
Устанавливает высоту списка. Если значение size
равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple
. Если он присутствует, то размер списка равен числу элементов. Когда multiple
нет, то значение атрибута size
равно 1.
Атрибуты тега
Тег
selected
Делает текущий пункт списка выделенным. Если у тега
добавлен атрибут multiple
, то можно выделять более одного пункта.
value
Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name
тега
, а значение - атрибутом value
выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.
label
Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри
Создание списка показано в примере 2.
Пример 2. Использование списка
HTML5
IE
Cr
Op
Sa
Fx
Список
Группирование элементов списка
При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег
Пример 3. Группирование элементов списка
HTML5
IE
Cr
Op
Sa
Fx
Список
Результат примера показан на рис. 1.
Рис. 1. Группированный список
Описание
Тег
позволяет создать элемент интерфейса
в виде раскрывающегося списка, а также список с одним или множественным выбором,
как показано далее. Конечный вид зависит от использования атрибута size
тега
, который устанавливает высоту списка.
Ширина списка определяется самым широким текстом, указанным в теге
Синтаксис
Атрибуты
Позволяет перейти к списку с помощью некоторого сочетания клавиш.
Устанавливает, что список получает фокус после загрузки страницы.
Блокирует доступ и изменение элемента.
Связывает список с формой.
Позволяет одновременно выбирать сразу несколько элементов
списка.
Имя элемента для отправки на сервер или обращения через скрипты.
Список обязателен для выбора перед отправкой формы.
Количество отображаемых строк списка.
Определяет последовательность перехода между элементами при нажатии на клавишу Tab