HTML-формы. Создание формы в HTML Текстовое поле в форме посредством textarea

Выпадающий список в HTML можно сделать при помощи тега select . Помимо выпадающего (или "раскрывающегося") списка, тег select позволяет создавать элемент-список с множественным выбором. Синтаксис использования тега select HTML выглядит следующим образом:

Электроник Сыроежкин Чижиков Кукушкина

Здесь с помощью тега option задаются элементы списка.

Результат применения:

Электроник Сыроежкин Чижиков Кукушкина

Атрибуты тега SELECT

Рассмотрим атрибуты тега select :

• name
• size - число отображаемых строк в списке (число);
• multiple - включает функцию множественного выбора элементов выпадающего списка;
• disabled - блокирует доступ к элементу;
• form - позволяет связать выпадающий список с формой (может понадобиться, если сам список находится вне формы, к которой должен быть привязан). В качестве аргумента передается id формы.

Пожалуй, это все основные атрибуты тега select , которые чаще всего используются. Посмотрим теперь, как сделать выпадающий список в HTML с использованием указанных атрибутов:

Атрибуты тега OPTION

Тег option , как уже отмечалось, позволяет определить дочерние элементы выпадающего списка select , который, в свою очередь, играет роль контейнера. Тег option имеет собственные атрибуты:

• disabled - устанавливает запрет на выбор данного элемента списка;
• label - позволяет установить метку для текущего элемента списка (вместо текста, указанного в теге, выводится значение метки, что позволяет выводить сокращенное значение); Внимание: атрибут не поддерживается в браузере Firefox
• selected - текущий пункт списка будет выбран по умолчанию;
• value - значение, которое будет передано на сервер;

Посмотрим на расширенный вариант использования тега option :

Господин Электроник Сыроежкин Чижиков Кукушкина

Выглядеть результат приведенного примера будет следующим образом:

Господин Электроник Сыроежкин Чижиков Кукушкина

В конструкторе сайтов "Нубекс" есть возможность создавать произвольные формы с помощью модуля конструктора форм. Работа выпадающих списков в "Нубекс" описана в статье:

Последнее обновление: 08.04.2016

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

Создадим выпадающий список:

Внутрь элемента select помещаются элементы option - элементы списка. Каждый элемент option содержит атрибут value , который хранит значение элемента. При этом значение элемента option не обязательно должно совпадать с отображаемым им текстом. Например:

iPhone 6S

С помощью атрибута selected мы можем установить выбранный по умолчанию элемент - это необязательно должен быть первый элемент в списке:

iPhone 6S Lumia 950 Nexus 5X

С помощью другого атрибута disabled можно запретить выбор определенного элемента. Как правило, элементы с этим атрибутом служат для создания заголовков:

Выберите модель iPhone 6S Lumia 950 Nexus 5X

Для создания списка с множественным выбором к элементу select надо добавить атрибут multiple :

Зажав клавишу Ctrl, мы можем выбрать в таком списке несколько элементов:

Select также позволяет группировать элементы с помощью тега :

Использование групп элементов применимо как к выпадающему списку, так и к списку со множественным выбором.

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

Сегодня мы разберем один из таких примеров оформления поля выбора, применяя HTML/CSS и иконку Font Awesome . Но начнем мы как обычно с разметки документа.

HTML-код

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

Позиционируем контейнер с классом box в центре окна.

Box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Заранее подключаем иконочный шрифт до закрывающего тега head .

Стилизация селектора select

Задаем размеры для поля выбора - 250x50 пикселей и делаем поля для пунктов по 10 пикселей со всех сторон.

Box select{
width: 250px;
height: 50px;
padding: 10px;
}

Убираем рамку и обводку:

Border: none;
outline: none;

Прописываем фиолетовый цвет фона, название, цвет и размер шрифта для списков.

Background: #ab05af;
font-family: "Russo One", sans-serif;
color: #fff;
font-size: 20px;

Создаем вокруг поля тень.

Box-shadow: 0 5px 20px rgba(0,0,0,.3);

В целом select box готов и работает, но смотрится он скучно, да и треугольник, в который нужно будет попасть мышкой очень маленький. А если я так подумал, значит и дизайнер так же подумает, надо заранее подготовиться к разным вариантам.

Вероятнее всего дизайнер поставит на место крошечного треугольника - иконку из шрифта Font Awesome .

Так намного красивее смотрится, а писать код все равно надо верстальщику. Какое здесь может быть решение? Мы не будем трогать HTML-код , а задействуем псевдо-элемент before .

Псевдо-элемент before для.box

Первое, что надо сделать - это прописать код иконки и название шрифта "Font Awesome 5 Free" . Выбираем на сайте fontawesome.com нужную иконку, обозначающую "выбор" и копируем её код.

Далее позиционируем абсолютно, указываем размеры 50x50, белый цвет у иконки, фон светло-фиолетовый. Задаём очень важное свойство pointer-events: none . Это значит, что псевдо-элемент before не является объектом события мыши, а значение none предлагает событию "выбора мышью" проходить на нижний слой и обращаться к элементу, находящемуся под ним - к тому маленькому треугольнику. Треугольник никуда не исчез, просто он находится под псевдо-элементом before , служащий лишь украшательством. Кликая по красивой иконке, на самом деле срабатывает "некрасивый" треугольник и мы делаем свой выбор.

Как вы думаете, современный ли у вас дизайн сайта? Используете ли вы самые последние технологии или боитесь их? Возможно, вы думаете что это слишком сложно и даже лезть не хотите в эти дебри. Но на самом деле всё обстоит куда иначе. Ведь новые технологии (я имею ввиду сейчас CSS3) пришли для того, чтобы сделать жизнь веб-дизайнера легче и привнести свои дополнительные возможности при создании внешнего вида сайта. Сегодня поговорим о том несколько видов дизайна для выпадающего списка.

Выпадающий список для сайта

Не самое простое решение я рассматривал в январе этого года 🙂 :

Скачать

Что хочу сказать сразу по поводу демо: каждый отдельный вид списка находится в отдельном файле HTML, что позволяет без труда взять код, который вам нужен. Также в отдельных файлах расположены стили для каждого дизайна списка. Вам лишь осталось выбрать тот, который вам больше всего нравится и найти его файл стилей 🙂 .

В разметке списка ничего необычного:

Как говорится: он и в Африке . Внутри него есть теги , в которых находятся элементы списка.