Проектирование, компоновка и представление форм с помощью CSS

Введение

Статья имеет следующее содержание:

• Концепции, представленные в этой статье
  • Переопределение правил и маркеров
  • Новые элементы полей формы
  • Принципы проектирования форм
  • Правило третей
  • Сетки
  • Уровни поддержки платформы
• Простая контактная форма
  • Разметка
  • Изменения относительно предыдущей формы
  • Очевидные недостатки
  • Новые поля форм? Что это?
    • Выбор описаний: input type="checkbox"
    • Выбор из взаимно исключающих состояний: input type="radio"
    • Когда слишком много вариантов выбора: input type="select/option"
    • Объединение последовательностей элементов управления: "fieldset"
• Начинаем с самого начала, заканчиваем готовой формой
  • Демонстрация 1
  • Демонстрация 1: сопутствующие рассмотрения
  • Демонстрация 2
  • Демонстрация 2: сопутствующие рассмотрения
  • Демонстрация 3
  • Демонстрация 3: сопутствующие рассмотрения
  • Создание сетки
    • Создание структуры сетки внутри композиции
    • Реализация сетки в таблице стилей
  • Демонстрация 4
  • Демонстрация 4: сопутствующие рассмотрения
  • Правило третей
  • Демонстрация 5
  • Демонстрация 5: сопутствующие рассмотрения
  • Демонстрация 6
  • Демонстрация 6: сопутствующие рассмотрения
  • Демонстрация 7
  • Демонстрация 7: сопутствующие рассмотрения
  • Демонстрация 8
  • Демонстрация 8: сопутствующие рассмотрения
  • Демонстрация 9
  • Демонстрация 9: сопутствующие рассмотрения
  • Демонстрация 10
  • Демонстрация 10: сопутствующие рассмотрения
  • Демонстрация 11
  • Демонстрация 11: сопутствующие рассмотрения
  • Демонстрация 12
  • Демонстрация 12: сопутствующие рассмотрения
• Создание уровней поддержки платформы
• Сложные компоновки форм на практике (… вместо теории)
• Заключение
• Контрольные вопросы
• Таблица: преобразования простых дробей в десятичные
• Библиография

Концепции, представленные в этой статье

В статье содержится новая информация о реализации формы и компоновке интерфейса.

Переопределение правил и маркеров

Можно сказать, что использование большого количества маркеров class и id нарушает принцип KISS (принцип сохранения максимальной простоты). Однако сложные компоновки часто создают конфликты в каскадировании - конфликты, которые проще всего разрешаются добавлением к элементам маркеров, и написанием правил таблиц стилей, которые содержат несколько селекторов.

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

Новые элементы полей формы

Эффективной форме часто требуется нечто большее, чем простые кнопки и текстовые поля ввода, так как достаточно широко распространено представление ответов пользователей в виде вариантов выбора. Язык HTML предоставляет несколько возможностей для разработчиков, которые встречаются с таким требованием.

Принципы проектирования форм

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

Правило третей

Пользователи чаще всего обращают внимание на четыре специальные точки на канве (и линии, которые через них проходят). В статье рассматривается этот феномен, и предлагаются лучшие варианты использования с помощью CSS.

Сетки

Предыдущие статьи показали, как обеспечить согласованное оформление текста и получить максимум возможного от использования пробелов. Эта статья идет немного дальше, объясняя, как использовать единицы измерения em для реализации некоторой степени согласованности компоновки, которую невозможно реализовать без CSS.

Связи поддержки платформы

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

Простая контактная форма

Контактные формы, которые позволяют посетителям сайта посылать сообщения e-mail прямо в папку входящей почты, широко распространены по очевидной причине: они доступны любому с активным адресом e-mail, и легко фильтруются в выделенную папку почты.

Разметка, использованная в предыдущей статье о формах (статья 20), использует следующую форму, которая была существенно расширена:

Разметка

<form id="contactForm" method="post" action="/cgi-bin/service_email_script.php">
  <ul>
    <li id="nameField" class="required"><label for="realname">Name:</label><input type="text"
      name="name" value="" class="medium" id="realname" /><span
      class="note">required</span></li>
    <li id="addressField" class="required"><label for="address">Email:</label><input
      type="text" name="email" value="" class="medium" id="address" /><span 
      class="note">required</span></li>
    <li id="subjectField"><label for="natureOfInquiry">General
    subject:</label>
      <select name="subject" class="medium" id="natureOfInquiry">
        <option value="support">Support</option>
        <option value="billing">Accounts & billing</option>
        <option value="press">Press</option>
        <option value="other_q">Other questions</option>
      </select>
    </li>
    <li id="acctTypeField"><label for="acctNone">Account type:</label>
      <fieldset>
        <label for="acctGold">Gold</label><input type="radio" name="acct_type" id="goldAcct"
          class="rInput" />
        <label for="acctSilver">Silver</label><input type="radio" name="acct_type"
          id="acctSilver" class="rInput" />
        <label for="acctBronze">Bronze</label><input type="radio" name="acct_type"
          id="acctBronze" class="rInput" />
        <label for="acctNone">None</label><input type="radio" name="acct_type" id="acctNone"
          class="rInput" checked="checked" />
      </fieldset>
      <span class="note">required</span>
    </li>
    <li id="availabilityField">
      <label for="availability">My account is unavailable:</label><input type="checkbox"
        name="is_down" id="availability" class="rInput" /></li>
    <li id="messageField"><label for="messageBody">Comments:</label><textarea name="comments"
      cols="32" rows="8" class="long" id="messageBody"></textarea></li>
    <li class="submitField"><input type="submit" value="Send" class="submitButton" /></li>
  </ul>
</form>

Изменения относительно предыдущей формы

Кроме включения нескольких новых элементов, в разметку было добавлено несколько классов и ID, на которые можно ссылаться из таблицы стилей. Это позволяет независимо от контекста ссылаться индивидуально на каждую форму, пару поле/значение, и поле.

Новые идентификаторы позволяют также различать поля, которые должны заполняться, и поля, которые не должны.

Наконец, имеется несколько новых классов, которые выводят указания об объеме и типах информации, которая должна выводиться элементами формы, к которым они присоединены. Эти классы делают возможным применять детали компоновки к нескольким произвольным элементам одновременно.