Раскрывающийся текст css: Раскрывающиеся блоки с скрытым содержанием с помощью CSS3 – Dobrovoimaster

Большинство элементов добавляется в форму с помощью элемента <input>. Назначение и внешний вид элемента <input> меняются в зависимости от значения атрибута type.

Элемент <textarea> (текстовая область)

Для создания больших текстовых полей применяется элемент <textarea>, который в отличие от других элементов формы не является пустым, а следовательно, для него должны быть указаны открывающий и закрывающий теги. Текст, вводимый по умолчанию, находится между открывающим и закрывающим тегами. Размеры поля устанавливаются с помощью атрибутов cols и rows.
cols — число столбцов видимого текста:

<textarea name="pole" cols="20">

rows — число строк видимого текста:

<textarea name="pole" cols="20" rows="15">

При этом, если пользователю потребуется ввести в текстовую область больше строк текста, чем указано с помощью атрибута rows, в текстовой области появится вертикальная прокрутка.
При разработке форм для новых проектов используйте правила CSS для установки ширины и высоты текстовой области <textarea>. Однако при просмотре исходного кода сайтов вы еще часто можете встретить атрибуты cols и rows.
При необходимости можно запретить пользователю изменять текст в текстовом поле, например, если поле используется для представления какого-нибудь договора. Такой запрет вводится с помощью атрибута readonly.
В следующем примере представлен вариант создания больших текстовых полей. Первое поле предназначено только для чтения, а во второе поле можно ввести текст:

Пример: Текстовая область (textarea)

Ознакомтесь с соглашеием:
Условия нашего соглашения…

Ваше мнение о этом соглашении:
Введите свой комментарий…

<form action="" method="POST">
<p>Ознакомьтесь с соглашеием:</p> 
  <textarea cols="24" rows="3" name="about" readonly>
  Условия нашего соглашения…</textarea><br/>
<p>Ваше мнение о этом соглашении:</p>
  <textarea name="comments" cols="24" rows="4">
  Введите свой комментарий…</textarea>
</form>

Раскрывающийся список (select)

Элемент <select> создает на веб-странице раскрывающийся список (также называемый раскрывающимся или выпадающим меню), позволяющий выбрать одно значение из множества возможных.
Как и в рассмотренных других элементах формы, элементу <select> назначается уникальное имя, с помощью атрибута name. Элемент <select> работает в паре с элементом <option>, создающим меню. Элемент <option> задается для каждого пункта меню. Текст, расположенный между тегами <option> и </option>, будет выведен в окне браузера как пункт раскрывающегося списка.
Атрибут value используется в каждом элементе <option> для установки значения, которое будет отправлено на сервер вместе с именем выбранного элемента. Указав для элемента <option> атрибут selected, вы сделаете его значением по умолчанию для данного списка. При загрузке страницы такие элементы будут выделены. Если атрибут selected не установлен, то при загрузке страницы будет отображен первый вариант ответа из созданного списка. Если пользователь не выберет другой пункт списка, то на сервер будет отправлен пункт, отмеченный атрибутом selected по умолчанию:

Пример: Раскрывающийся список (select)

Выберите вариант

<form action="" method="POST">
<p>Выберите вариант</p>
  <select name="form_select">
    <option value="Значение 1">Первый</option>
    <option value="Значение 2">Второй</option>
    <option  selected="selected" value="Значение 3">Третий</option>
    <option value="Значение 4">Четвертый</option>
    <option value="Значение 5">Пятый</option>
  </select>
</form>

Прокручиваемые списки

По умолчанию с помощью тега <select> создается раскрывающийся список, в котором изначально видно только одно значение. Для создания прокручиваемого списка укажите число видимых строк, введя соответствующее значение атрибута size. Если количество элементов списка превышает значение, указанное в атрибуте size, справа появляется полоса прокрутки. Несмотря на то, что атрибут size позволяет отобразить сразу несколько пунктов списка, посетитель может выбрать из списка по-прежнему только один пункт.
Чтобы посетитель мог выбрать из списка одновременно несколько элементов (с помощью клавиши Shift или Ctrl), нужно использовать атрибут multiple. Как и в случае с раскрывающимся списком, указав в элементе <option> атрибут selected, вы сделаете его значением по умолчанию. Если для тега <select> или для <option> установить уже известный вам атрибут disabled, то в первом случае становится отключенным весь список, а во втором — только отдельный пункт списка.
Пример прокручиваемого списка, в котором выбраны сразу несколько элементов:

Пример: Прокручиваемый список

<p>Выберите вариант</p>
  <select name="form_select" size="5" multiple="multiple">
    <option value="Значение 1">Первый вариант</option>
    <option value="Значение 2">Второй вариант</option>
    <option selected="selected" value="Значение 3">Третий вариант</option>
    <option selected="selected"value="Значение 4">Четвертый вариант</option>
    <option value="Значение 5">Пятый вариант</option>
    <option value="Значение 6">Шестой вариант</option>
  </select>

Группировка пунктов списка (optgroup)

Если в списке находится большое количество пунктов, то посетителю довольно сложно найти нужный пункт. В этом случае можно воспользоваться элементом <optgroup>, предназначенным для создания смысловых групп пунктов списка. Элементы <option> помещаются внутрь контейнера <optgroup>, а заголовок группы указывается в атрибуте label.
Пример группировки пунктов списка с заголовками:

Пример: Создание списка с заголовками

<p>Желаемая работа (можно выбрать несколько): </p>
      <select name="job" size="8" multiple="multiple" >
        <optgroup label="Журналистика">
          <option value="isk">Искусство</option>
          <option value="ecol">Экология</option>
          <option value="tur">Туризм</option>
        </optgroup>
        <optgroup label="Программирование">
          <option value="html">HTML5</option>
          <option value="php">PHP</option>
          <option value="del">Delphi</option>
        </optgroup>
        <optgroup label="Создание сайтов">
          <option value="diz">Дизайн</option>
          <option value="verst">Верстка</option>
        </optgroup>
        <optgroup label="Переводчик">
          <option value="eng">Английский</option>
          <option value="fr">Французский</option>
          <option value="kit">Китайский</option>
        </optgroup>
        <optgroup label="Строительство">
          <option value="zd">Здания</option>
          <option value="most">Мосты</option>
          <option value="road">Дороги</option>
        </optgroup>
          </select>

Элемент <buttоn>

В отличие от кнопок отправки данных и сброса, в самой кнопке Ьuttоn нет встроенных функций. Благодаря элементу можно сочетать на кнопке текст и изображение, располагая их внутри контейнера <button>.
В следующем примере на кнопке отображается содержимое элемента <button> — текст и изображение:

Пример: Использование кнопки <button>

<p>Добавить email в список:</p> 
<input type="text" name="email" value="Ваш email">
<button>
<img src="images/add.gif" alt="add"> Добавить</button>

HTML5 Элемент <datalist>

Элемент <datalist> позволяют предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. Но если ни один из них не подходит, пользователь может ввести собственный текст. Значение, заданное для атрибута list (planet), аналогично идентификатору id элемента <datalist>. Это позволяет ассоциировать <datalist> с соответствующим полем ввода:

Пример: Использование элемента <datalist>

<form action="">
  <p>Выбор планеты: <input list="planet"></p>
  <datalist>
    <option value="Солнце">
    <option value="Земля">
    <option value="Меркурий">
    <option value="Марс">
    <option value="Венера">
  </datalist> 
</form>

Метки элементов формы (label)

У каждого элемента формы может быть своя пояснительная надпись, или метка, создаваемая при помощи элемента <label> и повышающая доступность, создавая четкие семантические связи между компонентами формы.
Использование элемента <label> при работе с переключателями и флажками — самый распространенный вариант, однако это не ограничение. С таким же успехом можно связать текст с любым элементом формы, и при щелчке кнопкой мыши на тексте связанный элемент автоматически берется в фокус. Связывание текста с элементом формы осуществляется просто: присваиваете атрибуту for элемента <label> значение такое же, как значение атрибута id у элемента, с которым связан <label>. Соответствие значений атрибутов for и id связывает два элемента вместе, что позволяет пользователям нажать на <label> и передать фокус нужному полю формы:

<input type="checkbox" name="form_checkbox" value="1">
<label for="id_checkbox">Наша метка</label>

Использование элемента <label> для создания меток предпочтительнее обычного текста. В первую очередь из-за удобства для конечного пользователя, ведь при применении элемента <label> установить/снять флажок можно не только щелчком на поле флажка, но и на его метке — пояснительном тексте:

Пример: Использование элемента <label>

Элементы формы

<ul>
    <li><a href=#>Menu 1</a>
        <ul>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 3</a>
        <ul>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 4</a>
        <ul>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 5</a>
        <ul>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
        </ul>
    </li>
</ul>

body {
    font: 14px 'Verdana';
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}

ul.menu > li:hover > ul.submenu {
    display: block;
}

  <выбрать>
   Яблоки 
   Апельсины 
   Бананы 
  

  выбрать {
  семейство шрифтов: Cursive;
}  

  выбрать {
  размер шрифта: 32 пикселя;
}