Верстка форм: подпись в input
Лень делает всякое дело трудным
Бенджамин Франклин
Признаюсь честно, я чертовски не люблю верстать формы: это утомительный и не быстрый процесс, да и дизайнеры порой пренебрегают рисованием формочек (или наоборот, придумывают слишком красивые поля для ввода), поэтому и с дизайном приходится повозиться. Возможно, по этой причине я начинаю мини-цикл статей на тему правильной верстки форм. Сегодня я расскажу про label-ы и про их позиционирование прямо в input.
Основной недостаток лейблов, на мой взгляд, состоит в том, что они занимают место. Форма зачастую и так ограничена, ведь еще нужно подумать про расположение подписей. Не дай бог form тянется по ширине: тогда придется растягивать еще и лейблы, а вот с этим уже проблемы (про тянущиеся label я расскажу в другой статье). Головоломки усложняются еще и тем, что приходится возиться с видом полей ввода в разных браузерах. То margin где-нибудь не посчитается, то по ширине input уедет… Валидная и семантическая верстка, увы, порой не помогает (в случае с Internet Explorer уж точно ;) ). Мой ночной кошмар, короче говоря.
Вывод напрашивается сам собой: необходимо поместить подпись к полю ввода, внутрь самого input. Как это делают?
Давайте рассмотрим по порядку. Предположим,что у нас есть вот такая форма, которую нарисовал дизайнер:
Проще всего (опуская стили и оформление) реализовать это так:
В качестве подписей к полю в этом примере использованы value в input (кстати, пример можно посмотреть вот здесь). “Ну и что тут плохого?” – спросите вы. Погодите кидать в меня тухлые помидоры, недостатков тут и правда немало.
Во-первых, теперь у нас есть как минимум 2 “пустых” значения, при котором должно выскакивать сообщение об ошибке – пустая строка и строка “Логин”.
Во-вторых, по клику стирается любой текст, даже полезный (справедливости ради отмечу, что этого можно избежать).
В третьих, этот код не несет в себе смысла: глядя на него я могу сказать, что я вижу не input с подписью “Логин”, а input со значением “Логин”. Ощущаете разницу? :) Получается, подстановка подписи в input противоречит самой сути семантической верстки.
Мне кажется, что лучший вариант – написать что-то прямо поверх поля для ввода (спозиционировать элемент таким образом, чтобы он находился на месте нужной надписи и перекрывал собой input). Наиболее логично использовать label: он как раз для этого и предназначен. Здесь нам поможет простой метод чередования position (relative -> absolute) в CSS. Каждое поле для ввода мы обрамляем тегом div c position:relative. В конец этого же дива мы добавляем нужную нам подпись в теге label. Подписи мы выставляем абсолютное позиционирование и указываем, по каким координатам относительно div она будет находиться. Чтобы стало понятнее, вот вам кусок кода:
В примере label находится прямо на input. Когда фокус переходит на поле для ввода соотвествующий label скрывается. Подпись возвращается на место, если поле ввода остается пустым. Все это реализовано яваскриптом:
Конечно же, вариант это далеко не идеальный (я использую несколько другой метод). Но про улучшения рассказывать не буду: надо, чтобы было что читать дальше :) . Программу минимум я, кажется, выполнил: про то, как надо делать правильную верстку форм я слегка пояснил. Остальное будет. Позже.
Комментарии (2)
Роман
Спасибо, полезно.
Роман
Хотя вот такой код куда проще и удобнее, имхо.
$(document).ready(
function() {
$(“form input[type='text']“).each(
function() {
var curInput = $(this);
curInput.attr(“default”, curInput.val());
curInput.bind(“focus”,
function() {
if (curInput.val() == curInput.attr(“default”)) {
curInput.val(“”);
}
}
);
curInput.bind(“blur”,
function() {
if (curInput.val() == “”) {
curInput.val(curInput.attr(“default”));
}
}
);
}
);
}
);