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

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

Содержание

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

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

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

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

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

Сетки

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

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

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

Очевидные недостатки

Новые поля форм? Что это?

Выбор описаний: input type="checkbox"

Выбор из взаимно-исключающих состояний: input type="radio"

Когда слишком много вариантов выбора: select/option

Объединение последовательности элементов управления: fieldset

Начинаем с самого начала, заканчиваем готовой формой

Демонстрация 1

Демонстрация 1: сопутствующие рассмотрения

Демонстрация 2

Демонстрация 2: сопутствующие рассмотрения

Демонстрация 3

Демонстрация 3: сопутствующие рассмотрения

Создание сетки

Создание структуры сетки в композиции

Реализация сетки в таблице стилей

Демонстрация 4

Демонстрация 4: сопутствующие рассмотрения

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

Демонстрация 5

Демонстрация 5: сопутствующие рассмотрения

Демонстрация 6

Демонстрация 6: сопутствующие рассмотрения

Демонстрация 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>