Думаю многие знают, что такое форма: это совокупность элементов, которые могут представлять собой текстовое поле (text), текстовое пространство (textarea), чек боксы (checkbox), радио кнопки/переключатели (radio), выпадающие списки (option), кнопки (button, submit). Эти поля посылают данные – имя/значение. Данные соответственно обрабатываются на сервере и результат возвращается пользователю. Валидация – это проверка данных заполненных полей на соответствие какому-то шаблону.

Проверка может осуществляться с помощью html5, javascript/jQuery на клиенте и также на сервере. Любое поле должно иметь атрибут ‘name’ <input name=”firstName” /> Также input поля могут иметь атрибут ‘value’ <input name=”firstName” value=”Вася” />. Если значение value заполнено, то оно будет отображаться на страничке по умолчанию.  Input поля могут обрамляться тегами <label>. Применение данного тега – является хорошим стилем программирования.  Когда он используется то у input поля появляется заголовок при клике на который становится активным данный input или переключатель, а также можно назначать горячие клавиши. Есть два варианта использования: первый вариант связка for ссылающаяся на id нужного поля и второй вариант просто обрамить поле input: <label for=”firstName”>Имя</label> <input id=”firstName” type=”text” name=”fname” /> либо <label>Имя: <input id=”firstName” type=”text” name=”fname” /></label> Текстовое поле это <input /> или <input type=”text” /> У полей с типом password вводимые символы отображаются звездочками для безопасности. Чтобы загрузить файл, используется поле Input с type=”file” Поле с галочкой – Input type=”checkbox”. Если поставить галочку, то такое поле получит атрибут “checked” Радио кнопка – Input type=”radio”, в отличии от чекбокса можно выбрать только одно значение. Для передачи значений, которые не нужно видеть юзеру, используются скрытые поля- Input type=”hidden”. Кнопка отправки формы – Input type=”submit”. Значение value будет отображаться на кнопке, например value=”click me!”. Просто кнопка – Input type=”button” или теги <button>click me</button>. Поле для большого куска текста – <textarea name=”bigtext”>Здесь текст</textarea> Поле выбора значения из выпадающего списка: <select name=”choice”> <option value=1>Выбрать…</option> <option value=2>Выбор 1</option> <option value=3 selected>Выбор 2</option> </select> Задать выбранное поле по умолчанию поможет атрибут selected. Если задать атрибут multiple то можно выбрать несколько значений: <select multiple name=”myname”>…

HTML 5 Input

Input type=”date” выводит календарь для выбора даты. Input type=”color” выводит палитру для выбора цвета. Input type=”range” выведет слайдер для выбора значения от 0 до 100%. Также появились новые атрибуты: autocomplete, placeholder, required, pattern и так далее… Контейнер для всех полей, это тег form. Его возможные параметры: Action – куда послать данные, Enctype – как браузеру воспринимать передаваемые данные, Method – метод передачи данных GET (через url) или POST (фоновая передача).

HTML 5 Валидация

HTML5 Валидация будет осуществляться самим браузером основываясь на типе поля. Например глянем на форму и увидим типы e-mail, url, number, datetime:

<form class="group" action="#">
<ol><li class="group"><label for="emailfield">Email</label><input type="email" name="email" id="emailfield" /></li>
<li class="group"><label for="websitefield">Website</label> <input type="url" name="website" id="websitefield" /></li>
<li class="group"><label for="agefield">Age</label> <input type="number" name="age" id="agefield" /></li>
<li class="group"><label for="datetimefield">Date & Time</label><input type="datetime" name="datetime" id="datetimefield" /></li>
</ol>
<button type="submit">send</button>
</form>

Из плюсов это конечно автоматическая проверка, из минусов можно отметить то, что старые браузеры не поддерживают HTML5.

Если добавить атрибут required: <input name=”name” id=”namefield” required /> то данное поле должно быть обязательно заполнено, иначе появится предупреждение.

Если добавить атрибут placeholder то его значение появится в поле в роли подсказки, например: <input name=”name” id=”namefield” required placeholder=”Введите имя” />

Проверить поддержку какого-то параметра браузером, можно на сайте caniuse.com

Ограничить количество вводимых символов можно свойством maxlength, например: <input type=”text” name=”name” maxlength=”10″ />

Параметры min/max ограничивают цифровые значения: <input type=”number” name=”age” min=”13″ max=”18″ />. Также это ограничение можно присваивать датам: <input type=”date” name=”date” min=”2013-03-04″ max=”2013-03-10″ />

Параметр multiple позволяет выбирать несколько файлов с помощью Input=”file” или делает возможным ввод нескольких емэйлов в поле Input=”email”.

Разрешить загрузку только определенных типов файлов можно указав mime-type, например только для PNG:

<input type=”file” name “uploads” accept=”image/png” />

Или только для любых изображений:

<input type=”file” name “uploads” accept=”image/*” />

Для mp3 и видео:

<input type=”file” name “uploads” accept=”audio/mp3, video/*” />

Подробнее смотрите на http://iana.org/assignments/media-types Также очень полезная ссылка http://w3schools.com/html/html5_form_input_types.asp

Можно также использовать регулярные выражения. Например паттерны:

Поле для ввода только слова Привет: <input type=”text” name=”test” pattern=”Привет” />. Если надо сделать возможность ввода Привет и привет, то меняем паттерн так: pattern=”[Пп]ривет”. И так далее. Еще примеры. Прописные буквы: [a-z]+ Плюс означает один или больше. Строчные и прописные [A-Za-z]+

Если надо добавить цифры: [A-Za-z0-9]+ Добавим возможность пробела: [A-Za-z0-9 ]+ Допустим только пять цифр: [0-9]{5} Или тоже самое: “\d{5}” Добавим дефис: “\d{5}\-” Теперь допустим нам нужен формат из 5 цифр, дефис, и 4: “\d{5}\-\d{4}” Проверить регулярное выражение можно например тут: http://regexpal.com Подробнее про HTML5 патерны, а также заготовки для полей почты, телефонов и так далее: http://html5pattern.com