© Sotel.Org.Ru - портал интересного

  • Вход
  • Регистрация
  • Блоги

    Блоги / Wap-Web мастерская • HTML• CSS / Печать / RSS-лента

    HTML5 - Новые поля ввода (Оценка: 0)
    Практически на каждом сайте можно встретить форму, куда пользователь должен что-то ввести. Это может быть форма регистрации, форма комментариев или подписки.

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


    В спецификацию 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, его просто игнорируют. Без вреда и нарушений.


    Автор статьи: Lexxs (06.11.12 / 22:10)
    html5, формы
    Рейтинг: 0

    Просмотров: 394
    Комментарии (0) »

    К блогам