Гость
Обновленые темы Популярные темы Активные пользователи
BB-CODE для Мини-чата! rip Бармен 1 20.01.2020 в 23:57 от Бармен X-Ray Multiplayer Extension 3 19.01.2020 в 12:37 от Бармен Битая ссылка 8 19.01.2020 в 11:03 от Admin «Thorny Way» - Тернистый путь 1 18.01.2020 в 20:13 от Бармен История Кота (Cat Story) 1 18.01.2020 в 20:07 от Бармен The Land of the Emerald Dawn 0 17.01.2020 в 14:54 от Admin Поле со списком 2 16.01.2020 в 22:22 от Admin Прохождение мода Возвращение (ЗП) 1 05.01.2020 в 09:50 от Admin Гид по прохождению Сезон катастроф: Агрессия 1 05.01.2020 в 09:44 от Admin ГИД Прохождение остальных квестов ОП - 2 22 05.01.2020 в 09:38 от Admin
Admin 3816

  • Страница 1 из 1
  • 1
Форум — Synthira.Ru » Web-Раздел » Помощь новичкам » Поле со списком
Поле со списком
Admin (Не в сети)
Администраторы
Сообщений: 3816
 Автор темы | Пятница, 10.01.2020, 17:03 | Сообщение # 1
Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности и универсальности, список может занимать одну или несколько строк, в нём можно выбирать одно или несколько значений. Поле со списком создается следующим образом.
Код
<select атрибуты>
  <option атрибуты>Пункт 1</option>
  <option атрибуты>Пункт 2</option>
</select>

Тег <select> выступает контейнером для пунктов списка и определяет его вид, будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка, ширина списка при этом определяется автоматически исходя из длины текста внутри <option>. Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавиши Ctrl и Shift и раскрывающийся список.




Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

В примере 1 показано создание списка множественного выбора.

Код
<form>
   <p><select name="select" size="3" multiple>
    <option selected value="s1">Чебурашка</option>
    <option value="s2">Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s4">Крыса Лариса</option>
   </select>
   <input type="submit" value="Отправить"></p>
  </form>


name
Определяет уникальное имя элемента <select>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.

size
Устанавливает высоту списка. Если значение size равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple. Если он присутствует, то размер списка равен числу элементов. Когда multiple нет, то значение атрибута size равно 1.

Атрибуты тега <OPTION>
Тег <option> также имеет атрибуты, влияющие на вид списка, они представлены далее.

selected
Делает текущий пункт списка выделенным. Если у тега <select> добавлен атрибут multiple, то можно выделять более одного пункта.

value
Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name тега <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.

label
Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри тега <option> игнорируется и в списке выводится значение label. Браузер Firefox не поддерживает этот атрибут.

Пример 2. Использование списка

Код
<form>
   <p><strong>Выбери персонажа</strong></p>
   <p><select name="hero">
    <option value="s1">Чебурашка</option>
    <option value="s2" selected>Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s3" label="Лариса">Крыса Лариса</option>
   </select>
   <input type="submit" value="Отправить"></p>
  </form>



Выбери персонажа





Группирование элементов списка
При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег <optgroup>. Он представляет собой контейнер, внутри которого располагаются теги <option> объединённые в одну группу. Особенностью тега <optgroup> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label, как показано в примере 3.
Код
<form>
   <p><select name="food">
    <optgroup label="Русская кухня">
     <option value="r1">Закуска Барская</option>
     <option value="r2">Раки, фаршированные по-царски</option>
     <option value="r3">Биточки в горшочке</option>
    </optgroup>
    <optgroup label="Украинская кухня">
     <option value="u1">Галушки славянские</option>
     <option value="u2">Пампушки украинские</option>
     <option value="u3">Жаркое по-харьковски</option>
    </optgroup>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

BALCETUL (Не в сети)
Пользователи
Сообщений: 1
 Вторник, 14.01.2020, 21:19 | Сообщение # 2
391
У вас здесь, даже такое есть)

Не думал даже :o :) :) :)

Похоже чаще в этих разделах буду :?
Admin (Не в сети)
Администраторы
Сообщений: 3816
 Автор темы | Четверг, 16.01.2020, 22:22 | Сообщение # 3
BALCETUL, конечно, много полезного в скриптах)
Форум — Synthira.Ru » Web-Раздел » Помощь новичкам » Поле со списком
  • Страница 1 из 1
  • 1
Поиск: