Html form select form: HTML select form Attribute

Leave a Comment / Html / By /

Теги для создания форм. Часть №3. select

<select> — элемент содержащий меню опций <option> или меню групп опций <optgroup>.

Имеет схожие с <input> атрибуты, а также атрибуты multiple и size.

Обычно select располагается внутри тега <form> или связывается с ним атрибутом form. Но его также можно не встраивать в <form>.

<form action="">
    <select name="some_list"></select>
</form>

* * *

<option> — тег, который используется для определения пункта списка внутри тега <select>, но также его можно встретить и в тегах.

Атрибуты:

selected — позволяет пред выбрать элемент.

disabled — работает как всегда. и другие.

<form action="">
    <label for="select">Select item</label>
    <select name="list">
        <option value="item-1">Item #1</option>
        <option value="item-2">Item #2</option>
        <option value="item-3">Item #3</option>
        <option value="item-4">Item #4</option>
    </select>
</form>

Ссылка на CodePen

* * *

<optgroup> — позволяет группировать опции внутри <select>. Имеет атрибуты — name и disabled.

name — задает имя группы.

disabled — исключает возможность выбора элементов из группы.

label — Задает имя группы которое видно пользователю.

<form action="">
    <label for="select2">Select item</label>
    <select name="list">
        <optgroup label="Veggie">
            <option value="item-1" selected>Mushrooms</option>
            <option value="item-2">Carrot</option>
        </optgroup>
        <optgroup label="Meat" disabled>
            <option value="item-3">Pork</option>
            <option value="item-4">Chicken</option>
        </optgroup>
    </select>
</form>

Ссылка на CodePen

* * *

Атрибут multiple тега <select> позволяет выбирать не один, а сразу несколько <option> если зажата клавиша CTRL (для windows или linux) или COMMAND (для macOS)

<form action="">
    <label for="select3">Select item</label>
    <select name="list" multiple>
        <optgroup label="Veggie">
            <option value="item-1" selected>Mushrooms</option>
            <option value="item-2">Carrot</option>
        </optgroup>
        <optgroup label="Meat" disabled>
            <option value="item-3">Pork</option>
            <option value="item-4">Chicken</option>
        </optgroup>
    </select>
</form>

Ссылка на CodePen

* * *

P. S. Больше уроков у меня на канале.

P.P.S. Ссылка на git репозиторий.

Список | HTML | CodeBasics

В различных формах пользователю часто приходится выбирать один из множества вариантов. Это могут быть категории, по которым мы хотим произвести поиск, выбор различных опций для поиска. Наиболее распространённым решением является использование выпадающих списков:

В какой категории искать?

JSPHPJavaRacketHTMLCSS

Для создания такого выпадающего списка используется тег <select> с вложенными внутри него тегами <option>. Всё это похоже на создание обычных списков, где вместо ul/ol используется <select>, а вместо <li> используется <option>.

Часто первый пункт списка используется для заголовка всего выпадающего списка. В таком случае для него используют атрибут

disabled, чтобы заблокировать его для выбора.

<form>
  <select>
    <option disabled>Какой курс вы хотите пройти?</option>
    <option>JS</option>
    <option>PHP</option>
    <option>Java</option>
    <option>Racket</option>
    <option>HTML</option>
    <option>CSS</option>
  </select>
</form>

Какой курс вы хотите пройти?JSPHPJavaRacketHTMLCSS

Список внутри формы также может быть представлен в виде списка, в котором можно выбрать несколько элементов. Делается это с помощью зажатия кнопки ctrl и клика мышки по полям, которые мы хотим выбрать.

В какой категории искать?

JSPHPJavaRacketHTMLCSS

Для того, чтобы создать список с множественным выбором, у тега <select>

добавляется атрибут multiple

<form>
  <select multiple>
    <option>JS</option>
    <option>PHP</option>
    <option>Java</option>
    <option>Racket</option>
    <option>HTML</option>
    <option>CSS</option>
  </select>
</form>

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте выпадающий список из трёх элементов.

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов.

Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

← Предыдущий

Следующий →

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Атрибут формы HTML5 select

❮ Тег HTML5
 


Попробуйте сами »

Определение и использование

Атрибут формы определяет форму, которой принадлежит раскрывающийся список.

Значение этого атрибута должно быть равно атрибуту id <форма> элемент в том же документе.

Поддержка браузера

Атрибут
форма Да Да Да Да Да

Синтаксис

. Значение этого атрибута должно быть равен атрибуту id элемента
в том же документе.

❮ Тег HTML ">

  • javascript
  • php
  • формы

Это не так просто, как получить значение выбранной опции, которое можно получить просто как selectElement.value , но это совсем не сложно.

selectElement.options предоставит вам массив ВСЕХ опций внутри выбранного элемента. Вы обнаружите, что индекс выбранной опции равен selectElement.selectedIndex .

При этом вы можете получить доступ к выбранной опции следующим образом: selectElement.options[selectElement.selectedIndex] .

Наконец, вы можете получить свойство text следующим образом: const theSelect = document.getElementById(‘fruitSelector’) // ЭТА СТРОКА СВЯЗЫВАЕТ входное СОБЫТИЕ С ВЫШЕУКАЗАНЫМ ЭЛЕМЕНТОМ select // ОНА БУДЕТ ВЫПОЛНЯТЬСЯ КАЖДЫЙ РАЗ, КОГДА ПОЛЬЗОВАТЕЛЬ ВЫБИРАЕТ ОПЦИЮ theSelect.addEventListener («ввод», функция () { // ВОТ КАК ВЫ ПОЛУЧАЕТЕ ТЕКСТ ВЫБРАННОГО ВАРИАНТА пусть selectedOptText = theSelect.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *