Целью новой функции HTML5 является улучшение поддержки встраивания, таких как видео и аудио, а также предоставление разработчикам и конечным пользователям простого программирования и лучшего пользовательского опыта. Теперь интернет -мир ждет, и браузер может поддерживать новую версию HTML5, когда он обновляется. HTML5 поддерживался многими браузерами, такими как Safari, Chrome, Firefox, Opera, IE9. Это обратно совместимо, но сегодняшние браузеры не могут быть полностью совместимы с HTML5.
Обновление веб -сайта на HTML5 довольно простой, поскольку он совместим с HTML4. Вам просто нужно изменить свой документ. Это новое обновление помогает сделать вещи простыми, поэтому вы можете обновить все свои веб -сайты, и они не будут сбой, потому что все теги HTML4 по -прежнему на 100% поддерживаются в HTML5.
Формы HTML5 определяют более десятка новых типов и функций ввода, и эти новые элементы позволяют программистам программировать легче. Давайте поговорим об этих новых функциях ниже.
1. Заполнитель ввода заполнителя
В HTML4 разработчики используют JavaScript и jQuery в качестве заполнителей ввода, в то время как в HTML5 разработчики могут легко отображать заполнителя. Что такое заполнители? Заполнитель - это быстрый текст, который появляется в поле ввода. Когда вы нажимаете на поле ввода, оно автоматически исчезнет. Вы можете запустить образец текста, который пользователь должен ввести в текстовое поле. Скорее, есть поле для ввода электронной почты, где вы можете установить заполнители [email protected], и он исчезнет, когда вы их нажимаете.
Т.е. ff safari Chrome Opera iPhone Android
- 3.7+ 4+ 4+ 11+ 4+ -
2. Автоматические события фокусировки
HTML5 просто загрузите веб -страницу, и веб -страница автоматически перемещает фокус на конкретный поле ввода, как JavaScript. В чем разница? Поскольку сейчас это просто тег HTML, пользователи могут легко отключить это свойство в своем браузере. Не все браузеры поддерживают автофокус, но браузеры не просто игнорируют это свойство. Если вы хотите, чтобы все браузеры работали, просто добавьте новые свойства AutoFocus HTML5, а затем проверьте, поддерживает ли браузер автофокус. Если вы можете, вам не нужно использовать сценарий автофокуса. Если у вас его нет, вам нужно добавить сценарий автофокусировки.
FF IE Safari Chrome Opera iPhone Android
- 4+ 4+ 3+ 10+ - -
3. HTML недавно определенный тип ввода
1. Электронная почта
Первое окно ввода, которое я собираюсь сказать, - это адрес электронной почты. Старые браузеры, которые не поддерживают новые типы, также просто относятся к ним как к текстовому поле, и 99% пользователей не заметят это изменение, пока они не представит форму (в настоящее время будет проверка формы).
2. Веб -сайт
Давайте поговорим о ящике для ввода URL. Если вам нужно ввести URL, вы ожидаете ввести его, как http://www.vevb.com. Теперь в блоке ввода типа URL, в iPhone будет отображаться переменная виртуальная клавиатура. Пользователи могут легко ввести черты и .com. Точно так же пользователи не знают об этом перед отправкой формы.
3. Числа
Чтобы получить соответствующие номера в HTML4, вы должны использовать сценарии jQuery, чтобы помочь с проверкой. HTML5 добавляет числовые типы. Некоторые дополнительные свойства (необязательно): Мин: Указывает минимальное входное число, которое может быть принято с помощью ввода. Макс: это максимальное число, разрешенное для входа. Шаг: правовой интервал для входного домена атрибута по умолчанию составляет 1.
Как показано на рисунке выше, разрешены только числа (в большинстве случаев они не будут замечены до тех пор, пока при подаче не будет выявлена ошибка), только 0, 2, 4 являются законными (6 является незаконным, потому что шаг - 10, а законное - 0, 10, 20 ...).
4. Цифровой слайдер
HTML5 позволяет использовать новый тип, называемый диапазоном, а окно ввода становится слайдером. Форма вашего сайта может использовать слайдер. Его тег атрибута такой же, как и тип номера, просто измените тип типа Type = 'number' на type = 'range'.
5. Календарь
Лучшие новые дополнения на сегодняшний день, типы выбора даты с названием дата и DateTime (есть и другие дополнительные типы даты/времени, такие как время, неделя, месяц и местный календарь). Многие фреймворки JavaScript, такие как jQuery UI и YIU, уже имеют эти элементы управления, но добавление селектора календаря довольно раздражает. HTML5 определяет новый локальный селектор дат, который не должен включать использование сценариев на странице. На данный момент Opera является единственной, которая полностью поддерживает эту функцию, и для других браузеров вы можете сделать альтернативный сценарий, если браузер не поддерживает ее. Однако, в конечном счете, все браузеры будут обновлены.
6. Поиск
HTML5 добавляет тип ввода поиска. Это ничто, но это хорошее изменение для некоторых пользователей. Он может просто обведите края блока ввода автоматически, и когда вы начнете печатать, будет маленький x справа. Не все браузеры в настоящее время поддерживают его.
7. Цвет
HTML5 также определяет цвет типа, который позволяет выбрать цвет и вернуть шестнадцатерическое значение. Opera11 - единственный браузер, который поддерживает этот тип браузера. Тем не менее, не должно быть много людей, использующих этот тип, поэтому это не большая проблема, чтобы не поддерживать его.
8. Проверка формы
Самая захватывающая новая функция - проверка формы. Большинство разработчиков выполняют проверку формы, клиент или сервер. Возможно, валидатор формы HTML5 не может заменить вашу проверку на стороне сервера, но в конечном итоге он в конечном итоге заменит вашу проверку на стороне клиента. Проблема с проверкой JavaScript заключается в том, что пользователям легко обходить его, ее можно легко обойти, просто отключив JavaScript. Теперь, когда HTML5 обеспокоен, вам не нужно беспокоиться об этом. Все ошибки являются собственными подсказками HTML5, а JavaScript не используется.
Т.е. ff safari Chrome Opera iPhone Android
- 4+ 5+ 10+ 9+ - -
9. Требуемые поля
Проверка формы HTML5 не ограничивается типом поля проверки, также позволяет вызвать новый дополнительный тег, требуется. Это новое свойство позволяет разработчикам проверить, что входная коробка заполняется без использования JavaScript.
Резюме: приведенные выше обновления имеют решающее значение для сокращения циклов разработки и улучшения пользовательского опыта. Как только все браузеры примут HTML5, следующее поколение веб -сайтов превзойдет любые ожидания. HTML5 не является хлопотом, он очень поможет разработчикам и улучшит пользовательский опыт.