1. Теперь за форумную активность начисляются биткоины и другие криптоденьги. Подробнее.
    Скрыть объявление
  2. Появилась архивная версия форума arhiv.xaker.name, где собраны темы с 2007 по 2012 год.
    Скрыть объявление

Новые возможности в формах html 5

Тема в разделе "CSS, HTML, JS", создана пользователем хопкинс, 21 июл 2013.

  1. хопкинс
    хопкинс Новичок
    Симпатии:
    35
    И так. Все знают, что такое форма(тег form)?! Но не каждый знает какие новые возможности нам открылись в html5)). Сразу хочу отметить, что вы можете использовать эти формы уже сейчас "без вреда для здоровья" пользователей. Все браузеры покажут то, на что они способны! Даже 6-ой ишак. Ну, а если ваш браузер не самый последний, то те элементы которые он не в силах показать-просто проигнорирует и заменит на стандартные, более понятные формы.


    Подсказывающий текст​


    Вы, наверное, видели подсказывающий текст ранее. Например, Mozilla Firefox включает подсказывающий текст в адресной строке с надписью «Поиск в закладках и журнале». Здесь тоже самое
    HTML:
    <input name="podskazska" placeholder="Поиск в закладках и журнале">
    
    Как видите, здесь нет ничего сложного. Просто добавили атрибут placeholder)

    Автофокус​


    Тут тоже самое, что и выше сказанное, только с одним исключением. Вместо атрибута placeholder употребим атрибут autofocus. Но тут есть над чем поразмыслить. Раньше автофокус добавляли с помощью JS, но там есть "косяк". Например пользователь начнет заполнять формы до того, как страница полностью загрузилась. В итоге скрипт может перенести его совершенно в другое место. Отсюда плохая нервная система, опечатки и т.п
    (Хотя нервную систему можно испортить разными способами. Например жать на пробел в надежде, что страница прокрутится)

    Вы же можете сделать как я вам рассказал, НО если браузер пользователя не поддерживает данный атрибут?! На помощь нам приходит ум и смекалка! Просо сделайте проверку(например на том же JS или PHP) поддерживает ли браузер данный атрибут и если да, то оставьте все как есть, а если нет-напишите скрипт!

    input type="email"​


    Все люди которые читают эту статью уже сотни или даже тысячи раз вводили свое мыло на каких нибудь сайтах. Все было шикарно и ни пользователь не веб-разработчик не задумывался об этом. Раньше был просто атрибут text и все тут...Но теперь то у нас есть Html5!. И вместо привычного input type="text" вы можете написать input type="email"

    В чем разница?! Да вот например надо вам сделать красивую форму обратной связи на сайте, а у вас в форме два одинаковых инпута. Засовывать один из них в див? Использовать селекторы типа last-child? А тут бах и вы просто заменили обычный text на email и все) Даже IE 6 не будет против. Конечно особой радости это не принесет. Браузеры в основном ни как не выделяют это. Разве что Opera добавит небольшую иконку к полю...Но у нас же еще есть "Могучее яблоко" которая по большому счету тоже не делает ничего волшебного. Но все-таки добавляет некоторую функциональность. Например когда вы используете iPhone и переходите к элементу
    HTML:
    <input type="email">
    , вы получите экранную клавиатуру, которая содержит пробел меньше обычного, а также выделенные клавиши для символов . и @



    input type="url"​


    Тут тоже самое. Айфон добавляет кнопку с суффиксом домена как ".com" ".ru" и .т.п и еще он добавляет слэш .


    Поиск

    Все люди более менее знающие Html вставляют поиск на сайт обычным способом(как и другие поля). Вот например на нашем всеми любимом форуме это сделано так:
    HTML:
    <input class="bginput" type="text" size="20" name="query">
    Но Html5 ломает все стереотипы и делает это так:

    HTML:
    <input type="search">
    И тут просто удар по почкам для разработчиков...Если вы например используете сафари или мак ос...Вы потеряете сознание от увиденного. Поле поиска имеет ЗАКРУГЛЕННЫЕ УГЛЫ!. Но и это еще не все. Если вы еще не потеряли ориентацию и продолжаете это читать, то вот вам еще новость. Safari вставит небольшую кнопку «x» с правой стороны окна. Нажатие на «x» очищает содержимое поля. Google Chrome, который имеет под капотом ту же технологию, ведет себя так же. Обе эти маленькие хитрости выглядят и ведут себя аналогично родному поиску в iTunes и других клиентских приложениях Mac OS X


    Валидация форм

    Немного ранее я говорил о новых элементах форм и новых возможностях, таких как автофокус, но я не упомянул, пожалуй, самую захватывающую часть форм HTML5: автоматическую проверку входных данных. Рассмотрим общие проблемы ввода адреса электронной почты в форме. Вероятно, у вас есть проверка на стороне клиента через JavaScript, после чего идет проверка на стороне сервера через PHP, Python или другой серверный язык. HTML5 никогда не сможет заменить проверку на стороне сервера, но он может когда-нибудь заменить проверку на стороне клиента.


    Есть две большие проблемы, связанные с проверкой адреса электронной почты на JavaScript:

    1. Некоторое количество ваших посетителей (вероятно, около 10%) не включают JavaScript.
    2. Вы получите адрес неправильно.

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

    HTML5 предлагает проверку веб-адресов с полем
    HTML:
     <input type="url">
    ,
    HTML:
    <input type="number">
    и конечно
    HTML:
    <input type="email">.
    Проверка чисел принимает во внимание значения атрибутов min и max, поэтому браузеры не позволят вам отправить форму, если вы вводите слишком большое число.

    Обязательные поля


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

    P.S В заключение хочу добавить, что я не упомянул про такие возможности как: Выбор цвета(<input type="color">), числа как счетчики (<input type="number">), числа в виде ползунка (<input type="range">), выбор даты (<input type="date">). Не упомянул я их по одной простой причине. Их поддерживает ОЧЕНЬ малое количество браузеров. Если вам всетаки интересны эти атрибуты, напишите об этом в комментариях и я распишу про них настолько подробно, насколько это возможно.
     
    21 июл 2013
    2 пользователям это понравилось.

Поделиться этой страницей

Загрузка...