Вертикальное выравнивание текста в полях формы, а также формы в html 5
Краткая заметка, которая, возможно, поможет сохранить время и нервы начинающим верстальщикам. Речь пойдёт о стилизации инпутов (input), т.е. полях формы. Казалось бы, чего тут сложного? Главные параметры, а именно ширина и высота задаются стандартно — width и height. Посмотрим в браузерах, как это выглядит. На первый взгляд всё отлично, но начинаем заполнять поле, и видим, что в Internet Explorer текст прилипает к верхней границе поля.
В остальных современных браузерах текст сам центрируется по вертикали. Как мы центрируем текст по вертикали у строчных элементов? Правильно, дополнительно указав высоту строки и напрямую задав выравнивание с помощью vertical-align. На этот раз даже IE понял, чего мы хотим. Казалось бы, тему вы можете закрыть. Однако, есть одно большое НО.
Если у пользователя установлен Mozilla Firefox более ранней версии, чем 3.6, то наши трюки с высотой строки и прямым указанием выравнивания будут проигнорированы. Удивительно, однако факт, в ранних версиях Firefox пользователь увидит текст прилипший к верхней границе input. Вот такой тупизм.
У верстальщика два пути решения этой проблемы:
Первый — забыть и забить. Можно сказать, что пользователи Firefox более продвинутые юзеры и обновляют этот браузер значительно чаше, чем пользователи того же IE. Однако это не совсем так. До сих пор встречаются пользователи, у которых установлена вторая версия Firefox.
Второй способ — задать высоту для input не через height, а с помощью внутренних отступов padding.
Какой из способов выбрать — решать вам. Как говорил великий Морфеус: “Я только могу указать дверь, войти в неё ты должен сам”
Формы в html 5
Итак, поле для ввода e-mail адреса. Кроме адреса своей электронной почты, часто нужно в форму ещё вводить веб-адрес. Он, как и e-mail адрес, содержит специфическую конструкцию. Поэтому в html 5 появился новый тип поля формы: type=url. Здесь будут точно такие же плюсы, как и в типе поля для ввода e-mail адреса:
1. В новых смартфонах с виртуальной клавиатурой (к примеру, в iphone), виртуальная клавиатура будет специально адаптироваться для ввода url.
2. Мы можем добавить к такому полю автовалидацию и обязательность к заполнению. В том случае, если в это поле ничего не будет введено, или веб-адрес будет введён не правильно, тогда новые браузеры нам об этом сообщат и не отправят форму.
Вот пример использования данного типа поля формы:
Старые браузеры, не поддерживающие html 5, обработают это поле, как обычное текстовое поле.
Поле для ввода чисел. Теперь переходим к более сложному. Выбрать и проверить числа намного сложнее, чем веб-адрес или адрес электронной почты. К примеру, Вы можете указать минимально значение чисел, максимальное значение, шаг выбора чисел (к примеру, через 3.0,3,6,9), число по умолчанию и так далее. Это может быть полезно в формах для регистрации, где могут зарегистрироваться пользователи от 18 до 30 лет, и надо ввести год рождения.