Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Тег select

Дата:19.09.15 в 12:33
Справочник: 

Характеристики тега

В каких браузерах работает?

3.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

В каких спецификациях используется?

HTML 3.2 4.01 5.0
XHTML 1.0 1.1

Для чего используется?

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

Как правильно задавать?

<select>
  <option>Пункт 1</option>
</select>

Какие атрибуты поддерживаются?

  • accesskey - активизирует список по указанной комбинации клавиш.
  • autofocus - фокус присваивается элементу в тот момент, когда завершится загрузка веб-страницы.
  • disabled - блокирует элемент и запрещает пользователям вносить в него изменения.
  • form - устанавливает взаимосвязь между формой и списком.
  • multiple - позволяет одновременно отметить несколько пунктов.
  • name - устанавливает имя для списка выбора.
  • required - указывает, что форма не будет отправлена, пока не будет произведен выбор элемента из списка.
  • size - указывает, сколько изначально строк сможет увидеть посетитель.
  • tabindex - устанавливает порядок передачи фокуса элементам списка при нажатии Tab.

Данный тег поддерживает универсальные атрибуты и события.

Закрытый тег

Да.

Пример использования

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег option</title>
 </head>
 <body>
 
  <form action="mail.php">
   <p><select>
   <optgroup label="Металл">
    <option value="c1">Сталь</option>
    <option value="c2">Чугун</option>
    <option value="c3">Алюминий</option>
   </optgroup>
   </select></p>
   <p><input type="submit" value="Отослать"></p>
  </form>
 
 </body>
</html>

Оценка: 
Оценок: 2 (средняя 5 из 5)
Понравилась статья? Расскажите о ней друзьям: