Многострочный текст
Этот элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.
Синтаксис создания поля следующий.
Между тегами можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| cols | Ширина поля в символах. |
| disabled | Блокирует доступ и изменение элемента. |
| maxlength | Максимальное число символов текста, которое можно ввести. |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| readonly | Устанавливает, что поле не может изменяться пользователем. |
| rows | Высота поля в строках текста. |
| wrap | Параметры переноса строк. |
Создание поля многострочного текста показано в примере 6.1.
Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).
Пример 1. Текстовое поле
HTML5 IE Cr Op Sa Fx
Результат примера в браузере Chrome показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
Дополнительно поле может находиться в двух состояниях — блокированном и только для чтения. Спецификация HTML5 не определяет вид поля и текста в подобных состояниях, поэтому браузеры по-разному его отображают (рис. 2).
 |  |
| Internet Explorer | Opera |
 |  |
| Chrome | Firefox |
Текст внутри блокированного поля нельзя выделить и добавить, также содержимое такого поля не отправляется формой на сервер. Текст внутри поля для чтения доступен для копирования, но его нельзя отредактировать. В примере 2 показан способ создания поля для чтения.
Пример 2. Поле для чтения
HTML5 IE Cr Op Sa Fx
Учтите, что поле для чтения по своему виду не отличается от обычного текстового поля, но пользователь не сможет в него ничего добавить. Так что используйте его осмотрительно, чтобы не вводить людей в заблуждение.
Многострочное поле Textarea
Многострочное поле — это поле ввода, которое позволяет работать с несколькими строками текста.
Когда использовать
Используйте многострочное поле для ввода длинных строк и больших текстов. Например, для паспортных данных, места рождения или комментария пользователя. Если значение, которое вводит пользователь, чаще всего состоит из 1–3 слов, следует использовать обычное поле ввода.
Название
Требования к названию многострочного поля такие же, как и у однострочного. Если назначение многострочного поля очевидно, то название можно разместить внутри поля в виде подсказки:
Описание работы
По мере ввода высота поля автоматически увеличивается и уменьшается так, что всегда свободна одна строка. Это нужно, чтобы пользователь видел весь текст без прокрутки, и при этом по умолчанию поле было бы не очень высоким.
Пользователь вводит символ на последней свободной строке, добавляется ещё одна строка:
При достижении 15 строк (чуть больше половины экрана) поле перестает расти и появляется полоса прокрутки.
Счетчик количества введенных символов
Состояния поля
Поле, в котором есть счетчик, ничем не отличается от обычного многострочного поля:
Когда поле получает фокус, появляется счетчик символов, чтобы подсказать какой длины будет текст:
На заблокированом поле счетчик пропадает:
Красная рамка у поля появляется в зависимости от вида валидации.
Введено максимальное количество символов
Достигнув максимального количества символов счетчик не меняет состояние:
Превышено максимальное количество символов
Когда длина текста превышает допустимую, счетчик становится красным и начинает отсчет количества символов введенных сверх лимита:
Подсказка к счетчику
Помогите пользователю понять для чего введено ограничение — клик по иконке рядом со счетчиком покажет подсказку:
Размер и расположение
Минимальная высота многострочного поля ввода — 3 строки, чтобы пользователю было понятно, что это не инпут, и можно вводить большой текст. Если в форме много таких полей, можно ради экономии пространства уменьшить высоту каждого поля до 2 строк.
Правильно задавать высоту поля через html-атрибут «rows». Неправильно задавать высоту через css-атрибут «height», потому что при изменении размера шрифта средствами браузера высота поля не увеличится, и им будет неудобно пользоваться.
Ширина поля должна быть в пределах 30–80 символов, то есть около 250–600 px. Узким полем неудобно пользоваться из-за частого переноса строк. Широкое поле допустимо только в WYSIWYG-редакторе.
Фокус и работа с клавиатурой
При клике по полю и при переходе табом поле выглядит одинаково: появляется синяя рамка, которая сохраняется до потери фокуса.
Валидация
Поле с ошибкой подсвечивается красной рамкой.
О поведении полей ввода с ошибками читайте в гайде по валидации.
Урок 11. HTML формы
Формы дают возможность пользователям вводить информацию. Вам наверно, не раз встречались всевозможные тесты, опросы, голосования. Для того, чтобы все это сделать на своих web-страницах и нужны формы.
Здесь следует заметить, что html-формы сами по себе только позволяют вводить информацию, а вот обрабатывать ее HTML не умеет (это все-таки язык разметки, а не программирования). Для обработки информации используются такие языки, как javascript, php и другие.
Но всему свое время, пока мы научимся добавлять html-формы на свои страницы, а обрабатывать информацию из них будем учиться в других уроках, посвященных, например, javascript.
Простое однострочное текстовое поле, в которое можно вводить и редактировать текст. Задается тегом
Возможны еще два параметра:
Текстовое поле для ввода пароля
Это такое же текстовое поле, как и предыдущий элемент. Разница только в том, что вводимый текст не отображается, вместо него появляются специальные символы, например звездочки. Чаще всего используется при вводе паролей. Все параметры такие же, как у простого текстового поля, кроме параметра type=»password».
Попробуйте ввести что-нибудь в этом поле.
Вы, конечно, встречали подобный элемент:
Рассмотрим его параметры:
В отличии от флажков, можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type=»radio», все остальные такие же, как у флажков.
Существует четыре вида кнопок:
Если на форме несколько кнопок, то они должны иметь разные названия.
Поле для ввода имени файла, сопровождаемое кнопкой Browse (Обзор), при щелчке по которой открывается окно просмотра дерева папок компьютера, где можно выбрать нужный файл. Выбранный файл присоединяется к содержимому формы при отправке на сервер.
Многострочное текстовое поле
Для объемных текстов, например для почтовых сообщений, удобно использовать именно этот элемент. Он создается тегами и имеет следующие параметры:
Попробуйте ввести текст и посмотрите на разницу в значениях параметра wrap.
Все элементы формы можно связать с их надписями при помощи элемента и его параметра for, значением которого является имя элемента, с которым связываем надпись. Например:
Стоит ли его использовать решать вам. Мне кажется, что без него код короче, а результат тот же.
Ваша первая HTML форма
Первая статья в данной главе предоставит вам первый опыт создания веб-форм, в том числе проектирование простой формы, её реализацию с использованием HTML-элементов управления формой и других HTML-элементов, добавление стилей через CSS и описание того, как данные из формы отсылаются на сервер. Мы более подробно остановимся на каждой из этих подтем далее в статье.
| Необходимые знания: | Базовое представление о компьютерах и базовое понимание HTML. |
|---|---|
| Цель: | Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях. |
Что такое Веб-форма?
Веб-формы являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением. Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента в список или открытие и закрытие элемента интерфейса).
В элементах управления форм можно задать правила, указывающие на определённый формат данных или значений, которые могут быть введены (валидация форм), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.
Проектирование формы
Перед тем, как начать программировать, всегда лучше остановиться и подумать о вашей форме. Создание быстрого наброска поможет определить верный набор данных, которые вы хотите получить от пользователя. С точки зрения UX, удобства использования интерфейса, важно помнить о том, что чем длиннее ваша форма, тем больше риск потерять пользователей. Сделайте форму краткой и лаконичной: спрашивайте только о той информации, которая вам действительно необходима.
Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:
В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.
Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.
Активное обучение: Реализация HTML-формы
Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: :
HTML Урок 16 Формы
HTML Формы используются для различных форм ввода пользовательской информации.
 |
|
|
