Множественный выбор из выпадающего меню

Если добавить атрибут multiple, вы можете предоставить возможность выбрать несколько вариантов.

<select multiple >

<option>Январь</option>

<option>Февраль</option>

…

<option>Декабрь</option>

</select>

Несколько вариантов выбираются посредством удержания Ctrl (или ⌘) и щелчка. Это может быть хорошей альтернативой применению нескольких флажков в строке.

Кнопки, куда без них?

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

Кнопку на веб-странице можно создать двумя способами — с помощью элемента <input> или <button>.

Кнопка через <input>

Синтаксис такой кнопки очень прост, и выглядит так:

<input type="button" value=”Нажми меня нежно”>

Примите во внимание, что учитываются все пробелы в надписи на кнопке, в отличие от обычного текста HTML, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину. Но правильнее, конечно же, задавать вид кнопки через CSS.

Для таких кнопок есть ряд обязательных правил:

· <input> нельзя вкладывать внутрь ссылки <a>;

· <input> нельзя вкладывать внутрь кнопки <button>;

· значение атрибута value не может быть пустым.

Кнопка через <button>

Второй способ создания кнопки основан на использовании элемента <button>. Он по своему действию напоминает результат, получаемый с помощью <input>. Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, включая изображения и даже таблицы.

Синтаксис создания такой кнопки следующий.

<button>Кнопка с текстом</button>

<button>

<img src="image/umbrella.gif" alt="" style="vertical-align:middle">

Кнопка с рисунком

</button>

В данном примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого <button>, но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования <input>, ширину кнопки изменить не удастся.

Для <button> также есть ряд ограничений:

· <button> нельзя вкладывать внутрь ссылки <a>;

· один <button> нельзя вкладывать внутрь другого.

Дополнительно про атрибуты <button>:

1. Атрибут type не используется, ведь и так понятно, что это кнопка;

2. В отличие от кнопки <input> атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то <img> добавляется внутрь <button>.