Новые типы элемента

Атрибуты

Атрибут	Значение	Описание
accept	file_extension audio/* video/* image/*media_type	Задает фильтр для типов файлов, которые пользователь может выбрать в диалоговом окне ввода файла (только для type=»file»)
align	left right top middle bottom	Не поддерживается в HTML5. Определяет выравнивание входного изображения (только для type=»image»)
alt	text	Определяет альтернативный текст для изображений (только для type=»image»)
autocomplete	on off	Указывает, должно ли в элементе <input> быть включено автозаполнение
autofocus	autofocus	Указывает, что элемент <input> должен автоматически получать фокус при загрузке страницы
checked	checked	Указывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type=»checkbox» или type=»radio»)
dirname	inputname.dir	Указывает, что направление текста будет отправлено
disabled	disabled	Указывает, что элемент <input> должен быть отключен
form	form_id	Определяет форму, к которой принадлежит элемент <input>
formaction	URL	Указывает URL-адрес файла, который будет обрабатывать элемент управления вводом при отправке формы (для type=»submit» и type=»image»)
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Определяет, как данные формы должны быть закодированы при отправке их на сервер (для type=»submit» and type=»image»)
formmethod	getpost	Определяет метод HTTP для отправки данных на URL действия (для type=»submit» и type=»image»)
formnovalidate	formnovalidate	Определяет, что элементы формы не должны проверяться при отправке
formtarget	_blank _self _parent _topframename	Указывает, где отображать ответ, полученный после отправки формы (для type=»submit» и type=»image»)
height	pixels	Определяет высоту элемента <input> (только для type=»image»)
list	datalist_id	Относится к элементу <datalist> который содержит предопределенные параметры для элемента <input>
max	number date	Определяет максимальное значение для элемента <input>
maxlength	number	Задает максимально допустимое количество символов в элементе <input>
min	number date	Определяет минимальное значение для элемента <input>
multiple	multiple	Указывает, что пользователь может ввести более одного значения в элементе <input>
name	text	Определяет имя элемента <input>
pattern	regexp	Определяет регулярное выражение, с которым проверяется значение элемента <input>
placeholder	text	Указывает краткую подсказку, которая описывает ожидаемое значение элемента <input>
readonly	readonly	Указывает, что поле ввода доступно только для чтения
required	required	Указывает, что поле ввода должно быть заполнено перед отправкой формы
size	number	Определяет ширину в символах элемента <input>
src	URL	Указывает URL-адрес изображения, которое будет использоваться в качестве кнопки отправки (только для type=»image»)
step	numberany	Определяет интервал между юридическими числами в поле ввода
type	button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week	Определяет type элемента <input> для отображения
value	text	Определяет значение элемента <input>
width	pixels	Определяет ширину элемента <input> (только для type=»image»)

Значение атрибута type: tel

Элемент <input> типа tel применяется для того, чтобы сообщить браузеру, что в соответствующем поле формы пользователь должен ввести телефонный номер. Несмотря на то, что телефонный номер представляет из себя числовой формат вводимых данных, в браузерах поле типа tel ведет себя как обычное текстовое поле ввода. Однако, применение типа поля ввода tel приводит к появлению на экранах мобильных устройств специальной клавиатуры, предназначенной для облегчения ввода информации. Синтаксис поля ввода номера телефона:

• Результат
• HTML-код
• Попробуй сам » /

Телефон:

Значение
Описание

button
Создает кнопку с произвольным действием, действие по умолчанию не определено:

checkbox
Создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вариантов:Я знаю HTML

color

Генерирует палитры цветов обеспечивая пользователям возможность выбирать значения цветов в шестнадцатеричном формате RGB:

date

Позволяет вводить дату в формате дд.мм.гггг.:
День рождения:

datetime-local

Позволяет вводить дату и время, разделенные прописной английской буквой по шаблону дд.мм.гггг чч:мм:
Дата встречи — день и время:

email

Браузеры, поддерживающие язык HTML5, проверят, соответствует ли введенный посетителем адрес электронной почты принятому стандарту для данного типа адресов:
E-mail:

file
Позволяет загружать файлы с компьютера пользователя:
Выберите файл:

hidden
Создает скрытый элемент, не отображаемый пользователю. Информация,
хранящаяся в скрытом поле, всегда пересылается на сервер и не может быть изменена ни пользователем, ни браузером.

image
Создает элемент в виде графического изображения, действующий аналогично кнопке Submit:

month

Позволяет пользователю вводить год и номер месяца по шаблону гггг-мм:

number

Создает поле, в которое пользователь может вводить только числовое значение. Для типа ввода number браузер предоставляет виджет счетчика, который представляет собой поле, справа от которого находятся две кнопки со стрелками — для увеличения и уменьшения числового значения. Для указания минимальных и максимальных допустимых значений ввода предназначены атрибуты min и max, а также можно установить шаг приращения с помощью атрибута step:
Укажите число (от 1 до 10):

password
Текстовое поле для ввода пароля, в котором все вводимые символы заменяются звездочкой либо другим, установленным браузером значком:
Введите пароль:

radio
Создает элемент-переключатель в виде небольшого кружка (иногда их называют радио-кнопками):
Радио-кнопки:

range

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

reset
Создает кнопку, которая очищает поля формы от введенных пользователем данных:

search

Создает поле поиска, по умолчанию поле ввода имеет прямоугольную форму:
Поиск:

submit
Создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее на сервер обработчику:

text
Создает однострочное поле ввода текста:

time

Допускает ввод значений в 24-часовом формате, например 17:30. Браузеры отображают его как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускают ввод только значений времени:
Выберите время:

url

Заставляет браузер проверять, правильно ли пользователь ввел URL-адрес. Некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран, при попытке отправить форму с некорректными значениями URL-адреса:
Главная страница:

week

Позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг:
Выберите неделю:

Дата и время

В HTML5 определяется несколько типов данных, связанных со временем. Браузеры, которые поддерживают типы дат, могут выводить удобный выпадающий календарь, в котором пользователь может выбрать требуемую дату и/или время. Это не только устраняет неопределенность относительно правильного формата даты, но также запрещает случайно (или нарочно) установить несуществующую дату. Интеллектуальные браузеры могут делать еще больше, например поддерживать интеграцию с персональным календарем.

Ниже показан пример использования дат:

В таблице ниже перечислены шесть новых форматов HTML5 для дат и времени, дано их краткое описание:

Типы данных <input> для дат и времени

Тип данных	Описание
date	Дата по шаблону ГГГГ-ММ-ДД
time	Время в 24-часовом формате с необязательными секундами, по шаблону чч:мм:сс.сс
datetime-local	Дата и время, разделенные прописной английской буквой T (по шаблону ГГГГ-ММ-ДДTчч:мм:сс)
datetime	Дата и время, как и для типа datetime-local, но со смещением временного пояса. Используется такой же шаблон (ГГГГ-ММ-ДДTчч:мм:сс-чч:мм), как и для элемента <time>
month	Год и номер месяца по шаблону ГГГГ-ММ
week	Год и номер недели по шаблону ГГГГ-Номер недели

Браузеры, которые поддерживают типы данных для дат и времени, также поддерживают атрибуты min и max для них, что позволяет устанавливать минимальные и максимальные даты при условии использования правильного формата даты. Это продемонстрировано в примере выше.

Input Type Submit

defines a button for
submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing
input data.

The form-handler is specified in the form’s
attribute:

Example

<form action=»/action_page.php»>  <label for=»fname»>First
name:</label><br>  <input type=»text» id=»fname» name=»fname»
value=»John»><br>  <label for=»lname»>Last name:</label><br> 
<input type=»text» id=»lname» name=»lname» value=»Doe»><br><br> 
<input type=»submit» value=»Submit»></form>

This is how the HTML code above will be displayed in a browser:

If you omit the submit button’s value attribute, the button will get a default text:

Example

<form action=»/action_page.php»>  <label for=»fname»>First
name:</label><br>  <input type=»text» id=»fname» name=»fname»
value=»John»><br>  <label for=»lname»>Last name:</label><br> 
<input type=»text» id=»lname» name=»lname» value=»Doe»><br><br> 
<input type=»submit»></form>

Тип ввода «submit»

определяет кнопку для предоставление данных формы в обработчик форм.

Обработчик форм обычно представляет собой серверную страницу со скриптом для обработки входных данных.

Обработчик формы задается в окне формы атрибут :

Пример

<form action=»/action_page.php»>
  <label for=»fname»>Имя:</label><br>
  <input type=»text» id=»fname» name=»fname» value=»Андрей»><br>
  <label for=»lname»>Фамилия:</label><br>
  <input type=»text» id=»lname» name=»lname» value=»Щипунов»><br><br>
  <input type=»submit» value=»Отправить»></form>

Именно так приведенный выше HTML код будет отображаться в браузере:

Если вы опустите атрибут кнопки , то кнопка получит текст по умолчанию:

Пример

<form action=»/action_page.php»>  <label for=»fname»>Имя:</label><br>
  <input type=»text» id=»fname» name=»fname»
value=»Андрей»><br>  <label for=»lname»>Фамилия:</label><br> 
<input type=»text» id=»lname» name=»lname» value=»Щипунов»><br><br> 
<input type=»submit»></form>

Hoverable inputs

The w3-hover-color classes adds a background color to the input field on mouse-over:

Example

<input class=»w3-input w3-hover-green» type=»text»><input class=»w3-input
w3-border w3-hover-red» type=»text»><input class=»w3-input
w3-border w3-hover-blue» type=»text»>

Animated Inputs

The w3-animate-input class transforms the width of an input field to 100% when it gets focus:

Example

<input class=»w3-input w3-animate-input»
type=»text» style=»width:30%»>

Example

<input class=»w3-check» type=»checkbox» checked=»checked»>
<label>Milk</label><input class=»w3-check»
type=»checkbox»><label>Sugar</label>
<input class=»w3-check» type=»checkbox» disabled>
<label>Lemon (Disabled)</label>

Example

<input class=»w3-radio» type=»radio» name=»gender» value=»male» checked>
<label>Male</label><input class=»w3-radio»
type=»radio» name=»gender» value=»female»><label>Female</label><input class=»w3-radio»
type=»radio» name=»gender» value=»» disabled><label>Don’t know (Disabled)</label>

Select Options

Example

<select class=»w3-select» name=»option»>  <option value=»» disabled
selected>Choose your option</option>  <option value=»1″>Option
1</option>  <option value=»2″>Option 2</option>  <option
value=»3″>Option 3</option></select>

Example

<select class=»w3-select w3-border» name=»option»>

Form Elements in a Grid

In this example, we use W3.CSS’ Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width).
You will learn more about this later.

Example

<div class=»w3-row-padding»>  <div class=»w3-third»>   
<input class=»w3-input w3-border» type=»text» placeholder=»One»> 
</div>  <div class=»w3-third»>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-third»>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

Grid with Labels

Example

<div class=»w3-row-padding»>  <div class=»w3-half»>   
<label>First Name</label>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-half»>    <label>Last
Name</label>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

❮ Previous
Next ❯

Animated Inputs

The w3-animate-input class transforms the width of an input field to 100% when it gets focus:

Example

<input class=»w3-input w3-animate-input»
type=»text» style=»width:30%»>

Example

<input class=»w3-check» type=»checkbox» checked=»checked»>
<label>Milk</label><input class=»w3-check»
type=»checkbox»><label>Sugar</label>
<input class=»w3-check» type=»checkbox» disabled>
<label>Lemon (Disabled)</label>

Example

<input class=»w3-radio» type=»radio» name=»gender» value=»male» checked>
<label>Male</label><input class=»w3-radio»
type=»radio» name=»gender» value=»female»><label>Female</label><input class=»w3-radio»
type=»radio» name=»gender» value=»» disabled><label>Don’t know (Disabled)</label>

Select Options

Example

<select class=»w3-select» name=»option»>  <option value=»» disabled
selected>Choose your option</option>  <option value=»1″>Option
1</option>  <option value=»2″>Option 2</option>  <option
value=»3″>Option 3</option></select>

Example

<select class=»w3-select w3-border» name=»option»>

Form Elements in a Grid

In this example, we use W3.CSS’ Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width).
You will learn more about this later.

Example

<div class=»w3-row-padding»>  <div class=»w3-third»>   
<input class=»w3-input w3-border» type=»text» placeholder=»One»> 
</div>  <div class=»w3-third»>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-third»>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

Grid with Labels

Example

<div class=»w3-row-padding»>  <div class=»w3-half»>   
<label>First Name</label>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-half»>    <label>Last
Name</label>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

❮ Previous
Next ❯

Затенение символов в поле ввода

Если для поля, отличного от типа password, требуется создать маску, т. е. затенить вводимые символы, стоит прибегнуть к свойству . Оно принимает значения , , или , но, к сожалению, на сегодняшний день доступно только для Webkit с соответствующим префиксом:

input {
  -webkit-text-security: circle; /* эмуляция input */
}

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

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

Несколько необычных атрибутов элемента

Стандарт HTML5 признает еще несколько атрибутов, используемых для управления браузером при заполнении форм. Не все эти атрибуты поддерживаются всеми браузерами. Тем не менее, с ними хорошо экспериментировать:

Атрибут spellcheck

Некоторые браузеры пытаются заполнить пробелы в знаниях правописания пользователя, проверяя орфографию вводимого текста. Очевидная проблема с этой услугой заключается в том, что не весь текст состоит из настоящих слов, и роспись волнистых красных подчеркиваний может очень быстро начать действовать пользователю на нервы. Чтобы браузер не проверял орфографию текста в поле, присвойте атрибуту spellcheck значение false, а для проверки — значение true.

По умолчанию разные браузеры действуют по-разному в отношении проверки орфографии, а установка атрибута spellcheck приводит к единообразному поведению.

Атрибут autocomplete

Некоторые браузеры пытаются сэкономить время пользователя, предлагая при вводе информации в поле значения, которые вводились в это поле ранее. Такое поведение не всегда желательно — как указывается в спецификации HTML5, некоторая информация может быть конфиденциальной (например, коды для запуска ядерных ракет 😉 или оставаться актуальной только непродолжительное время (например, одноразовый пароль входа в банковскую систему самообслуживания). Для таких полей установите значение атрибута autocomplete в off, чтобы браузер не предлагал возможных вариантов завершения вводимого в поле текста. А чтобы выполнять автозаполнение для определенного поля, установите значение его атрибута autocomplete в on.

Атрибуты autocorrect и autocapitalize

Эти атрибуты применяются для управления возможностями автоматического исправления и капитализации на некоторых мобильных браузерах, а именно в версиях Safari для iPad и iPhone

Атрибут multiple

HTML Теги

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Обнаружение изменений при вводе текста

Атрибут у поля формы позволяет использовать CSS-правило . Тогда только с помощью CSS и без Javascript, можно легко определить, есть ли в значение. Когда значение атрибута текстового должно быть видимым, в текстовом поле (из примера кода выше) будет показываться прозрачный пробел. Если браузер показывает содержимое из , точно известно, что у нет значения, т.е. поле не заполнено.

После ввода в текстовое поле текста браузер автоматически скрывает его . Это не будет заметно, поскольку в нём используется прозрачный пробел. Зато технически теперь у текстового поля есть значение, а браузер переключил отображаемое состояние подсказки (). Это состояние позволяет CSS управлять другими элементами в зависимости от того, есть ли в текстовом поле какое-нибудь значение или нет.

Как работает CSS-правило

Для того, чтобы добавить эффектный прыжок подсказки из поля наружу, нужны следующие условия:

1. Фокус помещён в текстовом поле
2. У есть какое-то значение. Это рассмотренный выше случай, когда скрывается .

Вот как написать эти условия в CSS:

Фрагмент CSS устанавливает стиль подписи-метки в зависимости от состояния текстового поля. Селектор — это то, что соединяет и следующий после него в HTML-коде и расположенный на том же уровне. Когда это CSS-правило становится активным, подпись к полю меняет свой внешний вид: перемещается и масштабируется. Т.е. покидает поле ввода и не мешает пользователю печатать в нём.

Чтобы оживить переход состояния метки, можно добавить такой переход.

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

Invalidating the input

We don’t want to use because we’ll kickstart the input with an invalid state. (When the input is empty, it’s already invalid).

This is where Chris Coyier swooped in to the rescue with » Form Validation UX in HTML and CSS».

In the article, Chris talks about a pseudo-class. It can be used to check whether a placeholder is shown.

The idea is:

1. You add a placeholder to your input
2. If the placeholder is hidden, it means the user typed something into the field
3. Proceed with validation (or invalidation)

Here’s the CSS (simplified version. For the complete version, check out Chris’s article)

Since I had both validation AND invalidation styles, I had to ensure the valid styles came after the invalid styles.

Here’s a demo for you to play with:

See the Pen Pure CSS Empty validation by Zell Liew (@zellwk) on CodePen.

Note: Edge doesn’t support , so it’s probably not a good idea to use it in production yet. There’s no good way to detect this feature.

Now back to the problem I couldn’t resolve.

Добавление готовых вариантов для ввода

Юзабилити полей можно улучшить, если предложить пользователю выбрать заданное значение из списка готовых через атрибут и дополняющий его элемент . Отличие от традиционного заключается в том, что поле доступно для редактирования и ввода любых значений, а предлагаемые варианты — элементы — показываются либо по желанию пользователя, либо во время ввода при условии частичного совпадения по первым (и далее) символам. Это отличное решение в тех случаях, когда вводимые данные можно предугадать засчёт ограниченного количества вариантов.

Для добавления в поле доступных опций в его атрибуте указывается идентификатор списка, которым, в свою очередь, должен обладать :

Рассуждения о семантике

Всю HTML-разметку веб-страницы можно сделать с помощью только . Это легко и часто даже как-то работает. По ситуации легко стилизовать и получить результат, который будет выглядеть приемлемо. Но такой способ работы обманчив. Многие вещи не будут работать нормально. В частности, у таких веб-страниц будут серьёзные проблемы с доступностью. Многие функции доступности встроены в HTML и работают «из коробки» при правильном применении HTML-элементов. Но если их использовать не по назначению, например заменить кнопки и метки абстрактными элементами, типа , браузер не получит достаточного представления об их использовании и назначении. Программы чтения с экрана и другие вспомогательные инструменты не смогут правильно интерпретировать эти элементы.

Это плохо не только для доступности, но и для самой HTML-разметки, состоящей из элементов одинакового типа, например, из одних . Поначалу с этим ещё можно справляться, но по мере развития кода, отсутствие семантики в разметке доставит немало проблем с его поддержкой и расширением. Поэтому следует использовать правильные HTML-элементы в правильном контексте, т.е. в соответствии с их назначением. Так можно бесплатно получить много готовых решений и обойтись без изобретения велосипедов.

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

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Tags

<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>