Портал интересного Sotel - будь как дома

  • Вход
  • Регистрация
  • HTML5 - Новые поля ввода (Рейтинг: 0)

    Печать / RSS
    Практически на каждом сайте можно встретить форму, куда пользователь должен что-то ввести. Это может быть форма регистрации, форма комментариев или подписки.

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


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

    Раньше, к примеру, чтобы проверить правильность ввода Email адреса, приходилось использовать довольно нетривиальные регулярки, которые, кстати отталкивают немалый процент новичков.
    Теперь для этого существует input type="email". А для проверки URL-адреса — input type="url".

    Новые типы полей пока что не поддерживаются всеми браузерами, но отображаются корректно. В том случае, когда браузер находит неизвестный ему тип поля, он заменяет его на простой input type="text".

    Кроме того, теперь можно указывать обязательные для заполнения поля (с помощью атрибута required), задавать автофокус и заменяющий текст, без использования скриптов.
    <form name="example" action="#form-example">
    <input type="email" placeholder="Адрес электронной почты" autofocus>
    <input type="url" placeholder="Домашняя страцица">
    <input type="search" placeholder="Текст для поиска">
    <input type="number" min="5" max="50" step="5" value="5" placeholder="Возраст">
    <input type="range" max="100" step="2" value="10">
    <input type="date" required>
    <input type="color" required>
    <input type="submit" value="Отправить">
    </form>


    Пока что, наиболее полную поддержку новых полей сделали в Опере.

    Подсказывающий текст
    Первое улучшение HTML5 относительно форм это возможность установки подсказывающего текста в поле ввода. Такой текст отображается в поле ввода, если поле пустое и у него нет фокуса. Как только вы щелкните в поле ввода (или перейдете к нему через Tab) подсказывающий текст исчезает.

    Например, Mozilla Firefox включает подсказывающий текст в адресной строке с надписью «Поиск в закладках и журнале».



    Если щелкнуть по адресной строке, подсказывающий текст исчезает.



    Вот как вы можете включить подсказывающий текст в свои формы.

    <form>
    <input name="q" placeholder="Поиск в закладках и журнале">
    <input type="submit" value="Поиск">
    </form>


    Браузеры, которые не поддерживают атрибут placeholder, его просто игнорируют. Без вреда и нарушений.



    Поля с автофокусом

    Сайты могут использовать JavaScript для автоматического получения фокуса в первом поле формы. К примеру, на главной странице Google.com автофокус есть у поля для ввода поисковых ключевых слов. Хотя это и удобно для большинства людей, но может раздражать опытных пользователей и людей с особыми потребностями. Если вы нажмете пробел в ожидании прокрутки страницы, прокрутки не будет, потому что фокус находится в поле ввода формы (будет набираться пробел в поле вместо прокрутки). Если вы перевели фокус на другое поле ввода, пока страница загружается, скрипт автофокуса на сайте может «услужливо» переместить фокус обратно на исходное поле ввода, прерывая ваш набор и заставляя вводить текст в неверном месте.

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

    Для решения этих проблема HTML5 вводит атрибут autofocus для всех элементов форм. Атрибут autofocus делает именно то, как и звучит: как только страница загружается, перемещает фокус в указанное поле. Но поскольку это всего лишь разметка, а не сценарий, поведение будет постоянным для всех сайтов. Кроме того, производители браузеров (или авторы расширений) могут предложить пользователям способ отключить автофокус.

    Вот как вы можете установить поле формы с автофокусом.

    <form>
    <input name="q" autofocus>
    <input type="submit" value="Поиск">
    </form>


    Браузеры, которые не поддерживают атрибут autofocus, будут его игнорировать.

    Что такое? Говорите, что желаете, чтобы автофокус работал везде, а не только в вычурных HTML5-браузерах? Вы можете оставить текущий скрипт с автофокусом, просто сделайте два небольших изменения:
    добавьте атрибут autofocus в код HTML;
    проверьте, поддерживает ли браузер атрибут autofocus, и если нет, запустите собственный скрипт.

    Автофокус с альтернативой

    <form name="f">
    <input id="q" autofocus>
    <script>
    if (!("autofocus" in document.createElement("input":bwink )) {
    document.getElementById("q":bwink .focus();
    }
    </script>
    <input type="submit" value="Вперед">
    </form>

    Устанавливайте фокус как можно раньше

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

    Например, в предыдущем разделе скрипт автофокуса размещен сразу после поля формы, на который он ссылается. Это оптимальное решение, но оно может оскорбить ваши чувства ставить блок кода JavaScript в середине страницы (или более приземлено, ваша система может быть не настолько гибкой). Если вы не можете вставить скрипт в середине страницы, вы должны установить фокус через пользовательское событие, как $(document).ready() в jQuery вместо window.onload.

    Автофокус через jQuery

    <head>
    <script src=jquery.min.js></script>
    <script>
    $(document).ready(function() {
    if (!("autofocus" in document.createElement("input":bwink )) {
    $("#q":bwink .focus();
    }
    });
    </script>
    </head>
    <body>
    <form name="f">
    <input id="q" autofocus>
    <input type="submit" value="Go">
    </form>


    Пользовательское событие jQuery срабатывает, как только DOM доступен — то есть ждет, пока загрузится текст страницы, но не ждет, пока все изображения загрузятся. Это не оптимальный подход — если страница необычно большая или сетевое соединение медленное, пользователь может по-прежнему взаимодействовать со страницей перед тем, как выполнится скрипт с фокусом. Но все же это намного лучше, чем ждать, пока произойдет событие window.onload.

    Если вы согласны и готовы вставить скрипт с одним оператором в код вашей страницы, это компромисс, который менее противный, чем первый вариант и лучше чем второй. Вы можете использовать пользовательские события jQuery для задания собственных событий, скажем autofocus_ready. Тогда вы можете вызывать это событие вручную, сразу после доступности поля с автофокусом. Спасибо Е. М. Штенбергу за обучение меня этой технике.

    Автофокус с альтернативным пользовательским событием

    <head>
    <script src=jquery.min.js></script>
    <script>
    $(document).bind('autofocus_ready', function() {
    if (!("autofocus" in document.createElement("input":bwink )) {
    $("#q"bwink.gif.focus();
    }
    });
    </script>
    </head>
    <body>
    <form name="f">
    <input id="q" autofocus>
    <script>$(document).trigger('autofocus_ready'bwink.gif;</script>
    <input type="submit" value="Вперед">
    </form>


    Это решение оптимальное, как и первый подход. Фокус будет установлен в поле формы, как только это станет технически возможно, в то время как текст страницы все еще грузится. Часть логики приложения (фокус в поле формы) перенесена из тела страницы в раздел <head>. Этот пример основан на jQuery, но концепция пользовательских событий не является уникальной для jQuery. Другие JavaScript-библиотеки вроде YUI и Dojo предлагает аналогичные возможности.

    Подведем итоги.
    Правильная установка фокуса это важно.
    Если это возможно, пусть браузер использует атрибут autofocus в том поле, где вы желаете фокус.
    Если вы используете альтернативный код для старых браузеров, определяйте поддержку атрибута autofocus, чтобы скрипт выполнялся только в старых браузерах.
    Устанавливайте фокус как можно раньше. Вставьте скрипт с фокусом в код сразу же после поля формы. Если это не задевает вас, вставьте JavaScript-библиотеку, которая поддерживает пользовательские события, и вызывайте событие в коде сразу же после поля формы. Если это невозможно, используйте событие вроде $(document).ready() из jQuery.
    Ни при каких обстоятельствах не ждите, пока window.onload установит фокус.
    Автор: Олег (06.11.12 / 22:10)
    html5, формы
    Рейтинг: 0
    Просмотры: 563
    Комментарии (0) »