HTML5-формы. Часть 1

HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.

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

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

До появления HTML5 веб-формы представляли собой набор нескольких элементов <input type="text">, <input type="password">, завершающихся кнопкой <input type="submit">. Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.

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

📷 РИС. 1. УЛУЧШЕННЫЕ ВЕБ-ФОРМЫ С ПОМОЩЬЮ HTML5

Создание HTML5-формы

Содержание:

Часть 1

1. Элемент <form>

2. Группировка элементов формы <fieldset>

3. Создание полей формы <input>

4. Текстовые поля ввода <textarea>

Часть 2

5. Раскрывающийся список <select>

6. Надписи к полям формы <label>

7. Кнопки <button>

8. Флажки и переключатели в формах

1. Элемент <form>

Основу любой формы составляет элемент <form>...</form>. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.

ТАБЛИЦА 1. АТРИБУТЫ ТЕГА <FORM>

Структура таблицы следующая: Атрибут - Значение / описание

accept-charset - Значение атрибута представляет собой разделенный пробелами список кодировок символов, которые будут использоваться для отправки формы, например, <form accept-charset="ISO-8859-1">.
action - Обязательный атрибут, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию.
В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение #.
Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись:
<form action="mailto:адрес вашей электронной почты" enctype="text/plain"></form>
*autocomplete - Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
on — означает, что поле не защищено, и его значение можно сохранять и извлекать,
off — отключает автозаполнение для полей форм.
enctype - Используется для указания MIME-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data". Указывается только в случае method="post".
application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как +, а специальный символ, например, такой как ! будет закодирован шестнадцатиричной форме как %21.
multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы.
text/plain — указывает на то, что передается обычный (не html) текст.
method - Задает способ передачи данных формы.
Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2. Имена и значения переменных присоединяются к адресу сервера после знака ? и разделяются между собой знаком &. Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn, пробел заменяется на +. Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет.
Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.
<form action="action.php" enctype="multipart/form-data" method="post"></form>
name - Задает имя формы, которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros".
*novalidate - Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения
target - Указывает окно, в которое будет направлена информация:
_blank — новое окно
_self — тот же фрейм
_parent — родительский фрейм (если он существует, если нет — то в текущий)
_top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм.

2. Группировка элементов формы

Элемент <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.

Каждой группе элементов можно присвоить название с помощью элемента <legend>, который идет сразу за тегом <fieldset>. Название группы проявляется слева в верхней границе <fieldset>. Например, если в элементе <fieldset> хранится контактная информация:

HTML

<form>
  <fieldset>
    <legend>Контактная информация</legend>
    <p><label for="name">Имя <em>*</em></label><input type="text" id="name"></p>
    <p><label for="email">E-mail</label><input type="email" id="email"></p>
  </fieldset>
<p><input type="submit" value="Отправить"></p>
</form>

📷 РИС. 2. ГРУППИРОВКА ЭЛЕМЕНТОВ ФОРМЫ С ПОМОЩЬЮ <FIELDSET>

ТАБЛИЦА 2. АТРИБУТЫ ТЕГА <FIELDSET>

Структура таблицы следующая: Атрибут - Значение / описание

disabled - Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера <fieldset>, отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — <fieldset disabled>.
form - Значение атрибута должно быть равно атрибуту id элемента <form> в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером.
name - Определяет имя, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id.

3. Создание полей формы

Элемент <input> создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.

С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width.

ТАБЛИЦА 3. АТРИБУТЫ ТЕГА <INPUT>

Структура таблицы следующая: Атрибут - Значение / описание

accept - Определяет тип файла, разрешенных для отправки на сервер. Указывается только для <input type="file">. Возможные значения:
file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif", accept=".pdf", accept=".doc"
audio/* — разрешает загрузку аудиофайлов
video/* — разрешает загрузку видеофайлов
image/* — разрешает загрузку изображений
media_type — указывает на медиа-тип загружаемых файлов.
alt - Определяет альтернативный текст для изображений, указывается только для <input type="image">.
*autocomplete - Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
on — означает, что поле не защищено, и его значение можно сохранять и извлекать,
off — отключает автозаполнение для полей форм.
*autofocus - Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
checked - Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio".
disabled - Отключает возможность редактирования и копирования содержимого поля.
*form - Значение атрибута должно быть равно атрибуту id элемента <form> в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы.
*formaction - Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image". Атрибут переопределяет значение атрибута action самой формы.
*formenctype - Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image". Варианты:
application/x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ +, специальные символы преобразуются в значения ASCII HEX)
multipart/form-data — символы не кодируются
text/plain — пробелы заменяются на символ +, а специальные символы не кодируются.
*formmethod - Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image". Переопределяет значение атрибута method формы. Варианты:
get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение
post — данные формы отправляются в виде http-запроса.
*formnovalidate - Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута.
*formtarget - Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image". Переопределяет значение атрибута target формы.
_blank — загружает ответ в новое окно/вкладку
_self — загружает ответ в то же окно (значение по умолчанию)
_parent – загружает ответ в родительский фрейм
_top – загружает ответ во весь экран
framename – загружает ответ во фрейм с указанным именем.
*height - Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image", например, <input type="image" src="img_submit.gif" height="50">. Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
*list - Является ссылкой на элемент <datalist>, содержит его id.Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
max - Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min. Работает со следующими типами полей: number, range, date, datetime, datetime-local, month, time и week.
maxlength - Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
*min - Позволяет ограничить допустимый ввод числовых данных минимальным значением.
*multiple - Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
name - Определяет имя, которое будет использоваться для доступа к элементу <form>, к примеру, в таблицах стилей css. Является аналогом атрибута id.
*pattern - Позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="[a-z]{3}-[0-9]{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
*placeholder - Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
readonly - Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
*required - Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
size - Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text, search, tel, url, email и password.
src - Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля <input type="image">.
*step - Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).

type

button — создает кнопку.
checkbox — превращает поле ввода во флажок, который можно установить или очистить, например,
[ ]У меня есть автомобиль
color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
date — позволяет вводить дату в формате дд.мм.гггг.
День рождения: дд.мм.гггг
datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.
День рождения — день и время: дд.мм.гггг --:--
email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.
E-mail: ______________
file — позволяет загружать файлы с компьютера пользователя.
Выберите файл: ______________
hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм. __________
number — предназначено для ввода целочисленных значений. Его атрибуты min, max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.
Укажите количество (от 1 до 5): ________
password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.
Введите пароль: ______________
radio — создает переключатель — элемент управления в виде небольшого кружка, который можно включить или выключить.
Вегетарианец: __
range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.
search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.
Поиск: ______________
submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста. ______________
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
Укажите время: --:--
url — поле предназначено для указания URL-адресов.
Главная страница: ______________
week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.
Укажите неделю: Неделя --, ----

value - Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
*width - Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.

4. Текстовые поля ввода

Элемент <textarea>...</textarea> используется вместо элемента <input type="text">, когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height. Все размеры считаются исходя из размера одного символа моноширинного шрифта.

ТАБЛИЦА 4. АТРИБУТЫ ТЕГА <TEXTAREA>

Структура таблицы следующая: Атрибут - Значение / описание

autofocus - Устанавливает фокус на нужном начальном текстовом поле автоматически.
cols - Устанавливает ширину через количество символов. Если пользователь вводит больше текста, появляется полоса прокрутки.
disabled - Отключает возможность редактирования и копирования содержимого поля.
form - Значение атрибута должно быть равно значению атрибута id элемента <form> в этом же документе. Определяет одну или несколько форм, которым принадлежит данное текстовое поле.
maxlength - Значение атрибута задает максимальное число символов для ввода в поле.
name - Задает имя текстового поля.
placeholder - Определяет короткую текстовую подсказку, которая описывает ожидаемое вводимое значение.
readonly - Отключает возможность редактирования содержимого поля.
required - Выводит сообщение о том, что данное поле является обязательным для заполнения.
rows - Указывает число, которое означает, сколько строк должно отображаться в текстовой области.
wrap - Определяет, должен ли текст сохранять переносы строк при отправке формы. Значение hard сохраняет перенос, а значение soft не сохраняет. Если используется значение hard, то должно указываться значение атрибута cols.

Продолжение в следующей статье!