С темизацией форм в 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.
Я пробовал с Артистир работать… Ясно что ручная работа качественнее.. Буду пробовать. Спасибо
Link | Март 9th, 2010 at 23:55
ну это да, но для своих кое-каких мелких сайтов я использую артистер)
а так да, ручная рулит. Я вот как раз сегодня начал делать свою заготову темы на базе zen, но не как дочернюю от zen, а отдельно. Чуть позже поделюсь ей когда потестирую и доработаю на паре проектов)
Link | Март 10th, 2010 at 01:27