Вступление

В принципе читать эту статью можно как есть, я старался писать ее без лишних терминов. Но все-таки логичней будет прочитать сначала Drupal для дизайнера - Шаблоны и полезности т.к. там перечислены основные ошибки для начанающих. По сути данная статья рассказывает о дизайне из коробки, который есть в Drupal
Здесь будет много сказано о формах в Drupal и проектировании интерфейса. Останавливаться на общих элементах в формах (вроде textfield, checkbox и submit) - не будем, чтобы не переписывать заново HTML-спецификации. Рассмотрим: уникальные элементы форм и элементы специфично измененные в Drupal.  Для тех кто не понимает смысл слов: textfield, checkbox и submit рекомендую сначала ознакомится со спецификацией HTML 4.01 

1. Уникальные элементы форм в Drupal

Оговорюсь, что все представленные ниже элементы форм присутствуют в Drupal 7. Что касается других версий, то этих элементов может там и не быть. До того как рисовать какой-либо элемент - проконсультируйтесь с разработчиком. 
Конечно некоторые из элементов форм в данный момент отнюдь не уникальны и используются сейчас практически в каждой CMS, но уверяю Вас они появились в Drupal, поэтому я имею право назвать их уникальными. Элементы на которых хотелось бы заострить внимание:

• autocomplete 
• managed file widget
• tabledrag
• tableselect
• vertical tabs

1.1 Autocomplete (Автодополнение, Автозавершение)

Нужен для организации больших массивов данных. По сути автозаполнение - это поиск значения по маске. Например: пользователь ввел "vano", ему выдаст Ivanov Ruslan, iVaNova.tanya, Vano Beridze. Этот виджет работает асинхронно, т.е. загружает результаты после нажатия пользователем кнопки на клавиатуре через AJAX. Результаты отображаются в выпавшем окне.
Виджет используют в строках поиска пользователей, материалов, выбора города и т.п. Виджет стоит использовать только там, где много данных и пользователь ЗНАЕТ какой результат он хочет получить. Не стоит использовать этот виджет при выборе тегов, выбора способа доставки и времени суток. 

Обратите внимание на важную деталь - в правой части формы есть кружок. Во-первых, он говорит пользователю о том, что это автозаполнение, во-вторых, он показывает, когда отсылается запрос к серверу форма занята. В данном случае кружок станет синим

1.2 Managed File Widget

В Drupal Managed File Widget является заменой стантартного HTML загрузчика файлов. Здесь же рассмостри и Managed Image Widget - в условиях нашей статьи - это одно и то же. Виджет добавляет несколько важных функций:

• файлы можно сортировать, если их больше одного
• файлы загружаются асинхронно. 
• можно удалять файл
• отображает список поддерживаемых форматов и максимальный размер файла
• если файлы картинки, то показывает миниатюры.
• есть возможность добавить теги ALT и Title
• появляется progress bar загрузки файлов (если на сервере установлена библиотека PECL)

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

1.3 Tabledrag

Данный виджет позволяет изменять порядок элементов, а также сортировать информацию по категориям. Частично его видно в Managed File Widget. Работает просто: нажимаем на крестик из стрелочек и тащим вниз/вверх - если нужно изменить порядок и вправо/влево - если нужно сделать ребенком/отцом. При изменении порядка возле элемента появляется звездочка "*". А также появляется статусное сообщение  "Порядок изменен"

Дизайнер-кун подсказывает, что если изменение родитель/ребенок запрещено, то стрелочка должна быть двой (а не крестиком), но в Drupal всегда крестик, даже когда нельзя выбирать подкатегорию

1.4 Tableselect

Tableselect - это расширенный вариант checkbox / radiobutton. Он используется, когда каждый смысловой элемент несет в себе много разношестной информации. Если написать всю эту информацию в строчку, то получится не красиво. 

Элемент введен в FormApi в Drupal 7, для того чтобы сделать его в Drupal 6 - придется поморочится, но можно.

1.5 Vertical Tabs (Вертикальные закладки)

Лично для меня вертикальные вкладки ничем сверхудобным не являются. Но использовать их нужно т.к. во первых - это Drupal-friendly - пользователь Drupal уже привык их видеть, во-вторых - они могут быть крайне полезны когда вкладок много и контент не вмещается горизонтально. 

 

2. Элементы специфично измененные в Drupal

В Drupal многие элементы форм имеют расширенный функционал, при этом все эти элементы сохранили свои родные функции. Например текстовая область все так же предназначена для написание нескольких строк текста, но в Drupal добавили возможность выбора формата текста (об формате чуть ниже) и возможность изменения размеров текстовой области.
Список наиболее специфичных изменений:

• описание полей и вспомогательная информации
• textarea
• password - field
• fieldset

2.1 Описание полей (field descriptions) и вспомогательная информации

Drupal - friendly интерфейс предполагает описание практически у всех полей. Важно понимать различия между заголвком поля и описанием - заголовок (лейбл) служит для того, чтобы озаглавить поле, в описании нужно указывать формат вводимых данных, что произойдет с введенной информацией и т.д. 
Например для с заголовком email, описание будет "Ваш email будет скрыт от других пользователей. Мы не передаем его третьим лицам", для поля "Адресс", описание будет: "Введите в формате: Индекс, Страна, Город, улица, дом"
Обычно заголовок размещают над полем или в одну строку с ним, описание размещают внизу поля:

Иногда в целях экономии место на экране, описании выносят в всплывающие окна:

Важно помнить одно: описание поля должно быть у всех полей.

2.2 Textarea (Текстовая область)

В текстовой области есть два важных момента о которых частенько не знают. Первый: выбор формата текста. Формат текста - это способ обработки этого текста после отправления. Проще говоря: как система будет этот текст воспринимать. Существует 4ре стандартных формата текста:

• простой текст
• фильтрованный HTML
• Полный HTML
• PHP

Простой текст - это значит, что система вставит текст как есть, так как его ввел пользователь. Фильтрованный HTML - система вставит текст как HTML, но оставит только разрешенные теги. Обычно оставляют теги: жирный, курсивный, зачеркнутый и ссылка. Полный HTML -  система вставит текст как HTML, разрешены все теги. PHP - система вставит текст как PHP, обычно используется только в админке.
Для дизайнера важно понимать, что для каждой текстовой области необходимо оставлять место с описанием выбранных форматов. 
Второй момент - это ресайзер (grippie). Это такая плашка внизу поля, которая позволяет расширить текстовое поле.  Иногда она бывает крайне полезной.

2.3 Password Field. Поле ввода пароля.

Из коробки в Drupal поле ввода пароля умеет подсчитывать сложность пароля и совпадают ли пароли, поэтому для него необходимо оставлять место. Также внизу этих полей отображается сообщение с рекомендациями

2.4 Fieldset (Набор полей)

Само по себе понятие fieldset есть в спецификации HTML 4. В двух словах: fieldset нужен для того чтобы собрать набор полей в какую-нибудь категорию. Например: профиль пользователя можно разграничить на личные данные (ФИО, возраст и т.д.) + платежные данные (номера карт и прочие реквизиты). Drupal позволяет красиво сворачивать и разворачивать эти поля. Это свойство бывает крайне полезно как для больших так и для маленьких форм.
При клике на надпись настройки, этот пункт развернется, если еще раз кликнуть, то пункт свернется:

 
Еще статьи по теме есть тут: LT