Учебник HTML 5. Статья «Формы»
Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями.
Синтаксически парный тег <form> определяет форму в HTML документе. Элемент <form> по большому счету просто является контейнером, внутри которого могут размещаться различные надписи, элементы управления и типы входных элементов, флажки, радио-кнопки, кнопки отправки и прочие HTML элементы, которые мы с Вами сейчас рассмотрим.
Основная задача формы заключается в том, чтобы принять от пользователя входящую информацию и передать её для дальнейшей обработки на стороне сервера.
Элемент имеет следующий синтаксис:
<form> элементы формы </form>
Элемент <input> является основным элементом формы и определяет пользовательское поле для ввода информации. Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу:
| Значение | Описание |
|---|---|
| button | Определяет кнопку. Как правило, используется в основном совместно с языком программирования JavaScript для активации скрипта. |
| checkbox включено выключено | Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка. |
| color | Элемент управления для задания цвета (определяет палитру цветов). |
| date | Элемент управления для ввода даты в формате DD.MM.YYYY (день, месяц и год). В элементе не указывается время. |
| datetime-local | Элемент управления для ввода даты в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты). В элементе не указывается часовой пояс. |
| email | Определяет поле для ввода адреса электронной почты. |
| file | Элемент управления, который позволяет пользователю выбрать файл. |
| hidden | Элемент управления, который определяет скрытое поле ввода. |
| image | Элемент управления, который определяет графическую кнопку |
| month | Элемент управления для ввода месяца и года (Month YYYY). В элементе не указывается часовой пояс. |
| number | Элемент управления для ввода числа с плавающей точкой. |
| password | Определяет однострочное текстовое поле, предназначенное для ввода пароля (символы, введенные внутри поля скрываются). Используйте атрибут maxlength HTML тега <input>, чтобы задать максимальную длину значения, которое может быть введено в поле. |
| radio выбрано не выбрано | Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределенной группы значений. Элемент, как правило, называют радиокнопка (radio button) или переключатель. |
| range | Элемент управления для ввода номера (регулятор), в котором ввод точного значения не является важным. Этот тип управления использует следующие значения по умолчанию, если атрибуты не указаны:
|
| reset | Определяет кнопку сброса содержимого формы до значений, установленных по умолчанию. |
| search | Определяет однострочное текстовое поле для ввода строки поиска |
| submit | Определяет кнопку отправки формы |
| tel | Определяет элемент управления для ввода телефонного номера. |
| text | Определяет однострочное текстовое поле (по умолчанию имеет ширину в 20 символов). Это значение по умолчанию. |
| time | Определяет элемент управления для ввода времени без указания часового пояса ( |
| url | Определяет поле для ввода абсолютного URL-адреса. |
| week | Определяет элемент управления для ввода порядкого номера недели в году и самого года (Неделя NN, YYYY). В элементе не указывается часовой пояс. |
С выходом HTML 5 к элементу <input> добавилось 12 новых типов (видов) полей, но к сожалению, пока не все из них имеют полную поддержку всеми передовыми браузерами. Как вы понимаете, к самым часто используемым видам полей относятся те, которые были введены задолго до HTML 5, например, такие как:
- checkbox (флаговая кнопка).
- radio (радиокнопка).
- submit (кнопкa отправки формы).
- text (однострочное текстовое поле).
Давайте рассмотрим пример использования этих элементов управления внутри формы:
<!DOCTYPE html> <html> <head> <title>HTML формы</title> </head> <body> <form> Имя: <input type = "text" name = "firstname" value = "Введите имя"> <br> <br> Фамилия: <input type = "text" name = "lastname" value = "Введите фамилию"> <br> <br> Мужчина <input type = "radio" name = "sex" value = "male" checked> Женщина <input type = "radio" name = "sex" value = "female"> <br> <br> О себе: <br> <input type = "checkbox" name = "type1" value = "low">Меньше 18<br> <input type = "checkbox" name = "type2" value = "2old">От 18 до 35<br> <input type = "checkbox" name = "type3" value = "high">Больше 35<br> <input type = "checkbox" name = "type4" value = "busy">Женат /-а<br> <input type = "checkbox" name = "type5" value = "cat">Есть кошка<br> <br> <input type = "submit" name = "submit" value = "отправить"> </form> </body> </html>
И так по порядку, что мы сделали в этом примере:
- Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (
- Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
- Разместили пять флaговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.
- Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы (<input type = «submit»>). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).
Результат нашего примера в браузере:
Рис 32 HTML формы.Обращаю Ваше внимание, что в рамках изучения HTML мы не будем рассматривать то, как серверы обрабатывают входные данные, лишь рассмотрим базовые принципы передачи формы.
Обработчик формы это, как правило, обычная страница сервера, которая с помощью скрипта обрабатывает входные (полученные) данные. Чтобы указать обработчик формы, необходимо использовать тег <form> совместно с атрибутом action:<form action = "example.php">
Обратите внимаение, что в атрибуте action указывается URL адрес того места, куда отправляется форма. Если для формы не задан атрибут action, то значением по умолчанию этого атрибута считается текущая страница (обработчик формы — текущая страница). В приведенном выше примере, предпологается, что скрипт обработки формы находится внутри страницы «example.php».
Расширение *.php используется для файлов, написанных на языке PHP (Hypertext Preprocessor — препроцессор гипертекста, произносится как «пи-эйч-пи») — скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических веб-сайтов.
Еще одним важным атрибутом при работе с элементом <form> является атрибут method, он определяет метод HTTP (get или post), который используется при передаче формы:
<form action = "example.php" method = "get"> или: <form action = "example.php" method = "post">
Вы можете использовать get (метод по умолчанию) если форма отправки является пассивной (как поисковой запрос) и не содержит конфиденциальной информации. При использовании метода get данные формы будут видны при передаче в адресе страницы:
http://www.kakoitosait.ru/example.php?firstname=Вася&lastname=Пупкин
Используйте метод post если форма использует обновление каких-либо данных, или включает в себя конфиденциальную информацию (например пароль). Метод post предлагает лучшую безопасность, так как представленные данные отправляются на сервер в теле сообщения запроса.
Группировка данных формы
Тег <fieldset> служит для визуальной группировки элементов, размещенных внутри формы (HTML тег <form>). Во всех основных браузерах, данный элемент выделяется рамкой, а содержимое элемента получает внутренние отступы со всех сторон.
Тег <legend> определяет заголовок для <fieldset> элемента, с помощью которого группируются элементы формы.
Пример использования:
<!DOCTYPE html> <html> <head> <title>Группировка данных формы</title> </head> <body> <form> <fieldset> <legend>Пожалуйста, представьтесь</legend> Имя: <input type = "text" name = "firstname" value = "Введите имя"> <br> <br> Фамилия: <input type = "text" name = "lastname" value = "Введите фамилию"> <br> <br> Мужчина <input type = "radio" name = "sex" value = "male" checked> Женщина <input type = "radio" name = "sex" value = "female"><br> <br> <input type = "submit" name = "submit" value = "отправить"> </fieldset> </form> </body> </html>
В этом примере мы:
- Разместили внутри формы (парный тег <form>) элемент <fieldset>, благодаря которому мы группируем элементы формы, вокруг формы появляется рамка (внешний вид рамки может отличаться в зависимости от браузера). Тегом <legend> мы определяем для нашей рамки заголовок «Пожалуйста, представьтесь».
- Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
- Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
- Заключительный элемент это кнопка, которая служит для отправки формы (<input type = «submit»>). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).
Результат нашего примера в браузере:
Рис 33 Группировка элементов формы.Текстовая метка
Тег <label> (англ. — метка) служит текстовой меткой для элемента <input>. По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента <label>, а не по самому элементу <input>.
Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега <label>. Значение атрибута for должно соответствовать значению глобального атрибута id того элемента формы, к которому будет относится метка. Атрибут for можно не использовать, если элемент <input> будет находиться внутри элемента <label>.
Рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <label></title> </head> <body> <form> <label for = "yes">Да</label> <!--Здесь мы создаём метку для тега input c id = "yes"--> <input type = "radio" id = "yes"name = "choice" value = "yes" checked> <label for = "no">Нет</label><!--Здесь мы создаём метку для тега input c id = "no"--> <input type = "radio"id = "no" name = "choice" value = "no"> </form><br> <form> <label>Да <input type = "radio" name = "choice2" value = "yes"> </label><!--Здесь мы помещаем теги <input> внутрь тегов <label> (при этом атрибут for не требуется)--> <label>Нет <input type = "radio"name = "choice2" value = "no" checked></label> </form> </body> </html>
В этом примере мы:
- Внутри первой формы:
- Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Еще раз обратите внимание, что для радиокнопок внутри одной формы необходимо указывать одинаковое имя, значения мы указали разные. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением yes). Кроме того, мы указали для радиокнопок глобальные атрибуты id, которые определяют уникальный идентификатор для элемента.
- Разместили два элемента <label>, которые определяют текстовые метки для наших текстовых полей. Обратите внимание, что мы использовали атрибут for, чтобы определить к какому элементу формы относится текущая метка. Значение атрибута for соответствует значению глобального атрибута id необходимой нам радиокнопки.
- Внутри второй формы:
- Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Для второй радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае радиокнопка со значением no). Кроме того, мы указали для радиокнопок уникальные значения в рамках формы и одинаковые имена.
- Разместили два элемента <label>, внутри них мы разместили наши радиокнопки. В отличии от предыдущего метода отсутствует необходимость указывать для радиокнопок глобальные атрибуты id (идентификатор для элемента), а для текстовых меток использовать атрибут for, чтобы на них сослаться (сделать привязку).
В браузере оба варианта (метода) использования текстовых меток выглядят идентично:
Рис. 34 Использование текстовой метки (тег <label>).Подсказка для полей ввода
Атрибут placeholder (HTML тега <input>) указывает подсказку, которая описывает ожидаемое значение для ввода в элемент. Подсказка отображается в поле ввода до того, как пользователь вводит значение.
Обратите внимание на то, что браузер Internet Explorer имеет поддержку данного атрибута только с 10-ой версии, в некоторых случаях вы можете использовать атрибут value в качестве подсказки для поддержки более ранних версий этого браузера (пример мы рассматривали выше).
Атрибут может быть использован с полями данных следующих типов (атрибут type):
- email (поле для адреса электронной почты).
- password (поле с паролем, в котором скрываются символы).
- search (текстовое поле для ввода строки поиска).
- text (однострочное текстовое поле).
- tel (поле для ввода номера телефона).
- url (поле для ввода URL-адреса).
Давайте рассмотри пример использования:
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута placeholder</title> </head> <body> <form> Login: <input type = "text" name = "login" placeholder = "Введите ваш логин"><br><br> Password: <input type = "password" name = "password" placeholder = "Введите ваш пароль"><br> <button type = "submit">Далее</button> </form> </body> </html>
В данном примере мы указали для элемента <input> с типом text (однострочное текстовое поле) и типом password (поле с паролем) текстовую подсказку для пользователя (атрибут placeholder), которая описывает ожидаемое значение для ввода.
Результат нашего примера:
Рис. 34а Атрибут placeholder HTML тега <input> (создание текстовой подсказки).Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Используя полученные знания составьте следующую форму оформления заказа:
Практическое задание № 22.
Нюанс: в полях, где предполагается выбор, должна быть возможность осуществления выбора кликом по тексту, а не только по самому элементу.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
basicweb.ru
Шпаргалка по HTML5 Формам | 1
Кроме стандартных кнопок «Отправить» и «Очистить», можно добавить в форму неограниченное колличество кнопок и с помощью JavaScrypt назначить им какие-либо обработчики (заставить их выполнять какие-либо функции)
Атрибуты элементов формы
accept— Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
autocomplete — Включает или отключает автозаполнение.
autofocus — Устанавливает фокус в поле формы.
checked — Предварительно активированный переключатель или флажок.
<input type="radio" name="delivery" value="curier" checked>Доставка курьеромdisabled — Блокирует доступ и изменение элемента.
action — Определяет адрес обработчика формы.
enctype — Устанавливает способ кодирования данных формы при их отправке на сервер.
method — cообщает браузеру каким методом следует передавать данные формы на сервер.
novalidate— Отменяет встроенную проверку данных на корректность.
target — Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
list — Указывает на список вариантов, которые можно выбирать при вводе текста.
<input list="browsers">
<datalist>
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>max — верхнее значение для ввода числа или даты.
maxlength — Максимальное количество символов разрешенных в тексте.
min — Нижнее значение для ввода числа или даты.
multiple — Позволяет загрузить несколько файлов одновременно.
Выберите изображение: <input type="file" name="img" multiple>name — Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
pattern — Устанавливает шаблон ввода.
Почтовый индекс: <input type="text" name="country_code" pattern="[0-9]{6}" title="Введите почтовый индекс">placeholder — Выводит подсказывающий текст.
<input type="text" name="fname" placeholder="Здесь нужно указать ваше имя">readonly — Устанавливает, что поле не может изменяться пользователем.
required— Обязательное для заполнения поле. requeied
Логин: <input type="text" name="login" required>size — Ширина текстового поля.
step — Шаг приращения для числовых полей.
<input type="number" name="points" step="3">tab-index — Определяет порядок перехода между элементами с помощью клавиши Tab.
type — Сообщает браузеру, к какому типу относится элемент формы.
value — Значение элемента.
Пример ФОРМ
brainoteka.com
Формы в HTML5 | WebReference
Пока нам удалось создать несколько интересных версий сайта. Мы еще не охватили формы, в которых пользователи могут вводить данные. Формы широко используются по всему Интернету: поисковые системы вроде Google или Bing, поля статуса в Facebook, редактор писем в Gmail позволяют набирать или отправлять информацию.
Давайте сделаем простую форму, что позволит пользователям комментировать нашу статью. Мы хотим, чтобы форма выглядела как на следующем рисунке:
Теперь выберем отдельные компоненты, которые составляют форму. Мы будем использовать выделение одинаковым цветом для элементов, выполняющих аналогичные функции.
Как видите, синий цвет указывает на имена или описание каждого поля. Зелёные элементы показывают места, где вы можете ввести однострочный текст. Оранжевая область позволяет вводить длинные куски текста, а фиолетовый цвет используется для кнопки отправки формы. Для каждой группы мы будем использовать один и тот же тег.
Для имен задействуем <label>. Для коротких полей — <input type=»text»>. Для больших текстов будем использовать <textarea>. Кнопки сделаны с помощью <input type=»submit»>. Они являются наиболее популярными элементами HTML, которые применяются для построения форм на сайтах. Как всегда, мы начинаем с чистого шаблона HTML, а затем добавляем больше элементов.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Форма</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
</body>
</html>Мы должны включить соответствующий тег, который говорит браузеру: «Эй, форма начинается здесь!». Это очень похоже на тег <article> для указания, откуда начинать статью. В HTML мы используем тег <form> в качестве элемента формы.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Форма</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<form>
</form>
</body>
</html>Теперь мы хотим добавить первое описание: «Ваше имя». Начиная отсюда мы будем рассматривать фрагменты кода, которые содержатся в разделе <form>, потому что остальная часть HTML уже хорошо вам известна.
<form>
<label for="nickname">Ваше имя:</label>
<input type="text" name="nickname">
</form>Здесь у нас есть элемент <label>, который описывает имя и элемент <input> для ввода текста. Тег <input> содержит три атрибута: type со значением text, name со значением nickname и id также со значением nickname. Значение атрибута type означает, что это короткое текстовое поле.
Ниже показано, как это поле выглядит для таких типов полей.
Вы будете использовать в коде <input type=»text»> для указания, что пользователь может набирать текст в этом поле. Обратите внимание, что текстовые поля могут быть оформлены с помощью CSS. Мы можем изменить рамку, ширину или расстояние между текстом и границей текстового поля. Грубый пример показан ниже.
Атрибут name используется для именования каждого поля. Это полезно, когда вы посылаете форму на сервер, помогает определить, какое значение из какого поля приходит.
Отметим также взаимосвязь между значением id и значением атрибута for атрибута в <label>.
<label for="nickname">Ваше имя:</label>
<input type="text" name="nickname">В атрибуте for вы должны использовать идентификатор поля, описание которого находится в <label>.
Давайте сделаем другую форму, теперь для поля email.
<form>
<label for="nickname">Ваше имя:</label>
<input type="text" name="nickname">
<label for="user-email">Ваш e-mail:</label>
<input type="email" name="user-email">
</form>Единственная разница в том, что атрибут type имеет значение email. Смысл его, конечно, в том, что пользователь может ввести свою электронную почту. Обратите внимание, что набирается в поле email должно быть проверено на правильность адреса электронной почты. Если это некорректный адрес, то браузер отобразит сообщение об ошибке и не станет отправлять форму.
Следующим полем для добавления является место для комментария. Для длинных текстов мы используем тег <textarea>.
<form>
<label for="nickname">Ваше имя:</label>
<input type="text" name="nickname">
<label for="user-email">Ваш e-mail:</label>
<input type="email" name="user-email">
<label for="content">Содержание:</label>
<textarea rows="10" cols="50" name="content" ></textarea>
</form>Обратите внимание, что мы использовали два новых атрибута: rows и cols. Атрибут rows применяется для установки количества строк текста, которые могут быть введены в поле, пока не появится полоса прокрутки. cols применяется для определения количества символов в каждой строке. Попробуйте самостоятельно изменить значения и посмотреть, как всё поле расширяется или сжимается соответственно.
Последнее, что нам нужно добавить, это кнопка для отправки формы.
<form>
<label for="nickname">Ваше имя:</label>
<input type="text" name="nickname">
<label for="user-email">Ваш e-mail:</label>
<input type="email" name="user-email">
<label for="content">Содержание:</label>
<textarea rows="10" cols="50" name="content" ></textarea>
<input type="submit" value="Добавить">
</form>Элемент <input> содержит атрибут type равный submit. То что вы напишите в атрибуте value будет отображаться как текст на кнопке.
Наш код для формы теперь выглядит следующим образом:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Форма</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<form>
<label for="nickname">Ваше имя:</label>
<input type="text" name="nickname">
<label for="user-email">Ваш e-mail:</label>
<input type="email" name="user-email">
<label for="content">Содержание:</label>
<textarea rows="10" cols="50" name="content"></textarea>
<input type="submit" value="Добавить">
</form>
</body>
</html>Наш браузер отображает это так.
Выглядит не очень хорошо. В следующей главе мы выясним, как это исправить.
Автор и редакторы
Автор: Дамиан Вельгошик
Последнее изменение: 11.08.2018
Редакторы: Влад Мержевич
webref.ru
Учебник HTML 5. Статья «Элементы формы, добавленные в HTML 5»
Данная статья посвящена новым элементам формы (HTML тег <form>), которые были добавлены в HTML 5, к сожалению, теги, которые мы рассмотрим в этой статье, практически не используются в проектах, по той причине, что они пока имеют ограниченную поддержку браузерами (не все современные браузеры поддерживают эти теги).
Если вы ставите перед собой задачу быстрее начать создавать сайты, то вы можете пропустить эту статью и вернуться к ней позднее, чтобы более глубоко познакомиться с некоторыми аспектами HTML 5, ну и в конце концов расширить свой кругозор.
В HTML5 добавлены следующие элементы формы:
- <datalist> (список предопределенных вариантов для ввода).
- <keygen> (тег генерации ключей).
- <output> (результат вычислений).
Список предопределенных вариантов
Элемент <datalist> определяет список предопределенных вариантов для ввода. Пользователи увидят раскрывающийся список предопределенных вариантов, как входных данных. Варианты списка можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и доступен при использовании с элементом <input>, при этом, атрибут list тега <input>, должен соответствовать идентификатору (глобальный атрибут id) элемента <datalist>.
Тег <option> применяется как вложенный элемент списка предопределенных вариантов для ввода и определяет пункты списка (параметры для выбора).
Давайте рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <title>Тег <datalist></title> </head> <body> <p>Список гостей:</p> <input list = "guestlist"> <datalist id = "guestlist"> <!-- список предопределенных вариантов для ввода --> <option value = "Вася"> </option><!-- закрывающие элементы </option> в данном случае можно не использовать --> <option value = "Арик"> </option> <option value = "Армен"> </option> </datalist> </body> </html>
В этом примере с использованием элемента <datalist> мы создали список предопределенных вариантов, элементы списка мы добавили элементом <option> (элементы списка вложены в тег <datalist>). Кроме того, чтобы наш список был виден (мог использоваться) мы создали элемент <input> с атрибутом list, значение которого соответствует значению глобального атрибута id (идентификатор элемента) нашего списка предопределенных вариантов.
Результат нашего примера:
Рис. 35 Список предопределенных вариантов в HTML 5 (тег <datalist>).Обращаю ваше внимание на то, что браузер Safari не поддерживает тег <datalist>, а Internet Explorer имеет поддержку только с 10-ой версии.
Тег генерации ключей
Тег <keygen> используется для генерации пары ключей — закрытого и открытого. Сами ключи необходимы для шифрования и расшифровки данных. Цель тега <keygen> обеспечить безопасный способ проверки подлинности пользователей.
При отправке формы, закрытый ключ хранится локально, а открытый ключ передается на сервер вместе с формой. Открытый ключ может быть использован для создания сертификата клиента для проверки подлинности пользователя в будущем.
Давайте рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <keygen> </title> </head> <body> <p>Сгенерировать пару ключей.</p> <form action = "example.php" method = "get"> <!-- указываем метод и URL адрес того места, куда отправляется форма --> Username: <input type = "text" name = "new_usr"> Степень защиты: <keygen name = "generator"> <input type = "submit"> </form> </body> </html>
Результат нашего примера:
Рис. 36 Тег генерации ключей в HTML 5.Спецификация HTML5 не определяет, как частный, сгенерированный ключ будет использоваться. Браузеры Internet Explorer и Edge не поддерживает использование данного тега.
Результат вычислений (тег вывода)
Тег <output> определяет область, в которую выводится результат вычислений или действий пользователя (обычно рассчитывается с помощью скриптов). Он может принадлежать определенной форме (элемент <form>), располагаясь внутри нее в качестве дочернего элемента, или ссылаться на неё (атрибут form).
Пример использования:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <output></title> </head> <body> <p>Сложение:</p> <form oninput = "с.value = a.valueAsNumber + b.valueAsNumber"> <input type = "number" id = "a"> + <input type = "number" id = "b"> = <mark> <output name = "с" for = "a b"> </output> </mark> </form> <p>Умножение:</p> <form oninput = "d.value = e.valueAsNumber * f.valueAsNumber"> <input type = "number" id = "e"> * <input type = "number" id = "f"> = <mark> <output name = "d" for = "e f"> </output> </mark> </form> <p>Деление:</p> <form oninput = "z.value = g.valueAsNumber / h.valueAsNumber"> <input type = "number" id = "g" step = "10" > / <input type = "number" id = "h" step = "5" > = <mark> <output name = "z" for = "g h"> </output> </mark> </form> </body> </html>
В данном примере мы создали три формы, в которых прописали функции сложения номерных полей для первой, умножения для второй и деления для третьей (<form oninput = «Переменная3.value = Переменная1.valueAsNumber + | * | / Переменная2.valueAsNumber»>). Атрибут событий oninput позволяет задать срабатывание скрипта, когда элемент получает ввод данных от пользователя. Атрибуты событий HTML необходимы для того, чтобы реагировать на какие-то действия пользователя, например, клике мышью или нажатии клавиши на клавиатуре, отправке формы, копировании текста и тому подобное. С полным перечнем возможных событий вы можете ознакомиться в разделе «Атрибуты событий».
Обратите внимание, что к тегу <input> применен атрибут type со значением number (элемент управления для ввода числа с плавающей точкой), благодаря которому мы можем щелчком мыши менять значение на 1 шаг в сторону увеличения или уменьшения. Для полей третьей формы мы указали атрибут step, которым мы можем регулировать этот шаг, например step = «5» будет увеличивать, или уменьшать значение на 5, step = «10» соответственно на 10.
Атрибут for внутри элементов <output> определяет отношения между результатом расчета и элементами, используемые при нём. Результат выполнения наших функций мы выводим внутри элемента <output>, которые для наглядности мы поместили внутрь тега подсветки <mark>.
Результат нашего примера:
Сложение :
Умножение:
Деление:
Рис. 37 Использование тега вывода в HTML 5.
Обращаю Ваше внимание на то, что браузеры Internet Explorer и Edge не поддерживает использование данного тега.
basicweb.ru
Введение в формы HTML5 и новые атрибуты.
От автора: несомненно, вы каждый день взаимодействуете в Сети по меньшей мере с одной формой. Занимаетесь ли вы поиском контента, или входите в свой аккаунт на странице Facebook’а – в вебе применение онлайн-форм является одной из самых обычных задач. Для дизайнеров и разработчиков создание форм отличается некоторым однообразием, особенно написание для них скриптов валидации данных. HTML5 представляет множество новых атрибутов, типов input и прочих элементов инструментария разметки.
В этой статье мы сосредоточимся на изучении новых атрибутов, а в следующей рассмотрим типы ввода данных.
Станет видно, что новые свойства значительно облегчат нам жизнь при произведении впечатления на пользователей. Что тут самое привлекательное? Применять их можно уже сейчас. Мы начнем с очень краткой истории форм HTML5.
Эта статья – отрывок из Главы 6 книги Начинаем изучать HTML5 и CSS3: Эволюция Сети (Beginning HTML5 and CSS3: The Web Evolved) Кристофера Мерфи, Оли Стадхольма, Ричарда Кларка и Дивья Маньяна (Christopher Murphy, Oli Studholme, Richard Clark и Divya Manian), опубликованной издательством Apress.
Примечание: Так как эта статья является отрывком из книги, с момента создания скриншотов выполнение браузером атрибутов и типов ввода данных могло измениться. К тому же с момента публикации могла расшириться браузерная поддержка, поэтому по вопросу ее текущего состояния, пожалуйста, обратитесь к приведенным в конце статьи ссылкам.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееИстория форм HTML5
Раздел форм в HTML5 изначально был спецификацией под названием Web Forms 2.0, где добавлялись новые типы инструментов управления формами. Начатая в Opera и редактировавшаяся тогдашним сотрудником Opera Айэном Хиксоном (Ian Hickson), она была утверждена W3C в начале 2005г. Работа изначально проводилась W3C. Затем ее объединили со спецификацией Web Applications 1.0 с целью создания основы спецификации HTML5 отколовшейся рабочей группы Web Hypertext Application Technology Working Group (WHATWG).
Применение принципов дизайна HTML5
Одна из лучших характеристик форм HTML5 – то, что сразу же можно применять почти все новые типы ввода данных и атрибуты. Им не требуются никаких дополнительных фишек, хаков и прочих заплаток. Не то, чтобы они все уже «поддерживались», но в современных браузерах, которые по-настоящему их поддерживают, они способны проделывать классные вещи – и красиво деградировать в тех браузерах, которые их не понимают. Все это – благодаря дизайнерским принципам HTML5. В данном случае мы особо ссылаемся на принцип красивой деградации. В целом, непростительно не начать сразу применять эти функции. Фактически это будет значить, что вы находитесь впереди планеты всей.
Атрибуты форм HTML5
В этой статье мы рассмотрим 14 следующих новых атрибутов.
placeholder
Первым идет атрибут placeholder, который позволяет нам установить текст-заполнитель, что до последнего времени делалось в HTML4 с помощью атрибута value. Его можно применять только для коротких описаний. Для более длинных применяйте атрибут title. Различие с HTML4 состоит в том, что текст показывается, только когда поле пустое и не в фокусе. Как только поле попадает в фокус (например, при щелчке мышью или указании на поле), и вы начинаете печатать, текст просто исчезает. Очень похоже на поле поиска в Safari.
Давайте разберемся, как выполнять атрибут placeholder.
<input type=»text» name=»user-name» placeholder=»at least 3 characters»>
<input type=»text» name=»user-name» placeholder=»at least 3 characters»> |
Вот так! Я слышу, как вы думаете: «Что такого в нем примечательного? Я всю жизнь делал это в JavaScript’е». Да, верно. Однако с HTML5 он становится частью браузера, означая, что требуется писать меньше скрипта для достижения более доступного кроссбраузерного решения (даже при отключенном JavaScript’е). На рисунке показана работа атрибута текста-заполнителя в Chrome’е.
Браузеры, не поддерживающие атрибут placeholder, игнорируют его, поэтому он не станет выполняться. Однако включив его, вы улучшаете впечатление тех пользователей, чьи браузеры обеспечивают его поддержку, а также гарантируете своему сайту перспективность. Все современные браузеры поддерживают текст-заполнитель.
Примечание: Для назначения стилей тексту-заполнителю не существует официального псевдокласса, но и Mozilla (создатели Firefox), и WebKit предлагают для свойств стилей вендорные префиксы (-mozplaceholder и –webkit-input-placeholder). Можно с уверенностью предполагать, что псевдокласс станет стандартом стилей текста-заполнителя. Подробности можно узнать из тематической дискуссии по этому вопросу в списке рассылки WHATWG.
autofocus
Автофокус делает в точности то, что означает. Добавлении его к input автоматически фокусирует поле при отображении страницы. Как и в случае с placeholder’ом, в прошлом для autofocus’а мы применяли JavaScript.
Однако у традиционных методов JavaScript’а имеются серьезные проблемы юзабилити. Например, если пользователь начинает заполнять форму до полной загрузки скрипта, он будет (неприятно) возвращен после загрузки к первому полю формы. Атрибут autofocus в HTML5 обходит эту проблему, фокусируясь по мере загрузки документа, при этом не нужно ждать загрузки JavaScript’а. Однако мы рекомендуем применять его для предотвращения проблем с юзабилити только для тех страниц, чья единственная цель – форма (типа Google’а).
Это – булев атрибут (за исключением случаев, когда вы пишете XHTML5; смотрите примечание) и выполняется как здесь:
<input type=»text» name=»first-name» autofocus>
<input type=»text» name=»first-name» autofocus> |
Его поддерживают все современные браузеры и, как placeholder, не выполняющие autofocus браузеры просто игнорируют его.
Примечание: Некоторые новые атрибуты формы HTML5 –булевы. Это просто означает, что они устанавливаются, если имеются, и не устанавливаются, если отсутствуют. В HTML5 их можно записать несколькими различными способами.
autofocus autofocus=»» autofocus=»autofocus»
autofocus autofocus=»» autofocus=»autofocus» |
Однако при написании XHTML5 вам следует применять стиль autofocus=»autofocus».
autocomplete
Атрибут autocomplete помогает пользователям заполнять формы на основе предыдущего введения данных. Атрибут употребляется со времен IE5.5, но окончательно был стандартизирован как часть HTML5. По умолчанию он активен. Это значит, что в основном нам не придется его применять. Однако, если хотите настоять на введении в поле формы каждый раз после ее заполнении (в противоположность автозаполнения поля браузером), то выполните его следующим образом:
<input type=»text» name=»tracking-code» autocomplete=»off»>
<input type=»text» name=»tracking-code» autocomplete=»off»> |
Состояние автозаполнения поля отменяет любое состояние autocomplete, установленное на содержащем элементе формы.
required
Атрибут required не требует представления; как и autofocus, он делает именно то, что вы от него ожидаете. При добавлении его в поле формы браузер требует от пользователя ввести данные в это поле до отправки формы. Он заменяет базовую валидацию формы, в данное время выполняемую с помощью JavaScript’а, делая все более удобным и экономя нам еще немножко времени разработки. required – это булев атрибут, как autofocus. Давайте посмотрим его в действии.
<input type=»text» name=»given-name» required>
<input type=»text» name=»given-name» required> |
В настоящее время required реализован только в Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 и Chrome 5+, так что до поры до времени вам придется продолжить писать скрипты проверки заполнения полей на клиентской стороне прочих браузеров (*кхе-кхе* IE!). Opera, Chrome и Firefox показывают пользователю при отправке формы сообщение об ошибке. В большинстве браузеров ошибки затем локализуются на основе задекларированного языка. Safari не показывает сообщение об ошибке при отправке, а вместо этого помещает это поле в фокус.
Отображение по умолчанию сообщения об ошибке «required» зависит от отдельного браузера; в настоящее время «пузырю» с сообщением об ошибке во всех браузерах нельзя назначать стили CSS. У Chrome’а, тем не менее, имеется собственное свойство, которое можно применять для назначения стилей сообщению об ошибке. Питер Гастон (Peter Gasston) написал статью о синтаксисе. Также можно назначить стили вводу данных с помощью псевдокласса :required. Альтернатива состоит в отмене формулировки и стилей в JavaScript’е с помощью метода setCustomValidity(). Также очень важно не забывать, что такая браузерная валидация не заменяет валидацию серверную.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееpattern
Атрибут pattern обычно сильно волнует многих разработчиков (ну, настолько волнует, как любой атрибут формы). Он определяет JavaScript регулярное выражение для поля, значение которого нужно проверить. Pattern облегчает нам применение отдельной проверки кодов, номеров счетов и так далее. Возможности pattern обширны, и вот всего лишь один простой пример с использованием номера продукта.
<label>Product Number: <input pattern=»[0-9][A-Z]{3}» name=»product» type=»text» title=»Single digit followed by three uppercase letters.»/> </label>
<label>Product Number: <input pattern=»[0-9][A-Z]{3}» name=»product» type=»text» title=»Single digit followed by three uppercase letters.»/> </label> |
Этот шаблон предписывает, что номер продукта должен быть одной цифрой [0-9], за которой следуют три заглавные буквы [A-Z]{3}. Посмотреть еще шаблоны можно на вебсайте шаблонов HTML5, где имеется перечень обычных регулярных выражений шаблонов стиля для того, чтобы помочь вам начать с ними работать.
Как и в случае с required, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 и Chrome 5+ — единственные браузеры, поддерживающие в настоящее время шаблоны. Однако остальные скоро их нагонят по причине быстрого продвижения рынка браузеров.
Элементы list и datalist
Атрибут list дает пользователю возможность ассоциировать список опций с отдельным полем. Значение атрибута списка list должно быть таким же, как ID элемента datalist, находящегося в том же документе. Элемент datalist для HTML5 является новым и представляет предопределенный список опций элементов управления формы. Он работает аналогично внутрибраузерным полям поиска, автоматически дополняющим слова при введении текста.
Следующий пример показывает, как сочетаются list и datalist.
<label>Your favorite fruit: <datalist> <option value=»Blackberry»>Blackberry</option> <option value=»Blackcurrant»>Blackcurrant</option> <option value=»Blueberry»>Blueberry</option> <!— … —> </datalist> If other, please specify: <input type=»text» name=»fruit» list=»fruits»> </label>
<label>Your favorite fruit: <datalist> <option value=»Blackberry»>Blackberry</option> <option value=»Blackcurrant»>Blackcurrant</option> <option value=»Blueberry»>Blueberry</option> <!— … —> </datalist> If other, please specify: <input type=»text» name=»fruit» list=»fruits»> </label> |
Добавив элемент select в datalist, можно обеспечить отличную деградацию, просто применив элемент option. Вот шаблон элегантной разметки, созданной Джереми Кейтом (Jeremy Keith), идеально подходящий принципам постепенной деградации HTML5.
<label>Your favorite fruit: <datalist> <select name=»fruits»> <option value=»Blackberry»>Blackberry</option> <option value=»Blackcurrant»>Blackcurrant</option> <option value=»Blueberry»>Blueberry</option> <!— … —> </select> If other, please specify: </datalist> <input type=»text» name=»fruit» list=»fruits»> </label>
<label>Your favorite fruit: <datalist> <select name=»fruits»> <option value=»Blackberry»>Blackberry</option> <option value=»Blackcurrant»>Blackcurrant</option> <option value=»Blueberry»>Blueberry</option> <!— … —> </select> If other, please specify: </datalist> <input type=»text» name=»fruit» list=»fruits»> </label> |
Браузерная поддержка list и datalist в настоящее время ограничена Opera 9.5+, Chrome 20+, Internet Explorer 10 и Firefox 4+.
multiple
На шаг вперед можно продвинуть свои list и datalist, применив булев атрибут multiple, чтобы можно было ввести из перечня данных более одного значения. Вот пример.
<label>Your favorite fruit: <datalist> <select name=»fruits»> <option value=»Blackberry»>Blackberry</option> <option value=»Blackcurrant»>Blackcurrant</option> <option value=»Blueberry»>Blueberry</option> <!— … —> </select> If other, please specify: </datalist> <input type=»text» name=»fruit» list=»fruits» multiple> </label>
<label>Your favorite fruit: <datalist> <select name=»fruits»> <option value=»Blackberry»>Blackberry</option> <option value=»Blackcurrant»>Blackcurrant</option> <option value=»Blueberry»>Blueberry</option> <!— … —> </select> If other, please specify: </datalist> <input type=»text» name=»fruit» list=»fruits» multiple> </label> |
Однако multiple не применяется исключительно с datalist. Дальнейшим примером употребления multiple могут быть адреса электронной почты при пересылке элементов другу или вложении файлов, как показано здесь:
<label>Upload files: <input type=»file» multiple name=»upload»></label>
<label>Upload files: <input type=»file» multiple name=»upload»></label> |
multiple поддерживается в Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10 и Chrome 4+.
novalidate и formnovalidate
Атрибуты novalidate и formnovalidate обозначают, что при отправке формы не нужно проводить проверку правильности данных. Они оба – булевы атрибуты. formnovalidate может быть применен к input-ам с типом submit или image. Атрибут novalidate можно установить только к элементу form.
Пример использования атрибута formnovalidate может быть приведен на кнопке «сохранить черновик», где у формы есть поля, нужные для отправки черновика, но не требующиеся для сохранения черновика. novalidate будет применяться в тех случаях, когда вам не нужно делать валидацию формы, но требуется добиться преимуществ более удобного пользовательского интерфейса, предлагаемых новыми типами ввода данных.
Применение formnovalidate видно на следующем примере:
<form action=»process.php»> <label for=»email»>Email:</label> <input type=»text» name=»email» value=»[email protected]»> <input type=»submit» formnovalidate value=»Submit»> </form>
<form action=»process.php»> <label for=»email»>Email:</label> <input type=»text» name=»email» value=»[email protected]»> <input type=»submit» formnovalidate value=»Submit»> </form> |
А этот пример показывает применение novalidate:
<form action=»process.php» novalidate> <label for=»email»>Email:</label> <input type=»text» name=»email» value=»[email protected]»> <input type=»submit» value=»Submit»> </form>
<form action=»process.php» novalidate> <label for=»email»>Email:</label> <input type=»text» name=»email» value=»[email protected]»> <input type=»submit» value=»Submit»> </form> |
form
Атрибут form используется для соединения элементов input, select или textarea с формой (известных как владельцы формы). Применение form означает, что элементу не нужно быть дочерним по отношению к связанной форме и его можно оттуда убрать в исходниках. Основной случай его применения состоит в том, что кнопки, размещенные в таблицах, теперь можно привязать к форме.
<input type=»button» name=»sort-l-h» form=»sort»>
<input type=»button» name=»sort-l-h» form=»sort»> |
formaction, formenctype, formmethod и formtarget
Каждый из атрибутов formaction, formenctype, formmethod и formtarget имеет соответствующий атрибут к элементу form, с чем вы познакомитесь в HTML4, так что давайте пройдемся по ним вкратце. Эти новые атрибуты были представлены главным образом потому, что вам могут потребоваться альтернативные действия для различных кнопок отправки, в противоположность нескольким формам в документе.
formaction
formaction определяет файл или приложение, которое будет отправлять форма. Он действует так же, как атрибут action на элемент form, и может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»). При отправке формы браузер сначала проверяет наличие атрибута formaction; если тот отсутствует, он продолжает искать в форме атрибут action.
<input type=»submit» value=»Submit» formaction=»process.php»>
<input type=»submit» value=»Submit» formaction=»process.php»> |
formenctype
formenctype подробно описывает, как данные формы кодируются методом POST. Он действует так же, как атрибут enctype на элемент формы, и может применяться с кнопкой отправки или изображения (type=»submit»или type=»image»). Значение по умолчанию, если не включено – application/x-www-formurlencoded.
<input type=»submit» value=»Submit» formenctype=»application/x-www-form-urlencoded»>
<input type=»submit» value=»Submit» formenctype=»application/x-www-form-urlencoded»> |
formmethod
formmethod определяет, который из методов HTTP (GET, POST, PUT, DELETE) будет применяться для отправки данных формы. Действует так же, как атрибут метода на элемент формы, и используется только с кнопкой отправки или изображения (type=»submit» или type=»image»).
<input type=»submit» value=»Submit» formmethod=»POST»>
<input type=»submit» value=»Submit» formmethod=»POST»> |
formtarget
formtarget определяет target window для результатов формы. Действует так же, как атрибут target на элемент form, и может применяться только с кнопкой отправки или изображения (type=»submit» or type=»image»).
<input type=»submit» value=»Submit» formtarget=»_self»>
<input type=»submit» value=»Submit» formtarget=»_self»> |
Резюме атрибутов формы
Мы рассмотрели несколько новых атрибутов формы, помогающих улучшить пользовательское впечатление и сэкономить вам время разработки. Можно обсудить еще некоторые новые атрибуты, которые раскрываются вместе с новыми типами ввода данных HTML5 в следующей статье этой серии.
Форму-модель, в которой применяются некоторые из приведенных в этой статье примеров, можно найти на демо-странице форм HTML5.
В статье мы дали понять, которые из браузеров имеют поддержку типов ввода данных и атрибутов форм HTML5. При условии постоянного выхода новых версий браузеров может быть сложно уследить за тем, что поддерживается, а что нет. Если хотите быть в курсе текущего прогресса, мы предлагаем посещать canius или FindMeByIP или изучение форм HTML5 с Wufoo.
Автор: Richard Clark
Источник: http://html5doctor.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотретьwebformyself.com
Разметка форм в HTML5
Эта статья – первая из цикла статей об онлайн-формах HTML5, всего их будет 3. До перехода к стилевому оформлению и API проверке со стороны клиента в Java Script, в данной статье мы рассмотрим базовые понятия о разметке. Я советую вам прочитать об этом, даже если вы уже имеете представление о формах, так как в этой статье будут описаны многие новые атрибуты и подводные камни их использования.
Продолжение: Обзор форм HTML5: CSS (вторая статья)
Продолжение: Формы HTML5: Java Script и проверка с Constraint Validation API (третья статья)
Формы HTML могут показаться обычным делом, но они имеют большое значение при разработке как веб-сайтов, так и приложений. В версии HTML4 список доступных полей ввода включал только следующие виды:
- input type=»text»
- input type=»checkbox»
- input type=»radio»
- input type=»password»
- input type=»hidden» — для ввода данных, которые не видны юзеру
- input type=»file» — для загрузки
- textarea — для ввода объемных текстов
- select — для выпадающих списков
- button — как правило применяется для отправки формы, как альтернативу можно применять и input type=»submit» и input type=»image».
Другие ограничения:
- — ограничены возможности стилевого оформления при помощи CSS,
- — специализированные элементы управления, включая выбор даты и цветовой палитры, нужно разрабатывать с помощью кода, и
- — для проверки со стороны клиента нужен JavaScript.
Новые виды полей ввода в HTML5
В арсенале HTML5 появился целый ряд новых видов полей ввода. Они сами по себе помогают при вводе данных и обеспечивают валидацию без кода Java Script…
| вид поля | применение |
| для ввода электронного адреса | |
| tel | для ввода номера телефона – строгий порядок написания необязателен, но переносы строк будут удалены |
| url | для ввода URL |
| search | поисковое поле с автоматически удаляющимися переносами строк |
| number | для ввода чисел с плавающей точкой |
| range | для создания элемента управления, позволяющего вводить примерные значения, обычно для этого используется слайдер |
| date | для ввода даты (день, месяц и год) |
| datetime | для ввода даты (день, месяц, год) и времени (час, минута, секунда, микросекунда) в соответствии с текущим часовым поясом UTC. |
| datetime-local | для ввода даты и времени без учета местного времени |
| month | для ввода месяца и года без учета местного времени |
| week | для ввода порядкового номера недели без учета местного времени |
| time | для ввода времени без учета местного времени |
| color | задать цвет |
Атрибуты полей ввода
При отсутствии указаний для полей ввода можно использовать любой из нижеперечисленных атрибутов, специфика которого будет зависеть от формы. Некоторые из них являются атрибутами с логическим значением, т.е. они не требуют заданного значения, например:
<input type="email" name="email" required />
Хотя вы можете и добавить значения, если предпочитаете более строгий порядок как в XHTML. Например:
<input type="email" name="email" required="required" />
| атрибут | применение |
| name | название поля ввода |
| value | исходное значение |
| checked | Выделяет флажок или переключатель |
| maxlength | Максимально возможная длина строки для ввода. Также можно применять с текстовыми областями в HTML5 |
| minlength | минимально возможная длина строки для ввода. Хотя возможность использования данного атрибута прописана, во время ввода символов поддержка браузера недостаточна, и происходит так, что система проверки достоверности в HTML выдает ошибку.Как альтернативу можно использовать pattern=».{3,}», который обеспечит наличие по крайней мере трех символов. |
| placeholder | подсказка с бледным шрифтом внутри окна для ввода. |
| autofocus | установка фокуса на данное видимое поле ввода во время загрузки страницы |
| required | показывает, что необходимо ввести значение |
| pattern | удостоверяет, что значение и регулярное выражение соответствуют |
| min | Минимальное установленное значение (для чисел и дат) |
| max | Максимальное установленное значение (для чисел и дат) |
| step | Степень дробления значения. Например, код input type=»number» min=»10″ max=»19″ step=»2″ сделает возможными следующие значения: 10, 12, 14, 16 or 18. |
| autocomplete | обеспечивает подсказку для браузера о возможности авто-заполнения, например, «e-mail» для расчетов, или может быть переведен в положение «on» или «off» для того, чтобы, соответственно, активировать или дезактивировать эту функцию |
| inputmode |
определяет метод ввода данных. Наиболее важными являются следующие методы:
|
| size | размер символов вводимого текста или пароля или число пикселей для полей ввода e-mail, телефона или поля поиска. Вероятно, не стоит его использовать , если вы используете CSS для оформления стилей полей ввода. |
| rows | число строк текста (только для текстовых областей) |
| cols | число колонок текста (только для текстовых областей) |
| list | Указывает на установленный список опций |
| spellcheck | Может принимать значения «true» или «false», чтобы активировать или дезактивировать функцию проверки орфографии вводимого текста |
| form | Идентификационный номер формы, к которой относится указанное поле ввода. Как правило, поля ввода должны находиться внутри формы, но данный атрибут разрешает определить местоположение поля ввода в любой части страницы |
| formaction | определяет URI, заменяющее действие формы при отправке (только для кнопок или изображений подтверждения отправки) |
| formmethod | Определяет GET и POST, заменяющие метод формы при отправке (только для кнопок или изображений подтверждения отправки) |
| formenctype | Определяет вид контента при отправке формы (text/plain, multipart/form-data или application/x-www-form-urlencoded, только для кнопок или изображений подтверждения отправки) |
| formtarget | Устанавливает целевое окно или фрейм, заменяющие атрибут form target при отправке (только для кнопок или изображений подтверждения отправки) |
| readonly | Вводимые данные невозможно изменить, хотя они и будут проверены и отправлены |
| disabled | Блокирует поле ввода, в этом случае не будет произведена валидации не будет и не будут отправлены данные. |
Учитывайте, что тип поля date всегда использует формат ГГГГ-ММ-ДД для атрибутов value, min и max.
В примере, указанном ниже, мы видим поле для ввода обязательного e-mail с окончанием @mysite.com с фокусировкой на нем при первой загрузке страницы:
<input type="email" name="login" pattern="@mysite\.com$" autocomplete="email" autofocus required />
Datalist
datalist содержится набор подходящих опций для любого вида поля. Например:
<input type="text" name="browser" list="browsers" /> <datalist> <option value="Chrome" /> <option value="Firefox" /> <option value="Internet Explorer" /> <option value="Safari" /> <option value="Opera" /> </datalist>
Если datalist поддерживается, браузер выводит список возможных значений на выбор для автозаполнения, когда пользователь начинает печатать текст. Целый список выводится при двойном клике мышкой на элемент управления или при нажатии на стрелку «вниз» (если она отображается). Если сравнивать с выпадающим списком с атрибутом select, в этом случае пользователь может ввести собственный вариант.
Можно устанавливать значения и текстовые описания подобно стандартным опциям выбора, например:
<option value="IE">Internet Explorer</option>
Но имейте в виду, что реализаций отличаются в зависимости от браузеров.
Списки значений могут заполняться и с помощью Java Script, если вы хотели бы выбирать опции через Ajax.
Остановка валидации
Остановить проверку всей формы можно, если установить для элемента form атрибут novalidate. Как альтернативный способ, можно установить атрибут formnovalidate для кнопки или изображения подтверждения отправки.
Также помнете, что установление атрибута disabled для поля ввода отменит проверку данного поля.
Поля вывода
До этого мы рассматривали виды полей ввода, но в арсенале HTML5 также есть поля для вывода:
- output — результат вычисления или последствия действия юзера
- progress — индикатор процесса выполнения операции (состояние определяют атрибуты value и max)
- meter — поле вывода в виде шкалы, цвет которой может становиться красным, желтым или зеленым в зависимости от значений, установленных для атрибутов value, low, high, min, max и optimum.
Отделение и маркировка полей
Спецификация формы на сайте whatwg.org form specification устанавливает, что
Каждая часть формы считается абзацем и, как правило, отделяется от других частей при помощи тега <p>.
Интересно. В основном я использую для этого div, хотя не думаю, что есть какая-либо разница в значении. Тэг <p> более короткий, хотя в этом случае вам возможно будет нужно применить класс, чтобы изменить поля.
Учтите, что маркировки следует устанавливать или вокруг, или рядом с самим полем ввода с атрибутом for, который идентифицирует поле ввода, например:
<p> <p> <label for="firstname">First name</label> <input type="text" name="firstname" placeholder="first name" required maxlength="20" /> </p> <p> <label for="lastname">Last name</label> <input type="text" name="lastname" placeholder="last name" required maxlength="20" /> </p> <p> <label for="email">Email address</label> <input type="email" name="email" placeholder="[email protected]" required maxlength="50" /> </p> <p> <label> <input type="checkbox" name="newsletter" /> Sign up for our newsletter </label> </p>
Нестандартные элементы управления
Разработчики браузеров не следуют каким-либо особенным правилам при создании интерфейса. Это сделано специально: элемент для стандартного управления датой на рабочем столе с помощью мыши может иметь слишком маленький размер на мобильном устройстве, поэтому производитель браузера может создать специальную версию браузера для устройств с сенсорным экраном.
Поддержка браузерами
Далеко не все поля ввода данных и их атрибуты поддерживаются всеми браузерами. Как правило, основная часть современных браузеров начиная с IE10+ предоставляют возможность создания полей для ввода e-mail и чисел. Однако на момент написания этой статьи виды полей для ввода времени и дат были доступны только в браузерах Webkit и Blink.
При использовании специфичных полей ввода, браузер вернется к стандартному полю text и опустит атрибуты с неподдерживаемыми значениями.
Всегда нужно использовать правильный вид поля!
Ключевое значение имеет использование правильного вида поля для тех данных, которые вы ожидаете получить. Данное утверждение выглядит очевидным, но у вас еще будут ситуации, когда вас будет тянуть использовать стандартное поле для ввода текста.
Разберем на примере ввода дат. В разных браузерах их поддержка отличается, и это создает некоторые проблемы при их использовании:
1 — Стандартное поле для ввода дат всегда преобразовывает вводимые значения в формат ГГГГ-ММ-ДД вне зависимости от принятого формата даты принят в вашей местности.
2 — Firefox и IE вернутся к стандартному текстовому полю, а юзерам возможно нужно ввести даты в формате ММ-ДД-ГГГГ, принятом в США, или формате ДД-ММ-ГГГГ, принятом в европейских странах.
3 — Инструмент для выбора даты в Java Script и в jQuery UI дает возможность установить персонализованный формат вводимой даты – или даже ГГГГ-ММ-ДД для корректности – но нет гарантии, что на устройстве пользователя будет доступен Java Script.
Самое простое решение в этом случае – отказаться от применения поля ввода date в HTML5, возвратиться к текстовому полю и создать собственное управление датой. Не стоит этого делать. Вряд ли вы когда-нибудь сможете создать собственный элемент управления датой, который будет действовать на любых устройствах и со всеми экранными разрешениями, будет совместим с клавиатурой, мышью и сенсорами и будет продолжать работать при отсутствии Java Script. Так, в частности, браузеры для мобильных телефонов часто опережают обычные браузеры по набору доступных инструментов и обладают отличными элементами для сенсорного управления.
Виды полей HTML5 – это будущее в сайтостроении. Применяйте их и при необходимости добавляйте полизаполнители Java Script в случаях, когда вам требуется надежная кроссбраузерная поддержка. Но обратите внимание, что будет требоваться…
Проверка со стороны сервера
Ну нужно надеяться на проверку со стороны браузера. Даже если вы смогли заставить всех в обязательном порядке обновить Chrome до последней версии, вы не сможете предотвратить:
- баги браузера или ошибки Java Script, которые будут разрешать недействительные данные
- случаев, когда пользователь изменит ваш HTML, и когда скрипты будут использовать инструменты браузера
- переписывание данных из систем, находящихся вне контроля
- перехват данных во время их перемещения между браузером и сервером (как это бывает по HTTP)
Проверка со стороны клиента не заменяет и никогда не заменит проверку со стороны сервера. Проверка данных пользователя со стороны сервера является существенным условием, а со стороны клиента – желательным.
И, последнее, знайте, что даты можно получить в формате ГГГГ-ММ-ДД или в ином формате, который вы установили для пользователя (ММ-ДД-ГГГГ, ДД-ММ-ГГГГ и так далее) Проверяйте цифры в первых 4 символах или, в случае необходимости, используйте собственные методы анализа языка и оболочки даты.
В данной статье мы охватили большой объем материала. Следующая статья будет посвящена свойствам CSS, которые относятся к формам.
dwstroy.ru
HTML5 | Элементы форм
Элементы форм
Последнее обновление: 08.04.2016
Формы состоят из определенного количества элементов ввода. Все элементы ввода помещаются между тегами <form> и </form>
Наиболее распространенным элементом ввода является элемент input. Однако реальное действие этого элемента зависит от того, какое значение установлено у его атрибута type. А он может принимать следующие значения:
text: обычное текстовое поле
password: тоже текстовое поле, только вместо вводимых символов отображаются звездочки, поэтому в основном используется для ввода пароля
radio: радиокнопка или переключатель. Из группы радиокнопок можно выбрать только одну
checkbox: элемент флажок, который может находиться в отмеченном или неотмеченном состоянии
hidden: скрытое поле
submit: кнопка отправки формы
color: поле для ввода цвета
date: поле для ввода даты
datetime: поле для ввода даты и времени с учетом часового пояса
datetime-local: поле для ввода даты и времени без учета часового пояса
email: поле для ввода адреса электронной почты
month: поле для ввода года и месяца
number: поле для ввода чисел
range: ползунок для выбора числа из некоторого диапазона
tel: поле для ввода телефона
time: поле для ввода времени
week: поле для ввода года и недели
url: поле для ввода адреса url
file: поле для выбора отправляемого файла
image: создает кнопку в виде картинки
Кроме элемента input в различных модификациях есть еще небольшой набор элементов, которые также можно использовать на форме:
button: создает кнопку
select: выпадающий список
label: создает метку, которая отображается рядом с полем ввода
textarea: многострочное текстовое поле
Атрибуты name и value
У всех элементов ввода можно установить атрибуты name и value. Эти атрибуты имеют важное значение. По атрибуту name
мы можем идентифицировать поле ввода, а атрибут value позволяет установить значение поля ввода. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы в HTML5</title> </head> <body> <form method="get" action="index.html"> <input type="text" name="login" value="Tom"/> <input type="password" name="password"/> <input type="submit" value="Войти" /> </form> </body> </html>
Здесь текстовое поле имеет значение «Tom» (как указано в атрибуте value), поэтому при загрузке веб-страницы в этом поле мы увидим данный текст.
Поскольку методом отправки данных формы является метод «get», то данные будут отправляться через строку запроса. Так как нам в данном случае не важно, как данные будут приниматься, не важен сервер, который получает данные, поэтому в качестве адреса я установил ту же самую страницу — то есть файл index.html. И при отправке мы сможем увидеть введенные данные в строке запроса:
В строке запроса нас интересует следующий кусочек:
login=Tom&password=qwerty
При отправке формы браузер соединяет все данные в набор пар «ключ-значение». В нашем случае две таких пары: login=Tom и
password=qwerty. Ключом в этих парах выступает название поля ввода, которое определяется атрибутом name, а значением — собственно
то значение, которое введено в поле ввода (или значение атрибута value).
Получив эти данные, сервер легко может узнать, какие значения в какие поля ввода были введены пользователем.
metanit.com