Переосмысление форм в HTML5

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

Введение Что в магазине?

«В недавнем прошлом большая часть инноваций в формах возникла из-за использования JavaScript, а не устаревшего HTML. Хотя нет ничего плохого в использовании JavaScript для улучшения форм, он приносит свою простоту использования наряду со многими головными болями при разработке». «

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

В прошлом изменения в формах были относительно незначительными. Если вы вернетесь к спецификации HTML 3.2 , которая была завершена в 1997 году, вы увидите те же базовые формы ввода, которые вы используете сегодня. Выберите, текстовая область, радио, флажки и текст были доступны тогда. Поколение веб-разработчиков выросло, написав те же стандарты. В то время как более поздние версии спецификации вносили изменения в формы, такие как набор полей, метка, условные обозначения, и действия с формами, такие как onsubmit или onchange, способ, которым мы работаем с пользовательским вводом, оставался несколько статичным. В недавнем прошлом большинство нововведений в формах появилось благодаря использованию JavaScript, а не старомодному HTML. Хотя нет ничего плохого в том, чтобы использовать JavaScript для улучшения форм, он приносит свою простоту использования вместе со многими головными болями при разработке. Например, существует много разных способов проверки форм с использованием JavaScript, но что происходит, когда у пользователя не включен JavaScript? Далее мы должны применить логику к нашим серверным сценариям. В конце концов, у нас не такой последовательный способ обработки пользовательского ввода. HTML 5 не решает все проблемы, связанные с инновациями, за последние 13 лет, но он дает нам множество инструментов для
делает нашу работу намного проще, и позволяет нам производить гораздо более последовательные формы.

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

Изменения в элементах ввода: новая игровая площадка.

Входные атрибуты — это те элементы, которые вы помещаете во входные данные, чтобы объяснить, что делают входные данные. Например:

В приведенном выше примере входными атрибутами являются значение, размер и максимальная длина. Они были вокруг в течение достаточно долгого времени. HTML 5 не меняет концепцию наличия элементов ввода, а добавляет еще немало. Кажется, что есть, по крайней мере, одно вычитание, или, скорее, подстановка, и это означает, что изменение отключенного теперь становится доступным только для чтения. Спецификация не раскрывает детали изменения, но если бы я был игроком, сделавшим ставку, это изменение позволило бы обработчикам событий, таким как onblur, запускать — что предотвращает отключенный элемент.

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

Автофокус

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

Выше элемент автофокуса фокусирует ввод текста при загрузке страницы. Это означает, что, как только страница загружается, этот текстовый ввод готов принять запись. Вы можете начать печатать прямо сейчас, так как этот элемент имеет фокус документа. То, что мы раньше делали в JavaScript в строке или около того, теперь можно сделать одним словом.

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

Список

Атрибут списка очень классный. По сути, вы предоставляете список данных, и он создаст выпадающий список из вашего ввода текста. Думайте об этом как о естественном автоматическом завершении. Подумайте немного дальше, и вместо того, чтобы добавлять библиотеку JavaScript для быстрого поиска на основе ключевых записей, вы можете просто добавить обработчик события «onchange» с сообщением AJAX, и вы получите падение. вниз, который становится более конкретным, когда пользователь вводит в поле. В HTML 5 эта функциональность может быть создана всего несколькими строками.

множественный

Атрибут Multiple позволяет вам выбрать несколько элементов из вашего списка данных. Например, у вас может быть форма, которая отправляет сообщения с вашего сайта. Используя несколько элементов, вы можете разрешить пользователю выбирать нескольких получателей для отправки этого сообщения. Опять же, это то, что мы можем сделать сейчас с помощью небольшого количества JavaScript, но с HTML 5 нам нужно добавить только одну команду в форму.

Заполнитель

Атрибут placeholder — это то, что мы делали годами с легким JavaScript. Что это делает, как только ввод фокусируется, Тип Здесь исчезнет. Если не было изменений в тексте на размытие, тогда снова появится Type Here. Еще раз, мы берем немного JavaScript из картинки, чтобы улучшить пользовательский опыт.

необходимые

Эти следующие новые атрибуты все усиливают наше развитие. За исключением «шага», каждый помогает в проверке пользовательского ввода.

Обязательный атрибут в точности такой, как кажется. Я, разработчик этой веб-страницы, требую, чтобы вы заполнили эту форму, прежде чем нажать на кнопку отправить. Это базовая проверка формы, которую мы используем сегодня с JavaScript. То, что раньше требовалось библиотеке, чтобы добавить обязательную запись, теперь принимает одно слово в форме.

RegEx

Из всех новых атрибутов формы я больше всего взволнован. Мистер Форм, позвольте представить вам моего хорошего друга, Регекса. Правильно, мы можем проверять записи форм на основе регулярных выражений. Хотя этот поначалу будет загадочным, поскольку вы изучаете регулярные выражения, возможности проверки теперь становятся безграничными.

Проверка

Я объединил последние три в один пример, поскольку все они имеют дело с проверкой чисел или диапазоном чисел, которые мы можем включить.

• Min: минимальное значение, которое примет вход.
• max: максимальное входное значение, которое примет вход.

Каждый из них имеет дело с числовыми значениями. Не путайте их с maxlength, которое имеет дело с количеством символов, которое займет вход. Шаг элемент так же, как это звучит. Когда вы выбираете числовое значение, увеличивайте его на .5 или вниз на .5 — это означает, что этот тип ввода будет иметь возможные значения 1, 1,5, 2, 2,5 и т. Д.

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

Изменения в типах ввода: много любви.

Есть восемь новых типов ввода, не считая всех новых типов даты и времени, которые для наших целей я объединяю в один. Важно отметить, что браузеры, которые не реализовали новые типы ввода, будут ухудшаться до типа текста в каждом, который я тестировал. Новые типы ввода дают возможность проверять пользовательский ввод на основе типа, который вы используете. Предстоит еще больше подтверждений, которые я буду обсуждать в следующих двух разделах. Каждый из новых типов ввода позволяет нам отделиться от текстового поля чем-то более конкретным. Например, чтобы получить целочисленные или плавающие значения до HTML 5, мы в основном использовали тип ввода текста. Как раз из аннотации, это интуитивно понятно для начинающих. Будучи более конкретным, мы получим лучший визуальный контроль над нашим интерфейсом, так как чем конкретнее элемент в HTML, тем больше у вас контроля внутри CSS и тем проще определить эти визуальные элементы. Кроме того, благодаря новым специфическим типам ввода браузеры теперь могут точно настроить диапазон ввода. Наконец, с появлением мобильных вычислений мы можем создавать элементы формы веб-приложений, которые можно стилизовать под естественные приложения или изменить форму клавиатуры, которую мы используем.

Давайте сначала посмотрим на обработку чисел:

Числа, целые и числа с плавающей точкой

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

Даты и время

Еще одно большое облегчение для стандартизации вашей серверной разработки — это новые типы ввода даты и времени. Из реализации Opera, которую я видел, каждая показывает выпадающий календарь, который позволяет вашему пользователю выбрать дату. Опять же, мы можем подтвердить на нашей веб-странице, что входные данные имеют формат, который мы ожидаем. Каждый делает именно то, что вы думаете; Вы выбираете месяц, неделю, день или время. Немного другой — это datetime-local, который показывает дату и время без смещения часового пояса. Например, если вы выбираете рейс, datetime-local будет показывать время и дату в городе, куда вы направляетесь, что не обязательно является часовым поясом, в котором вы находитесь в данный момент.

URL-адреса, электронные письма, телефон и цвет

Каждый из этих типов ввода носит описательный характер. Типы URL и Email имеют валидацию действительных шаблонов URL и шаблонов электронной почты. Однако телефон не соответствует какой-либо конкретной схеме. Он просто удаляет разрывы строк. Если вы хотите применить шаблон проверки к телефонному полю, вы всегда можете использовать элемент шаблона. Каждый из этих элементов минус цвет также будет принимать атрибут списка минус цвет. Цвет — это чудо сгустка; Я вижу его практическое использование, где вы можете выбрать цвет из выпадающего списка, который показывает цвета, и принудительно ввести текстовый ввод чего-то вроде # 000000, но, на мой взгляд, он не совсем соответствует остальным изменениям. Это похоже на игру, которая не похожа на другие.

Как и атрибуты, реализация браузера с типом ввода довольно нечеткая. Мой iPhone поддерживает больше, чем Safari, что немного забавно для меня. Это лучшее, что я смог найти, как поддержать.

Изменения в элементах формы: не столь радикальные

Количество изменений в элементах формы не так резко, как входные атрибуты и типы. Тем не менее, есть несколько новых элементов, о которых нужно знать. Мы уже рассмотрели список данных — именно так мы определяем, что будет выбрано из вызова элемента списка, — но мы не видели keygen, output, progress или meter. Вне кейгена. это не так очевидно, как новые атрибуты. Давайте немного углубимся в это.

Keygen

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

Выход

Думайте об элементе вывода как о текстовой области на стероидах. Что вы можете сделать, это рассчитать на основе двух числовых текстовых вводов и вывести эти вычисления, даже не отправляя форму обратно на сервер. Если вы просто вернете false onsubmit, в приведенном выше примере он вычислит число_1 плюс число_2 и предоставит вам ответ. Как и многие вещи, обсуждаемые в этом руководстве, это то, что мы можем сделать сегодня с помощью JavaScript, но это действительно уменьшает объем кода, который нам нужно написать в будущем.

Прогресс и Метр

Последние два новых элемента — прогресс и метр. Они похожи, но с одним отличием. Прогресс предназначен для измерения прогресса конкретной задачи. Например, если у вас есть еще пять страниц, которые нужно заполнить до проведения опроса, вы увидите элемент прогресса в этой области. Счетчик, с другой стороны, является измерением чего-либо. Возможно, вы захотите показать оставшееся дисковое пространство, оставленное пользователем. Вы бы использовали измеритель для отображения этого измерения. Появились новые граничные элементы, такие как низкий, высокий и оптимальный. Они заменяют элементы min или max; поэтому, если они превышают их, они становятся новыми нижним и верхним пределами формы.

Как и остальные изменения формы HTML 5, реализация браузера в настоящее время оставляет желать лучшего. Вот что, кажется, работает, а что нет (на момент написания статьи).

Вывод

Из того, что я вижу, нет причин не начинать использовать формы HTML 5. Элементы ввода и типы все хорошо ухудшаются, даже в IE6, где они либо игнорируются как элементы, либо ухудшаются до текстового ввода. Нам придется немного подождать, пока атрибуты валидации станут реальностью, но с учетом вышесказанного, сегодня есть некоторые варианты использования без этих преимуществ. Например, iPhone изменяет клавиатуру, если вы используете типы URL, электронной почты или номера. Тип ввода диапазона уже поддерживается в браузерах WebKit, так что вы можете стать первым ребенком в блоке с ползунком чисел, который работает без JavaScript. Спецификация быстро дорабатывается, и браузеры довольно быстро догоняют смену парадигмы. Нет времени, подобного настоящему, чтобы хотя бы начать играть с этими новыми игрушками! Как вы думаете?