Элемент <textarea>...</textarea> используется вместо элемента <input type="text">, когда нужно создать большие текстовые поля.
Текст, отображаемый как исходное значение, помещается внутрь тега.
Размеры поля устанавливаются при помощи атрибутов:
· cols – размеры по горизонтали;
· rows – размеры по вертикали.
· Высоту поля можно задать свойством height.
Все размеры считаются исходя из размера одного символа моноширинного шрифта.
Текстовая метка — <label>
Так как элементы формы сами по себе не очень описательны, им, как правило, предшествует текстовая метка.
В то время как placeholder уже обеспечивает некоторую подсказку о том, какое ожидается содержание, метки имеют преимущество оставаясь видимыми в любое время и могут использоваться с другими элементами формы, такими как флажки или переключатели.
Хотя вы можете применять короткие абзацы для описания элементов формы, использование <label> является семантически более правильным, потому что они существуют только в формах.
<label> также может быть связан с определённым элементом формы с помощью атрибута for, соответствующему значению id у поля, в таком случае, при щелчке по метке фокус переходит к текстовому полю и помещает курсор внутрь него.
Флажки
Флажки — это элементы формы, которые имеют только два состояния: включено или выключено. Они в основном позволяют пользователю сказать: «Да» или «Нет».
<input type="checkbox">
Поскольку может оказаться сложно щёлкнуть по небольшому флажку, рекомендуется поместить флажок и его описание внутрь <label>.
<label>
<input type="checkbox"> Я согласен с условиями
</label>
Теперь, вы можете щёлкнуть по тексту «Я согласен с условиями» и флажок переключится.
По умолчанию флажок выключен. Если нужно активировать, используем атрибут checked.
<input type="checkbox" checked>
Переключатели
Можно предоставить список вариантов на выбор с помощью переключателей.
Для работы этого элемента формы, ваш HTML-код должен сгруппировать список переключателей вместе. Это достигается с помощью одного и того же значения атрибута name=”…”.
<label>
<input type="radio" name="status"> Холост
</label>
<label>
<input type="radio" name="status"> Женат
</label>
<label>
<input type="radio" name="status"> Разведён
</label>
Поскольку все переключатели используют одинаковое значение атрибута name (в данном случае значение status), выбор одного из вариантов отменит все остальные.
Переключатели являются взаимоисключающими.
Разница между переключателями и флажками
Хотя флажок существует сам по себе, переключатели могут появляться только в виде списка (что означает, по меньшей мере два варианта).
Кроме того, щелчок по флажку является произвольным, в то время как выбор одного из переключателей является обязательным. В конце концов, всегда выбирается один из переключателей.
Выпадающее меню
Если количество вариантов для выбора занимает слишком много места, вы можете воспользоваться выпадающими меню <select>.
Элемент <select>…</select> отвечает за создание контейнера для выпадающие меню, а элемент <option>…</option> за варианты выбора.
<select>
<option>Январь</option>
…
<option>Декабрь</option>
</select>
Они работают подобно переключателям, отличается только компоновка.
Множественный выбор из выпадающего меню
Добавив атрибут multiple, можно предоставить выбор нескольких вариантов.
<select multiple >
<option>Январь</option>
…
<option>Декабрь</option>
</select>
Несколько вариантов выбираются посредством удержания Ctrl (или ⌘) и щелчка. Это может быть хорошей альтернативой применению нескольких флажков в строке.
Кнопки, куда без них?
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По ним сразу становится понятно, единственное что с ними можно делать — это нажимать на них.
Кнопку на веб-странице можно создать 2 способами — элементом <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> нельзя вкладывать внутрь другого.
| Атрибуты кнопок < input > и <button> | |
| Атрибут | Значение / описание |
| name | Имя кнопки, предназначено для того, чтобы обработчик формы мог её идентифицировать. |
| disabled | Блокирует кнопку и не позволяет на неё нажимать. |
| form | Идентификатор формы для связывания кнопки с элементом <form>. |
| type | Для обычной кнопки значением является button. |
| value | Надпись на кнопке. |
| autofocus | Кнопка получает фокус после загрузки документа. |
Дополнительно про атрибуты <button>:
1. Атрибут type не используется, ведь и так понятно, что это кнопка;
2. В отличие от кнопки <input> атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то <img> добавляется внутрь <button>.