1 Атрибут "required"
Простейшее изменение, которое вы можете сделать для вашей формы, чтобы отметить это поле ввода текста, как "обязательное":
Your Name: <input type="text" name="name" required>
Это информирует (HTML5) веб-браузера, что поле должно быть обязательно заполнено. Различные браузеры могут по разному его отображать.
Пока поле пустое и вы на него нажали, оно будет отображается в красной рамке. Как только введен хоть один символ рамка меняется на зеленую. Все это уже заложено автоматом в HTML5
С помощью CSS вы можете разместить маркеры внутри или рядом с полем ввода, или просто поменять цвет фона и границы.
2 Входные данные
С появлением HTML5 нет необходимости проверять форму с помощью регулярных выражений, теперь необходимо выбрать лишь тип, остальное сделает за вас браузер.
-
type="email"
Поставив type="email" браузер будет обязательно проверять на соответствие формата адреса электронной почты:
E-mail: <input type="email" name="email" required placeholder="Введите ваш e-mail">
-
type="url"
Аналогичным образом, вы можете проверить и url адрес.
Website: <input type="url" name="website" required placeholder="Введите url вашего сайта">
-
type="number" и type="range"
Если вам необходимо выбрать диапазон дат, то вам помогут type="number" и type="range"
Возраст: <input type="number" size="6" name="age" min="18" max="99" value="25"> Месяц: <input type="range" size="2" name="satisfaction" min="1" max="12" value="5">
-
другие типы
Существует ещё множество типов, которые проверяют входные данные:
- color
- date
- datetime
- datetime-local
- month
- search
- tel
- time
- week
3 Стилизация форм с использованием CSS
Помимо встроенных проверок, у форм появились дополнительные атрибуты, которые можно красиво оформить с помощью css:
- :valid
input:required:valid { background-image: url(/images/valid.png); background-position: right top; background-repeat: no-repeat; }
- :invalid
input:required:invalid, input:focus:invalid { background-image: url(/images/invalid.png); background-position: right top; background-repeat: no-repeat; }
4 Свои шаблоны
Если же вам нужен собственный тип:
- URL
- input type="url" pattern="https?://.+"
- Адрес
- input type="text" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"
- Дата (dd/mm/yyyy or mm/dd/yyyy)
- input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}"
- Цена
- input type="text" pattern="\d+(\.\d{2})?"
5 Подсказка "placeholder"
Ну и одним из самых простых, но очень-очень полезных атрибутов стало поле - "placeholder". Это подсказка, что именно необходимо вводить пользователю. Раньше такое возможно было сделать, только с использованием javascripts событий onfocus или onblur
<input name="amount" type="text" placeholder="Введите цену" value="" required="" pattern="^[ 0-9]+$">