Атрибуты полей форм

Главный атрибут, который задает поле — это атрибут type. Он принимает значение, указывающее на тип поля. В предыдущем уроке описано, какие значения может принимать атрибут type и каким полям они соответствуют.

<input type="text">

Следующий атрибут, который мы рассмотрели, также является обязательным и называется name. Его значение задает уникальное имя поля. Введенная пользователем информация передается обработчику в качестве значения переменной с именем поля. Атрибут name имеет значение для программистов, поэтому имя должно быть логичным.

<input type="text" name="name">

Атрибут value

Атрибут value позволяет присвоить элементу управления значение по умолчанию. Введя в поле значение по умолчанию, можно пояснить пользователю, какие данные и в каком формате вы хотите здесь видеть. Для флажков и радиокнопок определяет значение, которое будет передано на сервер, если кнопка выбрана. Оно будет состоять из имени кнопки и ее значения.

Пример: Атрибут value

Атрибут disabled

Атрибут disabled весьма полезен для ограничения доступа к некоторым полям формы на основании ранее введенных данных. Чтобы запретить изменение данных, в любое поле можно добавить атрибут disabled. При этом поле становится неактивным, т.е. щелчки на нем не приводят ни к каким действиям.

Пример: Атрибут disabled

Атрибут readonly

Атрибут readonly не позволяет пользователю изменять значения элементов формы, но, в отличие от атрибута disabled, такие поля их можно выделять. Это позволяет разработчикам устанавливать значения элементов формы в зависимости от ранее введенных данных с помощью сценариев.

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

Атрибут size

Атрибут size определяет ширину поля ввода текста (в качестве единицы измерения выступает количество видимых символов). Значение по умолчанию — 20.

Пример: Атрибут size

<form action="">
Ваше имя:<br>
<input type="text" name="firstname" value="Иван"><br>
Ваша фамилия:<br>
<input type="text" name="lastname" size="40">
</form>

Атрибут maxlength

Атрибут maxlength определяет количество символов, которое пользователь может ввести в поле ввода. При превышении этого количества браузер отреагирует на попытку ввода нового символа звуковым сигналом и не даст ввести очередной символ. Не следует путать этот атрибут с атрибутом size, который определяет количество видимых в поле символов. Например при запросе года вы можете ограничить количество символов, установив значение атрибута maxlength равным 4.

Пример: Атрибут maxlength

<form action="">
Ваше имя:<br>
<input type="text" name="firstname" value="Макс"><br>
Ваш год рождения:<br>
<input type="text" name="lastname" maxlength="4">
</form>

HTML5 Атрибуты

Атрибут placeholder

Первое усовершенствование, которое HTML5 вносит в Web-формы — это возможность использования замещающего текста (placeholder text) в поле ввода. Замещающий текст отображается внутри поля ввода до тех пор, пока поле не имеет фокуса ввода. Как только пользователь сфокусируется на поле и начнет ввод текста, замещающий текст исчезает.

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Заполняющий текст

Атрибут autofocus

Атрибут autofocus делает именно то, о чем говорит его название: как только страница загружается, он передает фокус ввода в конкретное поле ввода. Чтобы механизм автофокуса работал надежно, на странице должен быть только один атрибут autofocus. Если таких элементов будет несколько, браузер размещает курсор в последнем поле автофокуса.

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Автофокусировка на поле формы

Атрибуты min и mах

Атрибуты min и mах позволяют задать нижнюю и верхнюю границы для значений, которые могут вводиться в числовое поле формы, например, типы поля ввода — number, range, time, date, datetime, datetime-local, month, time или week.

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Атрибуты min и mах

<form action="action_form.php">
Введите дату до 2018-01-01:
<input type="date" name="date" max="2017-12-31"><br>
Введите дату после 2020-01-01:
<input type="date" name="date" min="2020-01-02"><br>
Выберите место (между 1 и 50):
<input type="number" name="number" min="1" max="50"><br>
<input type="submit">
</form>

Атрибут step

Атрибут step можно использовать с числовым значением ввода, чтобы определить точность возможных вводимых значений. По умолчанию приращение равно 1, но ему также можно присвоить любое числовое значение.

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Атрибут step

Атрибут required

Атрибут required указывает, что поле элемента формы обязательно к заполнению пользователем. Когда пользователь отправляет форму, браузер проверяет, не оставлены ли пустыми все обязательные поля. При необходимости он остановит отправку данных и выведет сообщение об ошибке. Это можно легко реализовать, добавляя атрибут required к элементам <input>, <select> или <textarea>.

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Атрибут required

Атрибут autocomplete

По умолчанию для всех полей формы включено автозаполнение (autocomplete="on"). В этом случае браузер помнит ваши пароли и благодаря автозаполнению поможет быстро зайти на посещаемые вами сайты. Однако если указать для атрибута autocomplete значение off, то такой возможности не будет. Вы можете отключить атрибут autocomplete как на уровне отдельных полей ввода, так и на уровне формы. Во втором случае допускается включить этот атрибут для отдельного поля, установив autocomplete="on".
Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Атрибут autocomplete

<form action="action_form.php" autocomplete="on">
  Ваше имя:<input type="text" name="firstname"><br>
  Ваша фамилия: <input type="text" name="lastname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>

Атрибут pattern

Спецификация HTML5 упростила процесс проверки формы, представив новые типы поля <input>: email, url и tel. Данные значения обеспечивают автоматическую валидацию. При любом несовпадении формата ввода данные типы поля будут выдавать ошибку, предотвращая отправку формы.
Атрибут pattern позволяет задавать наши собственные правила валидации значения поля <input> при помощи Регулярных Выражений (RegEx). И если значение введенное пользователем в поле не совпадает с заданным шаблоном, то выскачет ошибка. В нашем примере значение поля ввода логина должно содержать определенную последовательность латинских букв нижнего регистра и цифр: 3 буквы + 3 цифры. Обратите внимание на использование атрибута title для определения содержательного описания данных, вводимых пользователем. Теперь при попытке ввести данные, не соответствующие регулярному выражению, выводится сообщение об ошибке, в которое включается содержимое атрибута title.

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Проверка по регулярным выражениям

<form action="action_form.php">
  Ваш логин:<input type="text" name="username" placeholder="Username" pattern="[a-z]{3}[0-9]{3}" title="Логин должен содержать последовательно 3 латинских буквы нижнего регистра и 3 цифры">
<input type="submit">
</form>

Атрибут novalidate

Атрибут novalidate (от англ. "no validate" — «без проверки») отключает проверку (отправляемых на сервер) данных формы на корректность. Атрибут novalidate можно установить только к элементу form.

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Атрибут novalidate

<form action="action_form.php" novalidate>
  Ваш логин:<input type="text" name="username" placeholder="Username" pattern="[a-z]{3}[0-9]{3}"><br>
  E-mail: <input type="email" name="email" placeholder="Ваш email"><br>
<input type="submit">
</form>

Атрибут formnovalidate

Атрибут formnovalidate (от англ. "form no validate" — «не проверять форму») отключает проверку данных формы (перед отправкой на сервер) на корректность. Атрибут formnovalidate может быть применен к элементам <input> с типом submit или image.

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Атрибут formnovalidate

<form action="action_form.php">
  Ваш логин:<input type="text" name="username" placeholder="Username" pattern="[a-z]{3}[0-9]{3}"><br>
  E-mail: <input type="email" name="email" placeholder="Ваш email"><br>
<input type="submit"><br>
<input type="submit" formnovalidate value="Отправить без валидации">
</form>

Атрибут form

Атрибут form связывает элемент формы с элементом <form>. Это нужно в том случае, когда элемент формы лежит вне элемента <form>, но должен быть отправлен на сервер вместе с содержимым этого элемента <form>. Значение атрибута form должно быть равно атрибуту id элемента <form> в этом же документе.

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Атрибут form

<form  id="data" action="action_form.php">
  Ваш логин:<input type="text" name="username" placeholder="Username" pattern="[a-z]{3}[0-9]{3}"><br>
<input type="submit"><br>
</form>
<p>Поля "Ваш email" и "Ваш возраст" находятся за пределами формы</p>
  <input type="email" name="email" placeholder="Ваш email" form="data"><br>
  <input type="text" name="age" placeholder="Ваш возраст" form="data">

Атрибут formaction

Атрибут formaction (от англ. "form action" — «действие формы») определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними требуемые действия. Атрибут formaction по своему действию аналогично атрибуту action элемента <form>.
Атрибут formaction может применяться только с кнопкой отправки или изображения (type="submit" или type="image"). При отправке формы браузер сначала проверяет наличие атрибута formaction и если тот отсутствует, он продолжает искать в форме атрибут action.

Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Атрибут formaction

<form>
 Ваше имя:<input type="text" name="firstname"><br>
 Ваша фамилия: <input type="text" name="lastname"><br>
<input type="submit" formaction="action_form.php">
</form>

Атрибут formenctype

Атрибут / параметр

Атрибут formenctype указывает способ кодирования данных формы, отправляемых на сервер (только для форм с методом передачи данных method="POST"). Атрибут formenctype отменяет атрибут enctype элемента <form>.
Атрибут formaction может применяться только с кнопкой отправки или изображения (type="submit" или type="image").
Синтаксис:

<input type="submit" formenctype="application/­x-www-form-urlencoded | multipart/form-data | text/plain">

Значения атрибута formenctype

ЗначениеОписание
application/x-www-form-urlencodedКодирует данные формы отправляемые на сервер. Перед отправкой данных на сервер браузер кодирует все данные формы и объединяет их в одну строку, после чего полученную строку отправляет на сервер.
Символы кодируемые браузером:
  • пробелы преобразуются в символы «+» (плюс);
  • символы (кроме цифр и латинских букв) преобразуются в сочетание знака «%» (проценты) и соответствующий ASCII код символа;
  • разрыв строки преобразуется в символы «%0D%0A».
multipart/form-dataДанные не кодируются. Это значение применяется при отправке файлов.
text/plainПробелы заменяются знаком +, буквы и другие символы не кодируются.
Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Атрибут formenctype

<form action="action_form.php" method="post">
 Ваше имя:<input type="text" name="firstname"><br>
 Ваша фамилия: <input type="text" name="lastname"><br>
 Файл для заявки: <input type="file" name="file"><br>
<input type="submit" formenctype="multipart/form-data">
</form>

Атрибут formmethod

Атрибут formmethod указывает метод отправки данных формы на сервер. Атрибут formmethod переопределяет атрибут method элемента <form>.
Атрибут formaction может применяться только с кнопкой отправки или изображения (type="submit" или type="image").
Значение атрибута formmethod по умолчанию — get.
Синтаксис:

<input formmethod="get|post">

Значения атрибута formmethod

ЗначениеОписание
getОбъединяет данные формы в одну строку, присоединяет полученную строку к URL-адресу обработчика формы (указывается в атрибуте «action» или «formaction») и с помощью полученного URL-адреса передаёт данные формы на сервер.
Достоинства и недостатки:
  • позволяет быстро получать результаты передачи форм с небольшим количеством информации;
  • некоторые сервера ограничивают длину URL-адреса с аргументами (обрезают часть URL-адреса с передаваемой информацией);
  • передача личных данных (пароли, номера банковских карт и т.д.) с помощью данного метода является небезопасной, так как такие данные могут быть легко перехвачены.
postБраузер устанавливает связь с сервером, на котором находится обработчик данных формы (URL-адрес обработчика указывается в атрибуте «action» или «formaction») и после установки связи передаёт (в отдельном сеансе связи) данные на сервер.
Достоинства и недостатки:
  • в отличие от метода get данный метод является более безопасным в плане передачи личных данных;
  • данный метод позволяет передавать на сервер большие объёмы данных формы.
Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Атрибут formmethod

<form action="action_form.php">
 Ваше имя:<input type="text" name="firstname"><br>
 Ваша фамилия: <input type="text" name="lastname"><br>
<input type="submit" formmethod="post" value="Отправка методом POST"><br>
<input type="submit" formmethod="get" value="Отправка методом GET">
</form>

Атрибут formtarget

Атрибут formtarget определяет окно или фрейм в которое будет загружаться результат, представленный в виде HTML-документа. Атрибут formtarget переопределяет атрибут target элемента <form>.
Атрибут formtarget может применяться только с кнопкой отправки или изображения (type="submit" или type="image").
В качестве значения используется имя окна или фрейма, заданное атрибутом name. Значение атрибута formtarget по умолчанию — _self.
Синтаксис:

<input type="submit" formtarget="имя окна | _blank | _self | _parent | _top">

Значения атрибута formtarget

ЗначениеОписание
_blankЗагружает страницу в новое окно браузера
_selfЗагружает страницу в текущее окно
_parentЗагружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self
_topОтменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self
имя окнаОткрывает документ во фрейме с указанным уникальным именем
Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Атрибут formtarget

<form action="action_form.php" method="post">
<iframe name="mytarget" style="width: 400px; height: 150px;">
<p>Ваш веб-браузер не поддерживает плавающие фреймы.</p>
</iframe><br>
 Ваше имя:<input type="text" name="firstname"><br>
 Ваша фамилия: <input type="text" name="lastname"><br>
<input type="submit" formtarget="mytarget" value="Результат в mytarget">
</form>

Атрибут multiple

Атрибут multiple позволяет пользователям выбрать сразу несколько вариантов ответа (не забудьте написать предупреждение об этой возможности). Multiple — это булев атрибут, значение для него не указывается. Пользователи компьютеров под управлением операционной системы Windows могут выбрать несколько элементов, нажав и удерживая клавишу Ctrl, а пользователи компьютеров Маc — с помощью клавиши Cmd.
Атрибут multiple может применяться с элементом <input> типа email и file.
Синтаксис:

<input type="file" name="image" multiple>
Хром Fire Fox Опера Яндекс Сафари Internet Explorer

Пример: Атрибут multiple

Атрибуты тега <input>

Атрибут Значение / описание
autocomplete Разрешает или запрещает автозаполнение текстового поля формы:
on — включает автозаполнение текстовых полей форм;
off — отключает автозаполнение текстовых полей форм.
autofocus Автоматически переводит фокус для полей формы при загрузке страницы.
checked Делает чекбокс [type="checkbox"] или радиокнопку [type="radio"] активной. Активных чекбоксов может быть несколько. В группе с одним name должна быть активной только одна радиокнопка.
disabled Отключает возможность редактирования и копирования содержимого поля.
form Связывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами элемента <form>. Значение атрибута form должно быть равно атрибуту id элемента <form> в этом же документе.
formaction Определяет url-адрес обработчика формы. Задается только для полей типа type="submit" и type="image". Атрибут переопределяет значение атрибута action самой формы.
formenctype Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла <input type="file">. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image". Значения:
application/­x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ +; символы (кроме цифр и латинских букв) преобразуются в сочетание знака % (проценты) и соответствующий ASCII код символа; разрыв строки преобразуется в символы %0D%0A);
multipart/form-data — символы не кодируются;
text/plain — пробелы заменяются на символ +, а специальные символы не кодируются.
formmethod Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image". Переопределяет значение атрибута method формы. Варианты:
get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер:
URL?имя=значение&имя=значение
post — данные формы отправляются в виде http-запроса.
formnovalidate Отключает проверку данных формы (перед отправкой на сервер) на корректность. Атрибут formnovalidate может быть применен к элементам <input> с типом submit или image. Переопределяет значение атрибута novalidate формы.
formtarget Определяет окно или фрейм в которое будет загружаться результат, полученный после отправки формы. Переопределяет атрибут target элемента <form>. Может применяться только с кнопкой отправки или изображения (type="submit" или type="image"). В качестве значения используется имя окна или фрейма, заданное атрибутом name.
Значения:
_blank — загружает ответ в новое окно/вкладку;
_self — загружает ответ в то же окно (значение по умолчанию);
_parent — загружает ответ в родительский фрейм;
_top — загружает ответ во весь экран;
framename — загружает ответ во фрейм с указанным именем.
height Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image", например, <input type="image" src="img_primer.png" height="40">. Рекомендуется одновременно устанавливать как высоту height, так и ширину width поля.
list Атрибут list и ассоциированный элемент <datalist> позволяют предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. Значение, заданное для атрибута list, аналогично идентификатору id элемента <datalist>.
max и min Позволяют ограничивать диапазон вводимых значений; форма не будет отправлена, если значение меньше min или больше mах. Значение атрибута может содержать целое или дробное число. Используются со следующими типами полей: number, range, date, datetime, datetime-local, month, time и week.
maxlength Определяет максимальное количество символов, которое пользователь может ввести в поле ввода. Значение по умолчанию 524288 символов.
multiple Позволяет пользователям выбрать сразу несколько вариантов ответа. Multiple — это булев атрибут, значение для него не указывается. Пользователи компьютеров под управлением операционной системы Windows могут выбрать несколько элементов, нажав и удерживая клавишу Ctrl, а пользователи компьютеров Маc — с помощью клавиши Cmd. Применяется в отношении файлов (type="file") и адресов электронной почты (type="email").
name Определяет имя, которое будет использоваться для доступа к элементу <form>. Значение этого атрибута служит для идентификации элемента формы и отправляется на сервер вместе с введенными данными.
pattern Позволяет задавать собственные правила валидации значения поля <input> при помощи Регулярных Выражений (RegEx). И если значение введенное пользователем в поле не совпадает с заданным шаблоном, то выскачет ошибка.
placeholder Содержит замещающий текст (подсказку), который отображается внутри поля ввода до тех пор, пока пользователь не начнет ввод текста, после чего замещающий текст исчезает.
readonly Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
required Указывает, что поле элемента формы обязательно к заполнению пользователем. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
size Задает видимую ширину поля в символах. Значение по умолчанию — 20. Если символов введено будет больше, чем задано в значении size, появится дополнительная полоса прокрутки. Работает со следующими типами полей: text, search, tel, url, email и password.
src Задает url-адрес изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля <input type="image">.
step Используется для элементов, предполагающих ввод числовых значений, задает шаговые приращения (величину инкремента) в процессе регулировки диапазона.
value Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
width Значение атрибута содержит количество пикселей. Задает ширину полей формы. Применяется только с элементом <input> типа type="image">

Задачи


  • Текст-подсказка

    Добавьте в поле ввода текст-подсказку, которая исчезает когда пользователь начинает вводить текст, а затем, при устaновке фокуса на друтом элементе, снова появляется.

    Задача HTML:

    Реши сам »
    HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="action_form.php" method="POST"> <input type="text" name="firstname"> <input type="submit"> </form> </body>
    </html>
  • Установка фокуса

    Сделайте так, чтобы в загружаемой форме поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.

    Задача HTML:

    Реши сам »
    HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form> <label for="search">Поиск по сайту:</label> <input id="search" name="search" type="search" placeholder="Поиск..."> </form> </body>
    </html>
  • Поле ввода обязательно для заполнения

    Дополните HTML-код так, чтобы в случае если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение.

    Задача HTML:

    Реши сам »
    Введите ваше имя:
    HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="action_form.php" method="POST"> <p>Введите ваше имя:</p> <input type="text" name="firstname"> <input type="submit"> </form> </body>
    </html>
  • Отключенное поле

    Доработайте HTML-код так, чтобы в результате у пользователя не было возможности редактирования и копирования содержимого текстового поля формы.

    Задача HTML:

    Реши сам »
    Ваше имя:
    HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="action_form.php" method="POST"> <p>Ваше имя:</p> <input type="text" name="firstname" value="Макс"> <input type="submit"> </form> </body>
    </html>




Профессия‌ ‌веб-разработчик‌
Веб-разработчик с нуля‌
Старт в программировании‌
Курс HTML/CSS‌
Школа фриланса
Курс Верстальщик 2020 - HTML 5, CSS‌
Профессия‌ тестировщик‌