Мар
08
2010

Верстаем под drupal. Часть 2: Формы

С темизацией форм в drupal не очень всё хорошо. Например, расположить элементы какой-то формы в таблице для удобства тут нельзя. Вернее можно конечно используя в объвлении формы или в hook для неё параметры #suffix и #prefix, но это весьма неудобно. Поэтому лучше, конечно, сразу верстать в общем для drupal стиле. Ниже я покажу как примерно это всё выглядит.

В общем случае html формы выглядит примерно так:

<form>
  <div class="form-item">...</div>
  <div class="form-item">...</div>
  <div class="form-item">...</div>
  <input type="submit" id="edit-submit" class="form-submit" />
</form>

Т.е. все элементы формы (кроме кнопок) обрамляются дивами с классом form-item. Ниже привожу примеры таких элементов формы.

Строка для ввода текста. (<input type=»text» />)

<div class="form-item" id="edit-title-wrapper">
 <label for="edit-title">Title:</label>
 <input type="text" id="edit-title" class="form-text" />
</div>

Тут и далее id для элементов формы уникален. Поэтому если для какого-то элемента формы по любому надо прописать свои специфические стили, то можно для этого элемента добавить свой уникальный id. А программист в стилях уже заменит его на нужный id. Причём это касается и id для div.form-item и для самого элемента формы (input, select, textarea…)

Выпадающий список (<select>)

<div class="form-item" id="edit-menu-parent-wrapper">
 <label for="edit-menu-parent">Parent item: </label>
 <select class="form-select">
   <option>Navigation</option>
   <option>Compose tips</option>
 </select>
</div>

Многострочный текст (<textarea>)

<div class="form-item" id="edit-body-wrapper">
 <label for="edit-body">Body: </label>
 <textarea id="edit-body"  class="form-textarea"></textarea>
</div>

Галочка (checkbox)

<div class="form-item" id="edit-revision-wrapper">
 <label class="option" for="edit-revision"><input type="checkbox" id="edit-revision" class="form-checkbox" /> Create new revision</label>
</div>

Переключатели (radio)

Переключатель с описанием:

<div class="form-item">
 <label>Download method: </label>
 <div class="form-radios">
   <div class="form-item" id="edit-file-downloads-1-wrapper">
     <label class="option" for="edit-file-downloads-1"><input type="radio" id="edit-file-downloads-1" class="form-radio" /> Public - files are available using HTTP directly.</label>
   </div>
   <div class="form-item" id="edit-file-downloads-2-wrapper">
     <label class="option" for="edit-file-downloads-2"><input type="radio" id="edit-file-downloads-2" name="file_downloads" value="2"   class="form-radio" /> Private - files are transferred by Drupal.</label>
   </div>
 </div>
 <div class="description">Choose the <em>Public download</em> method unless you wish to enforce fine-grained access controls over file downloads. Changing the download method will modify all download paths and may cause unexpected problems on an existing site.</div>
</div>

Кнопки

Кнопки, в отличие от остальных элементов формы не огбрамляются дивом с классом form-item, а просто идут в конце формы пачкой. Вот например две кнопочки на форме:

<input type="submit" id="edit-submit" value="Save configuration" class="form-submit" />
<input type="submit" id="edit-reset" value="Reset to defaults" class="form-submit" />

Поле обязательно для заполнения

Тут всё просто. В label добавляется звёздочка обёрнутая в span.form-required И к самому элементу формы (input, select, textarea) добавляется класс .required
И вот как выглядит обязательное поле для ввода строки текста:

<div class="form-item" id="edit-title-wrapper">
 <label for="edit-title">Title: <span class="form-required">*</span></label>
 <input type="text" id="edit-title" class="form-text required" />
</div>

Описание поля

Часто в формах под полем пишут какой-то пояснительный текст. В вёрстке это выглядит как добавление дива с классом description в конец .form-item
Вот пример обязательного для заполнения инпута с пояснительным текстом:

<div class="form-item" id="edit-title-wrapper">
 <label for="edit-title">Title: <span class="form-required">*</span></label>
 <input type="text" id="edit-title" class="form-text required" />
 <div class="description">Optional. In the menu, the heavier items will sink and the lighter items will be positioned nearer the top.</div>
</div>

Заключение

Я рассказал основные моменты. В случае если на сайте есть и большие сложные формы с кучей полей, то к этому материалу наверное стоило бы добавить описание еще и про fieldset. Если кратко, то: группа полей формы может быть ещё обрамлена в fieldset.

Конечно прогрммно можно переопределить функции тем для всех элементов формы и отрисовывать их по другому, но зачем придумывать велосипед? Лучше когда верстальщик придерживается этих требований и всё. А в случаях, когда ну никак не получается заверстать форму именно по этому описанию, то я говорю верстальщицам верстать как получается, а потом уже сам втачиваю это дело под drupal. Ну например если дизайнер нарисовал в макете так, что описание элемента формы (например textarea) идёт до самой textarea. Тогда мы находим функцию theme_textarea. Копируем её в файл template.php нашей темы и переименовываем название функции в phptemplate_textarea или же mytheme_textarea. Перемещаем в ней вывод описания вверх и всё. После этого надо обновить регистр тем и готово. Но это уже к самой вёрстке не относится, а уже больше к программированию под drupal и работе с form api.

Смотрите так же Верстаем под drupal. Часть 1: основные элементы

4 Comments to "Верстаем под drupal. Часть 2: Формы"

  1. Dmitriy wrote:

    Я пробовал с Артистир работать… Ясно что ручная работа качественнее.. Буду пробовать. Спасибо

  2. yas wrote:

    ну это да, но для своих кое-каких мелких сайтов я использую артистер)

    а так да, ручная рулит. Я вот как раз сегодня начал делать свою заготову темы на базе zen, но не как дочернюю от zen, а отдельно. Чуть позже поделюсь ей когда потестирую и доработаю на паре проектов)

  3. Михаил wrote:

    Странный совет переопределять theme_textarea в теме. Эта функция для всех текстарий на сайте. Ее переопределишь – для всех изменится. А надо только у одной. Для этого используется св-ва ['#theme'] текстарии

  4. yas wrote:

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

    Насчет свойства ['#theme'] думаю Вы правы, хотя мне не доводилось пользоваться этим свойством на практике.

Leave Your Comment