Список <select>

Нет комментариев.

Выпадающий список <select> используется как элемент интерфейса в виде раскрывающегося списка, для выбора параметра или значения.


<select name="city" id="city-select">

    <option value="">-- Выберите город --</option>

    <option value="petersburg">Санкт-Петербург</option>

    <option value="samara">Самара</option>

    <option value="perm">Пермь</option>

    <option value="novosibirsk">Новосибирск</option>

   </select>

Элемент select является обёрткой для списка опций.

Атрибут name задаёт уникальный идентификатор для элемента при работе с PHP скриптами .

Атрибут id задаёт уникальный идентификатор для элемента при работе с JS скриптами.

Тег option создаёт элемент списка.

Атрибут value передаёт значение скрипту. Если этот атрибут не задан, то его значение будет равно текстовому содержимому тега option.

Другие атрибуты select

Атрибут autocomplete браузер предлагает сохранить, например, выбранный город, чтобы данные подставлялись при следующем входе.

Атрибут disabled блокирует возможность изменение списка.


<select disabled name="city" id="city-select">

    <option value="">-- Выберите город --</option>

    <option value="petersburg">Санкт-Петербург</option>

    <option value="samara">Самара</option>

    <option value="perm">Пермь</option>

    <option value="novosibirsk">Новосибирск</option>

   </select>

Наличие атрибута required означает что должен быть выбран элемент списка value у которого не пустая строка.

Атрибут size указывает на количество видимых пунктов списка.


<select size=3 name="city" id="city-select">

     <option value="petersburg">Санкт-Петербург</option>

    <option value="samara">Самара</option>

    <option value="perm">Пермь</option>

    <option value="novosibirsk">Новосибирск</option>

   </select>

Атрибуты option

Атрибут disabled запрещает выбирать этот пункт.

Атрибут selected выбирает элемент списка по умолчанию.


<select size=3 name="city" id="city-select">

     <option value="petersburg">Санкт-Петербург</option>

    <option selected value="samara">Самара</option>

    <option disabled value="perm">Пермь</option>

    <option value="novosibirsk">Новосибирск</option>

   </select>

Нет комментариев.

Оставить комментарий