Спецификация. Это перевод страницы, которая расположена по-адресу http://www.quirksmode.org/ .

Автор перевода: Александр Барданов

HTML5 тесты - input

На этой странице представлены тесты новый полей ввода HTML5.

Также смотрите таблицу для мобильных браузеров .

Input IE 9 FF 4.0b11 Saf 5 Windows Saf 5 Mac Chrome 9 Chrome 10 Opera 11
<input type="color">
Нет Нет Нет Нет Да

Показывает цветовое колесо или похожий интерфейс.

<datalist>
Нет Да Ошибки Нет Да


<input 



list="ppk"



 name="list" />
<datalist 



id="ppk"



>
	<option label="ppk" value="ppk"></option>

	<option label="JavaScript" value="JavaScript"></option>
</datalist>


Показывает представленный значения, как подсказки или значения для автозаполнения. Пользователь может ввести альтернативное значение.

Safari прячет все после <datalist> . Это происходит из-за <option> тегов: уберите их и все будет работать, как нужно, но это меняет смысл datalist. Это не просто ошибка, ведь полностью изменяется функциональность.

Еще одним решением является добавление </option> тега.

<input type="date">
<input type="datetime">
<input type="time">
<input type="week">
Нет Нет Плохо Плохо Да Да

Показывает календарь в Opera. Поведение Safari/Chrome не так легко объяснить. Chrome 10 уже работает отлично.

Input IE 9 FF 4.0b11 Saf 5 Windows Saf 5 Mac Chrome 9 Chrome 10 Opera 11
<input type="email">
Нет Да Да Нет Минимально Да Да

Значения автоматически проверяются на то, являются ли они email адрессами. Если нет, то дальше обработка не идет.

  • Safari проверяет только на ОС Windows.
  • Chrome 9 показывает варианты для автозаполнения, но не проверяет значения. Chrome 10 проверяет.
<input type="number">
Нет Нет Да Нет Почти Да Минимально
  • Safari Windows проверяет значение полей.
  • Safari Mac выдает бесполезное поле и не проверяет никаких значений.
  • Chrome 9 так же выдает бесполезное поле, но ограничивает ввод только цифрами.
  • Opera выдает хорошее поле, но ничего не проверяет.
<input type="range">
Нет Нет Почти Да Да

Показывает слайдер.

Opera и Chrome позволяют работать со слайдером с клавиатуры. Safari - нет.

Input IE 9 FF 4.0b11 Saf 5 Windows Saf 5 Mac Chrome 9 Chrome 10 Opera 11
<input type="search">
Не тестируемо Нет Да Да Да

Safari и Chrome добавляют крестик для удаления всего введенного в поле, когда пользователь уже что-то написал.

На ОС Windows, Safari и Chrome делают поле поиска чуть короче, чем обычное текстовое поле. Opera - нет.

<input type="tel">
Ничего особенного

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

<input type="url">
Нет Возможно Возможно Нет Нет Возможно Возможно

Значение автоматически расценивается, как ссылка. Если нет - дальше ничего не происходит.

Input IE 9 FF 4.0b11 Saf 5 Windows Saf 5 Mac Chrome 9 Chrome 10 Opera 11

Атрибуты

Input IE 9 FF 4.0b11 Saf 5 Windows Saf 5 Mac Chrome 9 Chrome 10 Opera 11
autofocus
Нет Да Да Да Почти

<input type="text" autofocus>

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

multiple
Нет Да Да Да Да

<input type="file" multiple>

Позволяет пользователям загружать несколько файлов за один раз.

pattern
Нет Да Да Нет Нет Да Да

<input pattern="[0-9]{4}[ ]?[A-Z]{2}" />

Значение должно повторять шаблон.

placeholder
Нет Да Да Да Да

<input type="text" placeholder="Some text">

Данный текст будет показываться до тех пор, пока пользователь не переведет фокус на данное поле.

readonly
Да Да Да Да Да

<input type="number" readonly>

Пользователь не может редактировать это поле.

required
Нет Да Да Нет Нет Да Да

<input type="text" required>

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

Input IE 9 FF 4.0b11 Saf 5 Windows Saf 5 Mac Chrome 9 Chrome 10 Opera 11