Блог компании DevExpress → Что скрывается за формой редактирования сложного объекта?
В этой статье мы продолжаем знакомить вас с подходами, реализованными в планировщике XtraScheduler. В предыдущей статье мы рассказывали о синхронизаторе данных, на этот раз поговорим о формах.

Довольно часто в приложениях можно встретить формы, которые предназначены для ввода или редактирования объектов с большим количеством зависимых свойств. Построение таких форм ввода вызывает «головную боль» у разработчиков: рутинная работа по размещению редакторов, написание кода инициализации, валидации, обработчиков событий…
Так как же делать такие формы быстро и надежно?

Довольно часто в приложениях можно встретить формы, которые предназначены для ввода или редактирования объектов с большим количеством зависимых свойств. Построение таких форм ввода вызывает «головную боль» у разработчиков: рутинная работа по размещению редакторов, написание кода инициализации, валидации, обработчиков событий…
Так как же делать такие формы быстро и надежно?
Веб-разработка → Развитие валидации форм

Валидация форм была педантичным занятием с момента появления web. Первой пришла серверная валидация. Затем она развилась в валидацию на стороне клиента для проверки результатов в браузере. Теперь у нас есть такие гиганты как HTML5 и CSS3: глава о формах HTML5 предлагает нам новые типы для input полей и атрибуты, которые делают возможным проверку ограничений поля. Базовый UI модуль CSS3 предоставляет несколько псевдо-классов, которые помогают нам стилизовать состояние валидности и менять внешний вид поля в зависимости от действий пользователя. Давайте взглянем на комбинацию обоих для создания валидатора форм основанного на CSS, который имеет достаточно широкую поддержку браузеров.
Чем больше мы можем дать подсказок пользователю, как правильно заполнять форму, в процессе заполнения, тем меньше шансов, что он сделает ошибку. Взгляните на пример CSS3 валидации форм в браузере поддерживающем CSS3 UI псевдо-классы, например Chrome 4+, Safari 5+ или Opera 9.6+. Я использовал CSS3 UI псевдо-классы и HTML5 атрибуты форм для создания валидации основанной на CSS. Давайте посмотрим как это работает.
PHP → jQuickForm = генератор форм на PHP (jQuery + HTML_QuickForm2)

Доброго времени суток, %username%!
Судя по тому, что вы читаете этот топик — вам тоже интересен вопрос легкой генерации сложных форм.
Начну с главного:
Какие задачи ставились перед этой сборкой
1) Построение сложных форм БЕЗ написания шаблонов, в 90% случаев достаточно того стиля оформления, который когда то был один раз проработан и переезжает из проекта в проект.
2) Возможность управления внешних видом формы путем изменения правил CSS.
3) Возможность управления правилами проверки (валидация форм) в одном месте, при этом чтобы автоматически строились правила проверки на javascript (клиентская валидация) и на PHP (серверная валидация).
4) Валидная верстка, по возможности, с использованием минимально необходимого div-ов
5) Вызовы методов цепочкой, чтобы отсутствовала необходимость держать в голове список параметров, их очередность и прочее, чем должно заниматься IDE $el->setLabel($label)->setComment($comment); 6) Возможность быстрого созданию любого виджета из комплекта, например jQueryUI
7) Желание сделать мир хоть немного лучше! :)
Интерфейсы → Календарный период — улучшаем интерфейс
Работая над интерфейсом очередного крупного проекта я старался дотошно проработать каждый его элемент. Конечно нет предела совершенству и, как это обычно бывает, заканчивая один проект ты уже видишь кучу его недостатков, делаешь анализ и выводы на будущее.
Тем не менее, в результате, работая над drop-down выбором календарного периода, в голову пришла интересная мысль не разбивать дату на две отдельные формы «С» и «По», как это всегда делают, а объединить их в одну форму и выпадающий блок.
Конечно кодеру предстоит в данном случае немного больше попотеть, но пользователю очевидно будет намного легче ориентироваться в календаре. Выбирая начальную дату он сразу же наглядно и быстро может выбрать конечную дату своего запроса, в том же окне, и не надо держать в голове и пытаться запомнить что же ты выбрал в предыдущей форме. Тем более в input-формах практически никогда не выводят день недели и, в процессе выбора конечной даты запроса, зачастую забываешь какой день недели собственно был у первой выбранной даты?
Если короче, сейчас сплошь и рядом, в том числе на именитых туристических сайтах, используют две отдельные формы для определения календарного периода, при чём одновременно, как правило, можно открыть только одну из них:

Пример обычной формы на Booking.com. Календари «С» и «По» разнесены в разные блоки
Тем не менее, в результате, работая над drop-down выбором календарного периода, в голову пришла интересная мысль не разбивать дату на две отдельные формы «С» и «По», как это всегда делают, а объединить их в одну форму и выпадающий блок.
Конечно кодеру предстоит в данном случае немного больше попотеть, но пользователю очевидно будет намного легче ориентироваться в календаре. Выбирая начальную дату он сразу же наглядно и быстро может выбрать конечную дату своего запроса, в том же окне, и не надо держать в голове и пытаться запомнить что же ты выбрал в предыдущей форме. Тем более в input-формах практически никогда не выводят день недели и, в процессе выбора конечной даты запроса, зачастую забываешь какой день недели собственно был у первой выбранной даты?
Если короче, сейчас сплошь и рядом, в том числе на именитых туристических сайтах, используют две отдельные формы для определения календарного периода, при чём одновременно, как правило, можно открыть только одну из них:

Пример обычной формы на Booking.com. Календари «С» и «По» разнесены в разные блоки
jQuery → Плагин helpInput (мой велосипед)
Здравствуйте. На днях возникла задача оформить на одном проекте мини-подсказки в полях input(подобно тому, как оформлено поле «поиск по сайту», которое вы можете увидеть в правом верхнем углу Хабры). Проект, на котором надо было оформить поля, написан с использованием jQuery, поэтому решил воспользоваться плагином для этой библиотеки. Пробежался по уже готовым решениям и не нашёл полностью устраивающее меня. Решил мастерить свой велосипед. На мой взгляд, получилось неплохо, хотя в процессе разработки не раз натыкался на подводные камни. Из-за скудного выбора плагинов, решающих эту задачу, я и решил выложить своё «творение» на Хабру. Необходимость в оформлении полей подобным образом встречается часто, авось кому-нибудь и пригодится.UPD: В ходе обсуждений было предложено пару дельных идей, которые я и реализовал:
1. Обрабатывается не только Tab, но и Shift+Tab
2. Плагин научился работать с автозаполнением (если надо отключить эту возможность — при инициализации установите в значение false ключ autoComplete)
3. Изменились имена ключей(приобрели смысловую нагрузку понятную не только мне)
Zend Framework → Загрузка и переименование файлов
Статья написана для тех, кто уже хоть немного знаком с архитектурой Zend Framework. Если кому-нибудь будет интересно — опишу работу с формами более подробно в отдельной статье.
Для загрузки файлов на сервер с помощью форм в Zend Framework Form есть элемент Zend_Form_Element_File. У него есть фильтр «Rename», который позволяет переименовать закачаный файл. Но есть минус — мы не можем просто указать новое имя для файла, чтобы сохранилось его расширение. Как это сделать? А как быть, если мы используем setMultiFile?
Для загрузки файлов на сервер с помощью форм в Zend Framework Form есть элемент Zend_Form_Element_File. У него есть фильтр «Rename», который позволяет переименовать закачаный файл. Но есть минус — мы не можем просто указать новое имя для файла, чтобы сохранилось его расширение. Как это сделать? А как быть, если мы используем setMultiFile?
Интерфейсы → Тонкости свойства disable у кнопок формы, отправляемой на сервер (Как делать кнопки неактивными)
Уже неоднократно на хабре (вот в этой публикации и в этой) ставился вопрос о том, что было бы хорошо кнопкам формы, отправляемой на сервер, ставить свойство
Однако, до сих пор так и не разобрались, зачем это нужно и как все-таки это делать. Казалось бы, что может быть проще и о чем здесь вообще можно разговаривать, ан нет — на поверку все оказалось не так тривиально. Сразу замечу, что нижеследующие рассуждения применимы к обеим типам форм: как отправляемым через обычный SUBMIT, так и с помощью AJAX.
disabled = "disabled".Однако, до сих пор так и не разобрались, зачем это нужно и как все-таки это делать. Казалось бы, что может быть проще и о чем здесь вообще можно разговаривать, ан нет — на поверку все оказалось не так тривиально. Сразу замечу, что нижеследующие рассуждения применимы к обеим типам форм: как отправляемым через обычный SUBMIT, так и с помощью AJAX.
НЛО прилетело и опубликовало эту надпись здесь.
Веб-разработка → Практический HTML: учимся любить формы
Примечание: ниже находится перевод тезисов доклада «Learning to Love Forms» с конференции «WebVisions 2007» (автор Aaron Gustafson). Докладчик рассказывает о верстке форм, используя корректный и эффективный XHTML/CSS-код.
- Формы — это необходимое зло. Людям свойственно усложнять формы, хотя они могут быть представлены весьма просто.
- Рассматривайте верстку форм как создание обычного XHTML-кода. Но будьте готовы к несоответствиям со стороны браузеров и применению хаков.
- Разбивайте сложные формы на несколько простых частей.
- Старайтесь обеспечивать максимальную семантическую ценность кода.
- Не усложняйте дизайн форм.
XHTML & CSS приемы
- Элемент
FORMсоздает форму. - Единственным обязательным его атрибутом является
ACTION, и он всегда должен быть URI. - По умолчанию
METHODвыставляется вGET. - Атрибут
NAMEустарел, используйте вместо негоID. - Элемент
FIELDSETиспользуется для группировки связанных полей формы. Может быть вложенным.
Веб-разработка → Декоративная кнопка Обзор. Делаем невозможное.
Никогда бы не подумал, что буду писать что-то про верстку. Но жизнь штука странная. Да и люди бывают не очень продвинутые в web-технологиях и просят сделать вроде бы простые, но на первый взгляд невозможные вещи.
Думаю, все знают стандартный элемент формы для загрузки файлов.
А вот теперь попробуйте сделать его красивым. "Легко, ведь есть CSS!!!" - скажут многие, и многие будут правы. Но попробуйте сделать так
Пару лет назад по прихоти заказчика мне пришлось столкнуться с такой проблемой.
Как я ее решал, написано в моем личном блоге.
Я конечно понимаю, что лучше использовать стандартные элементы форм и не париться, но попробуйте объяснить это заказчику, у которого уже есть готовый дизайн :)
Думаю, все знают стандартный элемент формы для загрузки файлов.
А вот теперь попробуйте сделать его красивым. "Легко, ведь есть CSS!!!" - скажут многие, и многие будут правы. Но попробуйте сделать так

Пару лет назад по прихоти заказчика мне пришлось столкнуться с такой проблемой.
Как я ее решал, написано в моем личном блоге.
Я конечно понимаю, что лучше использовать стандартные элементы форм и не париться, но попробуйте объяснить это заказчику, у которого уже есть готовый дизайн :)