Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

ЧебурашкаКрокодил ГенаШапоклякКрыса ЛарисаВыберите герояЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Список множественного выбораРаскрывающийся список

Синтаксис

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

Атрибуты

accesskey
Позволяет перейти к списку с помощью некоторого сочетания клавиш.
autofocus
Устанавливает, что список получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает список с формой.
multiple
Позволяет одновременно выбирать сразу несколько элементов списка.
name
Имя элемента для отправки на сервер или обращения через скрипты.
required
Список обязателен для выбора перед отправкой формы.
size
Количество отображаемых строк списка.
tabindex
Определяет последовательность перехода между элементами при нажатии на клавишу Tab

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

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT</title>
 </head>
 <body>  
 
  <form action="select1.php" method="post">
   <p><select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

htmlbook.ru

Как сделать выпадающий список меню в HTML и CSS с ссылками при наведении

выпадающий список

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

Выпадающее меню со списком элементов на HTML

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

Конечно, подобную проблему можно решить многими способами, но я бы рекомендовал обходиться без дополнительного JS-кода (и jQuery).

Я считаю так — если задачу теоретически можно решить средствами HTML и CSS без применения джейквери, нужно делать это на практике. Если вы не знаете, что писать и куда нажимать — это отдельная проблема и она не должна вас останавливать. Нужно гуглить, учиться, расти, повышать свою квалификацию как верстальщика и фронтенд-разработчика — никогда не знаешь, где эти навыки пригодятся.

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

<ul>
    <li><a href=#>Меню №1</a>
        <ul>
            <li><a href=#>Субменю №1 первого меню</a></li>
        </ul>
    </li>
    <li><a href=#>Меню №2</a>
        <ul>
            <li><a href=#>Субменю №2 второго меню</a></li>
            <li><a href=#>Субменю №2 второго меню</a></li>
        </ul>

    </li>
    <li><a href=#>Меню №3</a>
        <ul>
            <li><a href=#>Субменю №3 третьего меню</a></li>
            <li><a href=#>Субменю №3 третьего меню</a></li>
            <li><a href=#>Субменю №3 третьего меню</a></li>
        </ul>
    </li>
</ul>

Первый шаг к нашему выпадающему списку в меню сделан и вот что получилось. Результат:

разметка меню для создания выпадающего списка

Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.

Добавлю немного CSS-магии. Пропишу прямо в html-файле — в <head><style></style></head>. CSS-код:

body {
    /* Убираю отступы. */
    margin:0px;
    /* Убираю еще отступы. */
    padding:0px;
    /* Задаю шрифт. */
    font: 14px ‘Verdana’;
}
ul {
    /* Убираю маркеры у списка*/
    list-style: none;
    /* Делаю элементы блочными. */
    display: block;
    /* Убираю отступы. */
    margin:0px;
    /* Убираю еще отступы! */
    padding:0px;
}
ul:after {
    /* Делаю элементы блочными. */

    display: block;
    /* Убираю выравнивание. */
    float: none;
    content: ‘ ‘;
    clear: both;
}
ul.mmenuu > li {
    /* Задаю выравнивание и позиционирование. */
    float: left;
    /* Считаем координаты относительно исходного места*/
    position: relative;
}
ul.mmenuu > li > a {
    /* Делаю элементы блочными: */
    display: block;
    /* Задаю белый цвет. */
    color: #fff;
    /* Задаю отступ 10px. */
    padding: 10px;
    /* Убираю форматирование*/
    text-decoration: none;
    /* Задаю цвет. */
    background-color: #da570f;
}
ul.mmenuu > li > a:hover {
    /* Задаю цвет при наведении. */
    background-color: #eb9316;
}
ul.ssubmenuu {
    position: absolute;
    width: 240px;
    top: 37px;
    left:0px;
    /* Делаю субменю скрытыми. */
    display: none;
    /* Цвет — белый. */
    background-color: white;
}
ul.ssubmenuu > li {
    /* Блочное расположение элементов*/
    display: block;
}
ul.ssubmenuu > li > a {
    /* Делаю элементы блочными. */
    display: block;
    /* Убираю форматирование*/
    text-decoration: none;
    /* Задаю отступ. */
    padding: 10px;
    /* Задаю цвет. */
    color: #ffffff;
    /* Еще цвет. */
    background-color: #da570f;
}
ul.ssubmenuu > li > a:hover {
    /* Цвет бэкграунда при наведении. */
    background-color: #eb9316;
    /* Задаю подчеркивание*/
    text-decoration: underline;
}
ul.mmenuu > li:hover > ul.ssubmenuu {
    /* Делаю элементы блочными. */
    display: block;
}

Результат:

выпадающий список готов

Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!

Выпадающий при наведении список меню на HTML

И снова мы изобретаем меню на чистом CSS, без использования JS.

<ul>
<li><a href=»#»>Раздел меню №1</a></li>

<li><a href=»#»>Раздел меню №2</a>
    <ul>
        <li><a href=»#»>Подраздел №1 второго меню</a></li>
        <li><a href=»#»>Подраздел №2 второго меню</a></li>
    </ul>
</li>
<li><a href=»#»>Раздел меню №3</a>
    <ul>
        <li><a href=»#»>Подраздел №1 третьего меню</a></li>
        <li><a href=»#»>Подраздел №2 третьего меню</a></li>
        <li><a href=»#»>Подраздел №3 третьего меню</a></li>
    </ul>
</li>      
</ul>

меню которое мы сделаем выпадающим

Учитывая то, что вы видели в предыдущей части статьи, думаю выглядит многообещающе. А все благодаря чему? Потому что мы умеем присваивать нужным элементам стиль «display:none» и прописывать в CSS чтобы при наведении на него приоритетным было что-то типа «inline-block» взамен «none».

Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=»menu»» основному списку, то есть всему выпадающему меню. Я сделал это для того чтобы обозначить сразу родительские элементы выпадающего списка и сделать их видимыми.

Дальше. В каждый из разделов я вложил дополнительные списки <ul>, которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.

Перейдем к CSS. Код:

>
    /* Обнуляю отступы и убираю маркеры у списков. */
    ul, li {
        margin:0;
        padding:0;
        list-style-type:none;  
    }

    /* Задаю параметры для основного, родительского блока, меню выпадающего списка. */
    #menu {
        display:block;
        position:absolute;
        top:20px;
        left:20px;

    }

    /* Задаю стили для блоков выпадающего списка. */
    #menu > li {
        display:inline-block;
        height:20px;
    /* Считаем координаты относительно исходного места. */
        position:relative;
    }

    /* Задаю стили, чтобы скрыть дочерние блоки выпадающего списка. Ну и немного украшаю. */
    #menu > li > ul {
        position:absolute;
        top:20px;
        left: 10px;
        display:none;
        background-color: bisque;
        border-radius: 5px;
        width: 185px;
        font-size: 14px;
        padding: 10 0 10 10;
    }

    /* Так я делаю прежде скрытую часть видимой — при наведении курсора. */
    #menu > li:hover > ul {
        display:block;  
    }
</style>

Результат:

минималистичный выпадающий список

Что хочу отметить дополнительно.

«#menu > li» означает, что стили будут применены только к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли подумать некоторые. Внимательнее!

«Position: relative;» — отсчитывает координаты от угла одного из разделов в главном списке, откуда выпадают дочерние элементы.

Последнее: выпадающий список по примеру выше на HTML (см. также особенности HTML) и CSS в оформлении меню сайта это удобная вещь. Для ПК и десктопов. На мобильных устройствах и планшетах нет мышки и курсоров, поэтому такой вариант не подойдет.

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

Как создать крутое выпадающее меню

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

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

Стили помогают нам скрыть элементы и сделать их выпадающими при наведении курсора.

Код:

<ul>
    <li>
        <a href=»#» title=»Здесь ссылка на главную»>Главная</a>
    </li>
    <li>
        <a href=»#» title=»Здесь информация о компании»>О нас</a>
        <ul>
            <li><a href=»#»>Суперпродукты</a></li>
            <li><a href=»#»>Суперкоманда</a></li>
        </ul>
    </li>
    <li>
        <a href=»#» title=»Здесь будут ваши услуги»>Услуги</a>
        <ul>
            <li><a href=»#»>Крутая услуга №1</a></li>
            <li><a href=»#»>Крутая услуга №2</a></li>
            <li><a href=»#»>Крутая услуга №3</a></li>
        </ul>
    </li>
    <li>
        <a href=»#» title=»Здесь разместите ссылки на ваши продукты»>Продукты</a>
        <ul>
            <li><a href=»#»>Суперсылка №1</a></li>
            <li><a href=»#»>Суперсылка №2</a></li>
            <li><a href=»#»>Суперсылка №3</a></li>
            <li><a href=»#»>Суперсылка №4</a></li>
        </ul>
    </li>
    <li>
        <a href=»#» title=»Здесь напишите свои контакты»>Контакт</a>
        <ul>
            <li><a href=»#»>Время работы</a></li>
            <li><a href=»#»>Месторасположение</a></li>
            <li><a href=»#»>Выпадающий список 10/10!</a></li>
        </ul>
    </li>
</ul>

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

Теперь давайте вооружимся магией стилей — при помощи CSS я трансформирую все серии вложенных списков <ul> в крутое и удобное в использовании выпадающее меню с несколькими элементами.

Перейдем к CSS-коду. Что-то мне стало скучно туда-сюда бегать, поэтому я хорошенько его прокомментировал прямо в стилях. Да и вам удобнее будет, если будете пользоваться этим решением.

CSS-код, помещенный в <head> страницы:

#nnavv{
    /* По левому краю выравниваю! */
    float:left;
    /* Отступ. */
    margin-bottom: 10;
    /* Задаю ширину. */
    width:500px;
    /* Убираю маркеры*/
    list-style: none;
    /* Шрифт — жирным*/
    font-weight: bold;
}
#nnavv li{
    /* Выравнивание! */
    float: left;
    /* Делаю элементы блочными. */
    display: block;
    /* Отступ. */
    margin-right: 10;
    /* Позиционирование относительно исходного места! */
    position: relative;
}
#nnavv li a{
    /* Цвет бэкграунда. */
    background: #333;
    /* Делаю элементы блочными. */
    display: block;
    /* Отступы. */
    padding: 5;
    /* Цвет ссылки. */
    color: #fff;
    /* Форматирование текста*/
    text-decoration:none;
    /* Задаю скругленные углы на 2 пиксела*/
    -moz-border-radius: 2;
    -webkit-border-radius: 2;
    border-radius: 2;
    /* Тень для визуальной приподнятости текста*/
    text-shadow:1px 1px 1px rgba(0,0,0,0.74);
}
#nnavv li a:hover{
    /* Подчеркну ссылку при наведении*/
    text-decoration: underline;
    /* Задам фон. */
    background: #6b0c33;
    /* Цвет ссылки остается прежним*/
    color: #fff;
    background: rgba(108,13,53,0.74); /* Заставляю выглядеть полупрозрачным! */
}
/* НАСТРАИВАЕМ ВЫПАДАЮЩИЕ ЭЛЕМЕНТЫ!!! */
#nnavv ul{
    /* Убираю маркеры у выпадающего списка*/
    list-style:none;
    left:-9999px; /* Убираю ненужно за пределы экрана (говорят, это на 95% лучше чем «display:none;», т.к. дисплей нон некоторые программы игнорируют). */
    opacity:0; /* При помощи прозрачности, скрываем <ul>. */
    /* Делаем так, чтобы Webkit плавно показывал нам всплывающие элементы выпадающего списка при наведении мышки. */
    -webkit-transition: 0.24s linear opacity;
    position:absolute;
}
#nnavv ul li{
    /* Здесь я задаю отступ между элементами &lt;li&gt;. Это необходимо для разделения пунктов меню, его не было в предыдущей части статьи (просто забыл)*/
    padding-top: 1px;
    float:none;
}
#nnavv ul a{
    /* Делаю элементы блочными. */
    display:block;
    /* Запрещаю перенос строк текста на новую строку, чтобы создавался многострочный выпадающий элемент списка. */
    white-space: nowrap;
}
#nnavv li:hover ul{ /* Создаю выпадающий пункт, который появится при наведении. */
    left:0; /* Возвращаю его обратно на экран пользователя, — когда нужно. */
    opacity:1; /* Убираю прозрачность*/
}
#nnavv li:hover a{ /* В этом стиле я устанавливаю свойства для элементов верхнего уровня, — в то время, когда показывается выпадающий список. */
    /* Подчеркну*/
    text-decoration:underline;
    /* Сделаю полупрозрачным. */
    background:rgba(109,15,53,0.74);
    background:#6b0c36;
}
#nnavv li:hover ul a{ /* Поменял некоторые стили первого уровня при появлении выпадающего элемента. */
    /* Уберу форматирование*/
    text-decoration:none;
    -webkit-transition:-webkit-transform 0.077s linear;
}
#nnavv li:hover ul li a:hover{ /* Здесь я задаю стили для конкретных выпадающих пунктов, при наведении на них курсора — чтобы они отличались от тех элементов, куда курсор не попадает*/
    -moz-transform:scale(1.07);
    -webkit-transform:scale(1.07);
    /* Задам цвет фона выпадающего элемента*/
    background:#334;
    background:rgba(50,50,50,0.74); /* Сделаю полупрозрачным. */
    text-decoration:underline;
}

Готово! Финальный результат:

красивый выпадающий список

БОНУС — суперкрутой выпадающий список на ХТМЛ и ЦСС

Четвертый и последний на сегодня. Я устал, вы устали — думаю четыре выпадающих меню будет достаточно для того, чтобы выбрать наиболее оптимальный вариант для себя.

Тоже делаем список со ссылками, отображающимися при наведении. Никаких анимаций, модных выездов, мигания — только чистый кроссбраузерный код, простой и эффективный. Вместо «display:none;» использую «left: -9999px;». Ну там сами увидите.

HTML код:

<ul>
    <li>
    <a href=»/»>Красноярский край</a>
        <ul>
            <li><a href=»/»>Минусинск</a></li>
            <li><a href=»/»>Ачинск</a></li>
            <li><a href=»/»>Красноярск</a></li>
            <li><a href=»/»>Железногорск</a></li>
            <li><a href=»/»>Канск</a></li>
            <li><a href=»/»>Норильск</a></li>
        </ul>
    </li>

    <li>
    <a href=»/»>Свердловская область</a>
        <ul>
            <li><a href=»/»>Екатеринбург</a></li>
            <li><a href=»/»>Верхняя Пышма</a></li>
            <li><a href=»/»>Нижний Тагил</a></li>
            <li><a href=»/»>Первоуральск</a></li>
            <li><a href=»/»>Асбест</a></li>
            <li><a href=»/»>Каменск-Уральский</a></li>
        </ul>
    </li>
</ul>

Скриншот результата:

blogwork-vipadaushiy-spisok-menu-5

CSS-код, который я поместил в <head>:

ul.ddropdownn li {/* Считаем координаты относительно исходного места. */ position: relative; }
ul.ddropdownn, ul.ddropdownn-inside {
    /* Отступы на нуле. */
    padding: 0;
    /* Маркеры уберем. */
    list-style-type: none;
    }
ul.ddropdownn-inside {
    /* Спрячем дочерние элементы выпадающего списка. */
    left: -9999px;
    position: absolute;
    }
ul.ddropdownn li.ddropdownn-top {
    /* Небольшой отступ. */
    margin: 0 1px 0 0;
    /* Выравнивание по левой стороне. */
    float: left;
    display: inline;
    }
ul.ddropdownn li.ddropdownn-top a {
    /* Делаю элементы блочными. */
    display: block;
    /* Снова отступы. */
    padding: 3px 10px 4px;
    }
ul.ddropdownn a.ddropdownn-top {/* Цвет фона. */ background: #efefef; }
ul.ddropdownn a.ddropdownn-top:hover {/* Отступы. */ padding: 3px 10px 4px; }
ul.ddropdownn li.ddropdownn-top:hover .ddropdownn-inside {
    left: 0;
    /* Делаю элементы блочными. */
    display: block;
    }
ul.ddropdownn .ddropdownn-inside {/* Цвет фона. */ background: #ffffff; }
ul.ddropdownn .ddropdownn-inside a:hover {/* Цвет фона изменится при наведении. */ background: #efefef; }

Результат (без наведения курсора):

свернутый выпадающий список

Результат (при наведении курсора):

список выпадает при наведении курсора

Итоги: скачать готовый html+css код выпадающего списка меню

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

Надеюсь один из списков украсит меню вашего проекта или хотя бы будет использован в качестве основы.

Я подготовил для вас архив, который вы можете скачать. Там все 4 выпадающих списка — html код и css стили прямо в файле. Там думаю разберетесь.

Превью содержимого файла:

html файл с готовыми выпадающими списками

Скачать:

blogwork-menu-list-archive.zip (2,97КБ)

P.S. Ну а если вы вдруг неправильно написали поисковый запрос и зашли не туда (не нашли то чего нужно), не расстраивайтесь — у меня есть пара видео, где при помощи <select> и <option> в HTML страницу вставляются выпадающие списки. Видео 1:

Видео 2:

blogwork.ru

Как сделать выпадающий список в HTML (ТОП 16)

За последние два года, разработка веб-приложений (сайтов) продвинулась далеко вперед и то, что мы использовали для создания сайта ранее — уже устарело или появились более свежие методы.

Ранее, чтобы создать выпадающий список в html (на англ. — dropdown), мы просто использовали <select> и <option>. Факт в том, что мы и сейчас может его использовать, но зачастую нам нужно менять стили и адаптировать цветовую гамму выпадающего списка под стиль дизайна. К сожалению, не всегда получается стилизовать так как хочется, потому что select и option имеют свои ограничения и плохую поддержку кроссбраузерности.

Специально для этой статьи, я нашел 16 разных примеров, которые могут пригодиться во время разработки сайта. И так приступим.

Html шаблон, который позволяет настроить собственные цвета на выпадающего списка.

 

Посмотреть в песочнице — http://codepen.io/silverdrop/pen/msrcE

Написан на CSS3 и JavaScript. Обычный выпадающий список.

Посмотреть в песочнице — http://codepen.io/pedronauck/pen/fcaDw

Прозрачный выпадающий список со стилистикой станций метро.

Посмотреть в песочнице — http://codepen.io/carlcalderon/pen/KhwDH

Посмотреть в песочнице — http://codepen.io/Tombek/pen/JAvHC

Отличное решение для длинных выпадающих меню.

Посмотреть в песочнице — http://codepen.io/larrygeams/pen/feoDc

Выпадающее меню, которое написано на чисто CSS без использования каких-либо скриптов.

Посмотреть в песочнице — http://codepen.io/Thibaut/pen/Jasci

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

Посмотреть в песочнице — http://cssdeck.com/labs/navigation-dropdown-with-flip-effect

 

Посмотреть в песочнице — http://codepen.io/jakestuts/pen/nEFyw

Посмотреть в песочнице — http://codepen.io/daniesy/pen/pfxFi

Сделано в стиле UI, подойдет под UI стилистику сайта.

Посмотреть в песочнице — http://codepen.io/Jeplaa/pen/IzAvx

 

Посмотреть в песочнице — http://codepen.io/Dianatomic/pen/HqICG

Dropdown в стиле выбора страны. 

Посмотреть в песочнице — http://codepen.io/abhishek/pen/bkfLi

Посмотреть в песочнице — http://codepen.io/Metty/pen/dglwH

 

Посмотреть в песочнице — http://codepen.io/DKunin/pen/EIobp

Посмотреть в песочнице — http://codepen.io/MrBambule/pen/jIseg

Довольно интересный и простой дизайн.

Посмотреть в песочнице — http://codepen.io/mingger/pen/hdtiD

 

Надеюсь вам понравилось моя подборка. Оставляйте комментарии, делитесь мнением и присылайте собственные работы!

Как сделать выпадающий список в html (подборка ТОП 16) от bologer

bologer.ru

Выпадающий список html пошаговая инструкция

Выпадающий список html

Выпадающий список html. За последние два года, разработка веб-приложений (сайтов) продвинулась далеко вперед и то, что мы использовали для создания сайта ранее — уже устарело или появились более свежие методы.

Ранее, чтобы создать выпадающий список в html (на англ. — dropdown), мы просто использовали <select> и <option>. Факт в том, что мы и сейчас может его использовать, но зачастую нам нужно менять стили и адаптировать цветовую гамму выпадающего списка под стиль дизайна. К сожалению, не всегда получается стилизовать так как хочется, потому что select и option имеют свои ограничения и плохую поддержку кроссбраузерности. Читайте еще: Как создать презентацию в PowerPoint.

Напомню, что любая форма, присутствующая на странице, создается при помощи основного тега form (который часто содержит элемент input) и предназначена для ввода какой-либо информации от пользователя и отправки ее на сервер (пример — форма обратной связи для сайта WP).

К сожалению, средства языка гипертекстовой разметки не позволяют напрямую обрабатывать эту информацию, поэтому с помощью HTML мы создаем лишь внешний вид формы, а необходимые данные отправляются для обработки. С этой целью на вебсервере целенаправленно создается специальный файл, написанный на одном из серверных языков (чаще всего, PHP). Скажем, для обратной связи можно сотворить файлик mail.php, который и будет являться обработчиком.

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

Эта информация крайне необходима, поскольку даже в случае использовании всех современных встроенных в популярные браузеры инструментов разработчиков (напомню, первой ласточкой в реализации этого функционала был плагин Firebug для Мазилы), вы должны четко представлять себе механизм использования основных тегов, тогда редактирование кода HTML, необходимость которого возникает время от времени, превратится в приятное занятие.

И еще. Поскольку HTML5 позволяет реализовывать многие современные задачи и, более того, в недалеком будущем будет приоритетным, в процессе повествования (не только в этой, но и в иных публикациях на данную тему) я обязательно буду акцентировать ваше внимание на те теги и атрибуты, которые появились именно в пятой модификации.

Выпадающие списки с помощью select, option и optgroup

Выпадающие списки с помощью select, option и optgroup

Рассмотрим создание раскрывающихся списков как одного из вариантов веб-формы на сайте. Все его отдельные элементы формируются при помощи тегов option, которые вложены в контейнер, определяемый тэгом select. Для вариативности есть еще и optgroup, который дает возможность упорядочить список. Все эти варианты мы и разберем ниже.

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

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

Name— в качестве значения (параметра) этого атрибута нужно добавить название списка (в приведенном примере это «list1″) для его идентификации при обработке на сервере

Ну и весь выпадающий список является одним из вариантов формы, а потому описывается тегом form, к которому добавляются необходимые атрибуты (action, method, name), обеспечивающие его корректное функционирование. С целью визуального показа кнопки для отправки данных на сервер здесь использован тег input с атрибутами «type=»submit»» и «value=»Отправить»». К слову, кнопочку можно оформить и посредством тега button.

Multiple— этот атрибут, не имеющий параметров, дает возможность множественного выбора в отличие от выше приведенного примера, где можно выбрать только один элемент (строчку). Попробуйте выделить в данном списке мышкой сразу несколько строк (по одной в любых местах, удерживая клавишу Ctrl, либо посредством Shift следующих подряд одна за одной)

Size— устанавливает высоту выпадающего списка, то есть количество отображаемых строк. Если присутствует атрибут multiple, а значение size не указано (как в примере выше), то по умолчанию отображается четыре строки, а, например, при size=»5″ будут видны уже пять

Required[HTML5] (параметров не имеет) — определяет, что обязательно нужно сделать выбор перед отправкой данных обработчику. Если элемент из списка не выбран, то данные формы отправлены не будут

Autofocus[HTML5] (значений не имеет) — устанавливает фокус на список сразу после загрузки страницы. Кроме того, если пользователь привык основную часть действий производить клавишами, то как раз такое предварительно настроенное фокусирование поможет делать выбор из списка посредством стрелок на клавиатуре без всякого использования мышки

Disabled(параметров нет) — блокирует доступ к списку (отключает его). На практике обычно используется вместе со скриптами в тех случаях, когда нужно включать раскрывающийся список только при выполнении определенных условий

Form[HTML5] — осуществляет связь списка с одной или несколькими формами, к которым он принадлежит, но находится вне контейнера <form></form>. При этом в роли значения атрибута form прописывается параметр глобального атрибута id, который добавлен к тегу form

Не путайте атрибут тега select и основной тэг для создания формы. В примере выше к тегу form добавлен атрибут id=»data», а к select — form=»data», что и позволило связать выпадающий список с конкретной формой.

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

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

Value— определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику формы). Собственно, обработчику отправляется имя, которое задается атрибутом name тега select, и значение value (для данного примера — 1, 2, 3, 4, 5), соответствующее выбранной строке выпадающего списка

Disabled— блокирует для выбора элемент выпадающего списка.

Как видно из примера, строчка «Option» неактивна и выбрать ее невозможно.

Label— отображает текстовое содержание (являющееся его значением) того или иного элемента списка. Если label присутствует, то выводится строчка, тождественная значению этого атрибута и игнорируется текстовое содержание, находящееся внутри тега option. То же самое происходит, ежели содержимое между <option> и </option> вовсе отсутствует.

Смотрите. В выше предоставленном примере первая строка для option в коде пустая (в левой части таблицы), но прописан параметр label=»Тег Option», в результате именно этот текст появился в списке (в правой части). Вторая строка кода в качестве содержимого тега option содержит текст «Тег Textarea», но в раскрывающемся списке справа отображается слово «Textarea», совпадающее со значением label=»Textarea».

Selected— выделяет текущий пункт выпадающего списка

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

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

Label— устанавливает название каждой группы в качестве параметра

Disabled(нет значений) — блокирует выбор элементов той группы, по отношению к которой он установлен, причем, неактивные пункты обычно выделены серым цветом

Текстовое поле в форме посредством textarea

Текстовое поле в форме посредством textarea

Еще один элемент формы для сайта, который мы рассмотрим — поле с возможностью ввода в него многострочного текста. Его можно создать с помощью тега textarea. Без атрибутов по умолчанию применение этого тега даст такой результат

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

Попробуем теперь добавить к первоначальному коду несколько атрибутов с параметрами:

Name— определяет имя текстовой области в качестве значения для ее идентификации после отправки данных формы при их обработке на сервере.

Cols— ширина поля, которая в роли параметра задается числом стоящих рядом одинаковых символов, размещенных по горизонтали. Значение по умолчанию — 20.

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

Maxlength[HTML5] — указывает максимальное количество знаков, которые можно поместить в текстовое поле. При превышении лимита дальнейший ввод будет невозможен.

Ниже представлен пример со всеми выше перечисленными атрибутами, действие каждого из которых вы можете проверить самолично, просто поместив в область текста нужное количество букв и строк (можете просто ввести один и тот же символ несколько раз)

Minlength[HTML5] — указывает минимальное число знаков, которые необходимо ввести в текстовую область. Ежели пользователь попытается отправить текст с меньшим количеством символов, то браузер выведет краткое сообщение с информацией, в которой будет содержаться упоминание о необходимости дополнить содержание формы и о том, сколько знаков уже введено.

Placeholder[HTML5] — с помощью этого атрибута можно поместить текст в поле, являющийся параметром данного атрибута, который исчезнет, когда пользователь начнет вводить символы

Readonly(без параметров) — ежели к textarea прикрутить данный атрибут, то текстовое поле окажется недоступным для изменения пользователями и будет предназначено только для чтения. Но на него можно навести фокус (подведите курсор к полю и щелкните левой кнопкой мышки), а также выделить и скопировать (частично или полностью) текст

Еще несколько атрибутов, реализующих дополнительный функционал при заполнении полей:

Autoсomplete[HTML5] — указывает, должен ли браузер выдавать подсказки при заполнении формы пользователем на основании ранее вводимых данных и дает возможность автоматически вставлять подходящий текст.

Данный атрибут со значением «on» работает только тогда, когда в веб-обозревателе конкретного пользователя включено автозаполнение полей формы.

Wrap[HTML5] — устанавливает для браузера правила переноса строк в текстовой области с помощью трех значений:

Soft — набор символов, который не помещается в поле по ширине, автоматически переносится на новую строчку. При этом обработчику текст будет передан в виде одной строки. В том случае, если пользователь осуществит перенос текста в любом нужном месте с помощью клавиши «Enter», то такой перенос сохраняется при отправке вебформы.

Hard — переносы производятся автоматически, если текст не влезает в поле по ширине, причем, при отправке обработчику места таких переносов будут сохранены. Этот параметр используется только в связке с атрибутом cols

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

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

Autofocus[HTML5] (не имеет параметров) — инициирует фокусирование на текстовое поле при загрузке страницы с формой.

Disabled— в отличие от атрибута readonly (который также запрещает редактировать содержимое поля, но дает возможность навести на него фокус), полностью блокирует доступ к текстовой области, которая окрашивается обычно в серый цвет

Form[HTML5] — связывает текстовое поле с формой в тех случаях, когда по тем или иным причинам оно расположено вне <form></form>. Как и в случае с тегом select, связь осуществляется посредством глобального атрибута id для form. При этом параметры id и атрибута form тождественны

Required— определяет, что поле обязательно для заполнения. Если в текстовой области не будет содержимого, при попытке отправки формы на сервер веб-браузер выведет сообщение о необходимости ее заполнения, а форма отправлена не будет. Содержание сообщения зависит от браузера и не может быть изменено.

Особенности тега label

Особенности тега label

По умолчанию элемент формы при щелчке по его текстовой составляющей не активируется. Возьмем сначала в качестве примера список (реализуемый с помощью атрибута type=»checkbox» тега input), нужные строки которого пользователь должен отметить, заполнив соответствующие чекбокс(-ы) галочками. Чтобы поставить галочку, необходимо щелкнуть по флажку мышкой, но клик по расположенному рядом тексту будет безрезультатным.

Именно тег label позволяет реализовать активацию какого-либо элемента при клике по его названию. Есть 2 способа, с помощью которых можно связать элемент формы HTML и текст.

1 способ. Необходимо применить идентификатор id внутри элемента формы и указать его имя в качестве значения атрибута for тега label

2 способ. Элемент формы поместить внутрь контейнера, созданного тегом label

Теперь можете кликнуть не только по самой форме, но и по тексту, расположенному рядом. Итог будет идентичным. Другим примером может служить форма для ввода текста (создаваемая с помощью атрибута type=»text» того же input), где активация (помещение курсора в текстовое поле) будет происходить и после щелчка по надписи «Введите текст»

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

Fieldset и legend — группировка элементов формы

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

Давайте в качестве начального примера сформируем одну подгруппу с привлечением атрибута type тега input для создания чекбоксов и в пределах <legend></legend> впишем ее название. Ниже в таблице слева находится HTML код для этой формы, а справа — результат его работы

Обратите внимание, что при использовании fieldset все пространство области его действия по умолчанию для наглядности выделяется специальной рамкой. Выглядит неплохо. Естественно, за счет CSS свойств вид этой рамки можно изменить, а то и вовсе ее убрать. Для тега fieldset существуют три атрибута, влияние которых мы сейчас незамедлительно и разберем:

Name[HTML5] — служит для наименования совокупности элементов, объединенных в контейнере <fieldset></fieldset>. Название (как параметр этого атрибута) применяется в дальнейшем с целью идентификации конкретной группы при обработке формы, в том числе в скриптах, включая JavaScript.

Чтобы наглядно продемонстрировать действие name, заключим данную группу в тег form для корректной работы и добавим кнопку с помощью тега button, прописав к нему параметр HTML

события onclick=»form.group1.style.backgroundColor=’#e1dccd’», в котором и присутствует значение этого атрибута. Данное событие позволяет пользователю с помощью созданной кнопочки изменить цвет фона в пределах области формы, заданной тегом fieldset

Disabled[HTML5] — (нет значений) подобно одноименным атрибутам для уже рассмотренных тэгов деактивирует группу элементов (вас ждет неудача при попытке заполнить чекбоксы ниже). Читайте еще: Самый легкий браузер.

Form[HTML5] — связывает вебформу, расположенную отдельно, с конкретной группой. Идентификация реализуется путем установки одинаковых значений form и универсального атрибута id (в нашем примере это id=»data» и form=»data»)

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

Закажите продвижение сайта через форму и получите скидку 20%:

kapitanus.ru

Красивый выпадающий список для сайта — делаем выпадающий список