Группировка связанных полей формы
Заполнять большие формы гораздо удобнее, если посетитель может сра- зу понять, какие вопросы связаны между собой. Поэтому нужен какой- то способ показать взаимосвязи между данными – способ, который ока- жется полезен как для пользователей стандартных броузеров, так и для посетителей, использующих текстовые устройства и экранные дикторы.
Решение
Для группировки связанных полей можно использовать элементы field- set и legend:
chapter06/fieldset.html (фрагмент)
<form method=”post” action=”fieldset.html”>
<fieldset>
<legend>Personal Information</legend>
<div>
<label for=”fullname”>Name:</label>
<input type=”text” name=”fullname” id=”fullname”
class=”txt” />
</div>
<div>
<label for=”email”>Email Address:</label>
<input type=”text” name=”email” id=”email” class=”txt” />
</div>
<div>
<label for=”password1”>Password:</label>
<input type=”password” name=”password1” id=”password1”
class=”txt” />
</div>
<div>
<label for=”password2”>Confirm Password:</label>
<input type=”password” name=”password2” id=”password2”
class=”txt” />
</div>
</fieldset>
<fieldset>
<legend>Address Details</legend>
<div>
<label for=”address1”>Address line one:</label>
<input type=”text” name=”address1” id=”address1”
class=”txt” />
</div>
<div>
<label for=”address2”>Address line two:</label>
<input type=”text” name=”address2” id=”address2”
class=”txt” />
</div>
<div>
<label for=”city”>Town / City:</label>
<input type=”text” name=”city” id=”city” class=”txt” />
</div>
<div>
<label for=”zip”>Zip / Post code:</label>
<input type=”text” name=”zip” id=”zip” class=”txt” />
</div>
</fieldset>
<div>
<input type=”submit” name=”btnSubmit” id=”btnSubmit”
value=”Sign Up!” class=”btn” />
</div>
</form>
chapter06/fieldset.css
h1 {
font: 1.2em Arial, Helvetica, sans-serif;
}
input.txt {
color: #00008B;
background-color: #E3F2F7; border: 1px inset #00008B; width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
}
form div { clear: left; margin: 0; padding: 0; padding-top: 5px;
}
form div label { float: left; width: 40%;
font: bold 0.9em Arial, Helvetica, sans-serif;
}
fieldset {
border: 1px dotted #61B5CF;
margin-top: 1.4em;
padding: 0.6em;
}
legend {
font: bold 0.8em Arial, Helvetica, sans-serif;
color: #00008B;
background-color: #FFFFFF;
}
На рис. 6.10 показан вид сгруппированных элементов при просмотре документа в броузере.
Рис. 6.10. Разделение формы на две секции с помощью тега <fieldset>
Обсуждение
Использование тегов <fieldset> и <legend> очень эффективно для груп- пировки данных формы по категориям. Этот прием позволяет разде- лить различные группы элементов визуально, при этом экранные дик- торы и текстовые устройства «понимают», что обозначенные элементы связаны друг с другом логически. Ситуация была бы иной, если бы вы просто вложили связанные элементы в блок div и задали для него стиль оформления, – их связь была бы вполне очевидна для пользователей обычных броузеров в отличие от тех, кто физически не может увидеть визуальные особенности, созданные с помощью CSS.
Для группировки связанных элементов формы достаточно разместить их между тегами <fieldset> и </fieldset>, причем непосредственно за от- крывающим тегом следует добавить тег <legend>, содержащий заголо- вок группы:
chapter06/fieldset.html (фрагмент)
<fieldset>
<legend>Personal Information</legend>
<div>
<label for=”fullname”>Name:</label>
<input type=”text” name=”fullname” id=”fullname” class=”txt”/>
</div>
<div>
<label for=”email”>Email Address:</label>
<input type=”text” name=”email” id=”email” class=”txt”/>
</div>
<div>
<label for=”password1”>Password:</label>
<input type=”password” name=”password1” id=”password1” class=”txt”/>
</div>
<div>
<label for=”password2”>Confirm Password:</label>
<input type=”password” name=”password2” id=”password2”
class=”txt” />
</div>
</fieldset>
Стиль тегов <fieldset> и <legend>, как и других HTML-тегов, по умол- чанию определяется броузером. При этом сгруппированные элементы окружаются рамкой, а содержание тега <legend> отображается в левом верхнем углу получившегося окошка. На рис. 6.11 представлен вид те- гов <fieldset> и <legend> по умолчанию в броузере Firefox под Mac OS X.
Рис. 6.11. Вид тегов <fieldset> и <legend> по умолчанию
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- CSS: основы основ (0)
- Чередование фонового цвета столбцов таблицы (0)
- Создание календаря с помощью CSS (0)
- Возможность заполнения формы для пользователей текстовых устройств (0)
- Создание двухколоночной формы с помощью CSS вместо таблиц (0)
- Создание таблицы стилей для формы с возможностью ввода данных, как в электронную таблицу (0)
- Отображение строкового элемента как блочного, и наоборот (0)