64. Раскрывающийся список на HTML - тег SELECT

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

Что такое раскрывающийся список?

Благодаря тегу <select> появилась возможность создания раскрывающего списка и списка с множественным выбором. Если вы собираетесь отправлять данные на сервер, то тег <select> должен быть помещен в форму (тег <form> ). Далее пример:

<form method = "POST">
    <select size = "3" multiple name = "name[]">
        <option disabled>Какие курсы вы проходите?</option>
        <option selected value = "Никакие">Никакие</option>
        <option value = "HTML">HTML</option>
        <option value = "CSS">CSS</option>
        <option value = "JavaScript">JavaScript</option>
    </select>
    <input type = "submit" value = "Ответить">
</form> 

Атрибуты тега <select>

Тег <select> имеет три полезных атрибута (остальные рассматривать не будем, про них уже говорил). Первый атрибут multiple, благодаря нему можно сделать возможность выбора нескольких элементов списка. Чтобы выбирать несколько элементов, нужно зажать shift или ctr и наживать мышкой на нужные элементы. Далее пример применения атрибута multiple:

<form method = "POST">
    <select size = "3" multiple name = "name[]">
        <option disabled>Какие курсы вы проходите?</option>
        <option selected value = "Никакие">Никакие</option>
        <option value = "HTML">HTML</option>
        <option value = "CSS">CSS</option>
        <option value = "JavaScript">JavaScript</option>
    </select>
    <input type = "submit" value = "Ответить">
</form> 

Атрибут required говорит браузеру об обязательном выборе элемента из списка перед отправкой формы, иначе форма не будет отправлена (выведет соответствующее сообщение). Вид сообщения об ошибке зависит полностью от браузера и пользователь не может его изменить. Далее пример применения атрибута required:

<form method = "POST">
    <select required size = "1" name = "name[]">
        <option disabled>Да или нет?</option>
        <option value = "Да">Да</option>
        <option value = "Нет">Нет</option>
    </select>
    <input type = "submit" value = "Ответить">
</form> 

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

Атрибут size трансформирует список. Например, если он равен 1, то тег <select> отображается как «выпадающий список», а если атрибут size больше 1, то раскрывающийся список отображается как «список с прокруткой». Далее два примера применения атрибута size:

<form method = "POST">
    <select required size = "1" name = "name[]">
        <option disabled>Да или нет?</option>
        <option value = "Да">Да</option>
        <option value = "Нет">Нет</option>
    </select>
    <input type = "submit" value = "Ответить">
</form> 

<form method = "POST">
    <select required size = "3" name = "name[]">
        <option disabled>Да или нет?</option>
        <option value = "Да">Да</option>
        <option value = "Нет">Нет</option>
    </select>
    <input type = "submit" value = "Ответить">
</form> 

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

Похожие уроки Codebra

1. Сделайте так, чтобы отображалось только 3 элемента списка, а чтобы увидеть другие, нужно прокрутить список
2. Сделайте так, чтобы браузер не отправлял форму, если список не выбран
3. Добавьте третий элемент списка, он должен содержать значение "нет"

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.