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

1. Пример обычного HTML списка

• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты

HTML разметка списка

• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты

2. Пример HTML списка с соединительными линиями

Присвоим тегу

класс treeline для создания соединительных линий каждого раздела списка.
• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты
HTML разметка списка с соединительными линиями
/* Присваиваем класс treeline */
• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты
CSS стили списка с соединительными линиями .treeline, .treeline ul, .treeline li { margin: 0; padding: 0; line-height: 1.2; list-style: none; } .treeline ul {margin: 0 0 0 15px; /* отступ вертикальной линии */} .treeline > li:not(:only-child), .treeline li li { position: relative; padding: 3px 0 0 20px; /* отступ текста */ } /* Стиль вертикальной линии */ .treeline li:not(:last-child) { border-left: 1px solid #ccc;} /* Стили горизонтальной линии*/ .treeline li li:before, .treeline > li:not(:only-child):before { content: ""; position: absolute; top: 0; left: 0; width: 1.1em; height: .7em; border-bottom:1px solid #ccc; } /* Вертикальная линия последнего пункта в списка */ .treeline li:last-child:before { width: calc(1.1em - 1px); border-left: 1px solid #ccc; } 3. Пример раскрывающегося HTML списка
• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты
HTML разметка раскрывающегося списка

К предыдущей разметке добавляем + для реализации функции раскрытия элементов древовидного списка.

• Главное меню
  • +База знаний /* Блок раскрытия списка */
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты
CSS стили раскрывающегося списка

К CSS из предыдущего примера необходимо дописать следующие стили:

Treeline .drop { position: absolute; left: -6px; top: 5px; width: 11px; height: 11px; line-height: 1em; text-align: center; background: #9F9F9F; color: #fff; /* Фон и цвет кнопки, раскрывающей список */ font-size: 78%; /* Размер +/- */ cursor: pointer; -webkit-user-select: none; -moz-user-select: none; } .treeline li:last-child > .drop {margin-left: 1px;} .treeline .drop + ul {display: none;} .treeline .dropM + ul {display: block;}

Скрипт, реализующий функцию раскрывающегося списка

Помимо HTML и CSS, данный способ оформления древовидных списков требует использование JS:

$(function() { var ul = document.querySelectorAll(".treeline > li:not(:only-child) ul, .treeline ul ul"); for (var i = 0; i < ul.length; i++) { var div = document.createElement("div"); div.className = "drop"; div.innerHTML = "+"; ul[i].parentNode.insertBefore(div, ul[i].previousSibling); div.onclick = function() { this.innerHTML = (this.innerHTML == "+" ? "−" : "+"); this.className = (this.className == "drop" ? "drop dropM" : "drop"); } } })();

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

4. Пример вертикального древовидного списка
• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты
HTML разметка вертикального древовидного списка
/* Присваиваем класс treevertical */
• Главное меню
  • База знаний
    • Компоненты
    • Плагины
    • Модули
  • Отзывы
  • Контакты
CSS стили вертикального древовидного списка .treevertical, .treevertical ul { position: relative; display: table; margin: 5px 0 0 0 !important; padding: 6px 0 0 0 !important; line-height: normal; text-align: center; word-wrap: break-word; word-break: break-all;} .treevertical li { position: relative; display: table-cell;} /* Отступ между пунктами */ .treevertical li:not(:only-child) {padding: 0 .5em;} .treevertical li:last-child {padding-right: 0;} .treevertical li:first-child {padding-left: 0;} /* Стили линий */ .treevertical ul:before, .treevertical ul li:before, .treevertical ul li:after { content: ""; position: absolute; top: -5px; left: 0; width: 50%; height: 5px; border-right: 1px solid #999;} .treevertical ul:before {top: -4px;} .treevertical ul li:not(:only-child):before {border-top: 1px solid #999;} .treevertical ul li:not(:only-child):first-child:before { right: 0; left: auto; border-left: 1px solid #999; border-right: none;} .treevertical ul li:not(:only-child):first-child:before, .treevertical ul li:not(:only-child):last-child:before { width: calc(50% + .5em/2); } .treevertical ul li:after {border: none;} .treevertical ul li:not(:last-child):not(:first-child):after { width: 100%; border-top: 1px solid #999; }

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

Как сделать горизонтальное выпадающее меню 1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

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

• добавляется вложенный список
  или .

  Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
  — для элемента списка, в который вложен выпадающий список: li {position: relative;} ;
  — для выпадающего меню ul {position: absolute;} , а также значения left и top .

  Для наглядности и удобства форматирования добавим основному меню класс topmenu , выпадающему — submenu .

  Скрыть выпадающее меню можно несколькими способами:
  1) display: none;
  2) visibility: hidden;
  3) opacity: 0;
  4) transform: scaleY(0);
  5) с помощью библиотеки jQuery.

  Способ 1. {display: none;}

  Выпадающее меню скрывается с помощью.submenu {display: none;} , при наведении показывается с помощью.topmenu li:hover .submenu {display: block;} .

  Способ 2. {visibility: hidden;}

  Меню скрывается с помощью.submenu {visibility: hidden;} , показывается — .topmenu li:hover .submenu {visibility: visible;} .

  Способ 3. {opacity: 0;}

  Меню скрывается с помощью.submenu {opacity: 0;} , показывается — .topmenu li:hover .submenu {opacity: 1;} . Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden; , а при наведении меняем на visibility: visible; .

  Способ 4. {transform: scaleY(0);}

  Меню скрывается с помощью.submenu {transform: scaleY(0);} , показывается — .topmenu li:hover .submenu {transform: scaleY(1);} . Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для.submenu {transform-origin: 0 0;} , т.е. из верхнего левого угла.

  Способ 5. С помощью jQuery $(".five li ul").hide(); // скрываем выпадающее меню $(".five li:has(".submenu")").hover(function(){ $(".five li ul").stop().fadeToggle(300);} /* отбираем элемент списка, который содержит элемент с классом.submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */); 2. 3D выпадающее меню

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

  • Home
  • Shop
  • Blog
    • Category
    • Author
    • Archive
    • Tags
  • Portfolio
    • Category
    • Author
    • Archive
    • Tags
  • Contact
  * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { display: block; text-decoration: none; outline: none; transition: .4s ease-in-out; } .topmenu { backface-visibility: hidden; background: rgba(255,255,255,.8); } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { font-family: "Exo 2", sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; } .down:after { content: "\f107"; margin-left: 8px; font-family: FontAwesome; } .topmenu li a:hover { color: #E6855F; } .submenu { background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index: 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; transition: .6s ease-in-out; } .topmenu > li:hover .submenu{ visibility: visible; opacity: 1; transform: perspective(600px) rotateX(0deg); } .submenu li a { color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: "Kurale", serif; }
  3. Разворачивающееся выпадающее меню с логотипом

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

  Лого

  • Главная
  • О нас
    • Производство
    • Магазин
    • Сервис
  • Проекты
  • Контакты
  * { box-sizing: border-box; } body { margin: 0; background: #f2f2f2; } header { background: white; text-align: center; } header a { text-decoration: none; outline: none; display: block; transition: .3s ease-in-out; } .logo { color: #D5B45B; font-family: "Playfair Display", serif; font-size: 2.5em; padding: 20px 0; } nav { display: table; margin: 0 auto; } nav ul { list-style: none; margin: 0; padding: 0; } .topmenu:after { content: ""; display: table; clear: both; } .topmenu > li { width: 25%; float: left; position: relative; font-family: "Open Sans", sans-serif; } .topmenu > li > a { text-transform: uppercase; font-size: 14px; font-weight: bold; color: #404040; padding: 15px 30px; } .topmenu li a:hover { color: #D5B45B; } .submenu-link:after { content: "\f107"; font-family: "FontAwesome"; color: inherit; margin-left: 10px; } .submenu { background: #273037; position: absolute; left: 0; top: 100%; z-index: 5; width: 180px; opacity: 0; transform: scaleY(0); transform-origin: 0 0; transition: .5s ease-in-out; } .submenu a { color: white; text-align: left; padding: 12px 15px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.1); } .submenu li:last-child a { border-bottom: none; } .topmenu > li:hover .submenu { opacity: 1; transform: scaleY(1); }
  4. Увеличивающееся выпадающее меню

  Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера.submenu {transform: scale(.8);} , при наведении размер увеличивается до.topmenu > li:hover .submenu {transform: scale(1);} .

  • Home
  • Shop
  • Blog
    • Category
    • Author
    • Archive
    • Tags
  • Portfolio
    • Category
    • Author
    • Archive
    • Tags
  • Contact
  * { box-sizing: border-box; } body { margin: 0; background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) } nav { background: white; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; outline: none; display: block; transition: .4s ease-in-out; } .topmenu { text-align: center; padding: 10px 0; } .topmenu > li { display: inline-block; position: relative; } .topmenu > li:after { content: ""; position: absolute; right: 0; width: 1px; height: 12px; background: #d2d2d2; top: 16px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); } .topmenu > li:last-child:after { background: none; box-shadow: none; } .topmenu > li > a { padding: 12px 26px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: "Exo 2", sans-serif; } .topmenu li a:hover { color: #c0a97a; } .submenu { position: absolute; left: 50%; top: 100%; width: 210px; margin-left: -105px; background: #fafafa; border: 1px solid #ededed; z-index: 5; visibility: hidden; opacity: 0; transform: scale(.8); transition: .4s ease-in-out; } .submenu li a { padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: "Kurale", serif; } .topmenu > li:hover .submenu { visibility: visible; opacity: 1; transform: scale(1); }
  5. Подъезжающее выпадающее меню

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

  • Home
  • Shop
  • Blog
    • Category
    • Author
    • Archive
    • Tags
  • Portfolio
    • Category
    • Author
    • Archive
    • Tags
  • Contact
  @import url("https://fonts.googleapis.com/css?.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; } body:before { content: ""; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background: linear-gradient(45deg, rgba(0,0,0,0), rgba(255,255,255,.8)); } nav { text-align: center; padding: 40px 0 0; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; display: block; color: #222; } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { position: relative; padding: 10px 15px; font-family: "Kaushan Script", cursive; font-size: 1.5em; line-height: 1; letter-spacing: 3px; } .topmenu > li > a:before { content: ""; position: absolute; z-index: 5; left: 50%; top: 100%; width: 10px; height: 10px; background: white; border-radius: 50%; transform: translate(-50%, 20px); opacity: 0; transition: .3s; } .topmenu li:hover a:before { transform: translate(-50%, 0); opacity: 1; } .submenu { position: absolute; z-index: 4; left: 50%; top: 100%; width: 150px; padding: 15px 0 15px; margin-top: 5px; background: white; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-sizing: border-box; visibility: hidden; opacity: 0; transform: translate(-50%, 20px); transition: .3s; } .topmenu > li:hover .submenu { visibility: visible; opacity: 1; transform: translate(-50%, 0); } .submenu a { font-family: "Libre Baskerville", serif; font-size: 11px; letter-spacing: 1px; padding: 5px 10px; transition: .3s linear; } .submenu a:hover {background: #e8e8e8;}

  Очень часто при регистрациях или анкетирования на сайтах, вас просят сделать некий выбор из выпадающего списка . Например выбрать вашу страну из множества других стран. Все это разные элементы формы, они могут быть и по разному оформлены: от простого 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 нужную иконку, обозначающую "выбор" и копируем её код.

  
  

  

  
  .box::before {
  content: "\f150";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 28px;
  background: #da00e0;
  pointer-events: none;
  }

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

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

  Сегодня мы разберем, как создавать выпадающие (раскрывающиеся) списки , в том числе со множественным выбором, при помощи select и option, каким образом сконструировать текстовое поле посредством textarea, а также поговорим о возможности расширения функциональности форм путем применения тегов fieldset, label и legend .

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

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

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

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

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

  Option Textarea Label Fieldset Legend

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

  Option Textarea Label Fieldset Legend

  Option Textarea Label Fieldset Legend

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

  Option Textarea Label Fieldset Legend

  Option Textarea Label Fieldset Legend

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

  Выберите из списка Option Textarea Label Fieldset Legend

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

  Выберите из списка Option Textarea Label Fieldset Legend

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

  Выберите из списка Option Textarea Label Fieldset Legend

  Выберите из списка Option Textarea Label Fieldset Legend

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

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

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

  Выберите из списка Option Textarea Label Fieldset Legend

  Option Textarea Label Fieldset Legend

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

  Option Textarea Label Fieldset Legend

  Option Textarea Label Fieldset Legend

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

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

  Тег Textarea Тег Label Тег Fieldset Тег Legend

  Тег Textarea Тег Label Тег Fieldset Тег Legend

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

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

  Option Textarea Label Fieldset Legend

  Option Textarea Label Fieldset Legend

  Если присутствует атрибут multiple, то есть возможность выделения более одного элемента:

  Option Textarea Label Fieldset Legend

  Option Textarea Label Fieldset Legend

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

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

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

  Option Textarea Label Fieldset Legend

  Option Textarea Label Fieldset Legend

  То же самое, но с multiple и size="7" тега select:

  Option Textarea Label Fieldset Legend

  Option Textarea Label Fieldset Legend

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

  Option Textarea Label Fieldset Legend

  Option Textarea Label Fieldset Legend

  Небольшой видеоролик будет здесь как нельзя кстати:

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

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

  Введите текст:

  Введите текст:

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

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

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

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

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

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

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

  Введите текст:

  Введите текст:

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

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

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

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

  Имеет всего два параметра : on (включен) и off (выключен). Вот пример кода:

  Введите текст:

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

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

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

  Введите текст:

  Введите текст:

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

  Введите текст:

  Введите текст:

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

  Введите текст:

  Введите текст:

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

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

  Неактивное текстовое поле

  Сегодня хочу представить небольшой «рецепт» создания списка на CSS. Никакого JQuery, никакого CSS3 — только старый, добрый, кроссбраузерный CSS. Пример достаточно простой, поэтому опытным товарищам, возможно, будет неинтересно. Будем реализовывать выпадающий список с социальными кнопками.
  

  Итак, не будем долго рассуждать, перейдем сразу к делу

  HTML Поделись записью
  • Facebook
  • Twitter
  • Google Plus
  • ВКонтакте
  • RSS

  Я сознательно опускаю общие моменты, вроде подключения стилей, чтобы код не разрастался. Внизу страницы я дам ссылку на исходники — там все есть.
  Что у нас в HTML — обычный список и необычный заголовок. Его необычность в том, что сделан он гиперссылкой, которая позволяет отследить событие :hover , то есть наведение. Выпадающий список будет работать при наведении курсора на заголовок.

  CSS

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

  /*Сбросим отступы*/ .droplink ul,.droplink h3,.droplink h3 a{ padding:0;margin:0 } /*Базовая обертка*/ .droplink { width:200px; position:absolute; margin:10px 0 0 25px } /*Стиль блока при наведении*/ .droplink:hover{ height:auto; background-color:#3E403D; border:solid 1px #3A3C39 } /*Заголовок в обычном состоянии*/ .droplink h3 a{ text-align:center; width:100%; display:block; padding:12px 0px; color:#999; text-decoration:none } .droplink h3 a img{border:none} /*Стиль для заголовка при наведении*/ .droplink:hover h3 a { color:#FFF; font-weight:bold; position:absolute }

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

  /*Скрываем список без наведения*/ .droplink ul{ list-style:none; display:none } /*Отображаем список при наведении*/ .droplink:hover ul{ display:block; margin-top:40px } .droplink li{display:block}

  Этот код уже поинтереснее и показывает, как ведет себя выпадающий список при наведении курсора. В обычном состоянии стоит display:none, то есть он не отображается. При наведении — показываем его блоком. Вот и весь секрет. Теперь немного оформим элементы списка и вставим иконки:

  /*Стиль элемента списка*/ .droplink li a{ padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px; background-repeat:no-repeat; background-position: 10px 3px } /*Стиль элемента при наведении*/ .droplink li a:hover{ background-color:#999 } /*Иконки*/ .facebook a {background-image:url("icons/facebook.png")} .twitter a {background-image:url("icons/twitter.png")} .vk a {background-image:url("icons/vk.png")} .rss a {background-image:url("icons/rss.png")} .gplus a {background-image:url("icons/gplus.png")}

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

  Если необходимо, чтобы список «перекрывал» текст под ним при наведении — смотрите в сторону z-index .

  Если что-то непонятно или не получается — спрашивайте в комментариях или воспользуйтесь кнопкой «Отправить сообщение», она там —>

  
  
  

  Похожие материалы:

  1. Выставка работ кузьмы петрова-водкина открылась в русском музее
  2. Возрождение и современность
  3. Инструкция: как правильно заполнить СЗВ-М на учредителя без зарплаты Нужно ли сдавать сзв м на учредителей
  4. Этнопсихология: межэтнические отношения Малые народы Дагестана