Приднестровская поддержка XOOPS
Заполнять большие формы гораздо удобнее, если посетитель может сразу понять, какие вопросы связаны между собой. Поэтому нужен какой-то способ показать взаимосвязи между данными – способ, который окажется полезен как для пользователей стандартных браузеров, так и для посетителей, использующих текстовые устройства и экранные дикторы.
Решение
Для группировки связанных полей можно использовать элементы fieldset и legend:
<form method="post" action="fieldset.html">
<fieldset>
<legend>Персональная информация</legend>
<div>
<label for="fullname">Имя:</label>
<input type="text" name="fullname" id="fullname" class="txt" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" name="email" id="email" class="txt" />
</div>
<div>
<label for="password1">Пароль:</label>
<input type="password" name="password1" id="password1" class="txt" />
</div>
<div>
<label for="password2">Повторите пароль:</label>
<input type="password" name="password2" id="password2" class="txt" />
</div>
</fieldset>
<fieldset>
<legend>Адрес</legend>
<div>
<label for="address1">Страна:</label>
<input type="text" name="address1" id="address1" class="txt" />
</div>
<div>
<label for="address2">Область:</label>
<input type="text" name="address2" id="address2" class="txt" />
</div>
<div>
<label for="city">Город:</label>
<input type="text" name="city" id="city" class="txt" />
</div>
<div>
<label for="zip">Почтовый индекс:</label>
<input type="text" name="zip" id="zip" class="txt" />
</div>
</fieldset>
<div>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Зарегистрироваться!
</form>
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>, содержащий заголовок группы:
<fieldset>
<legend>Персональная информация</legend>
<div>
<label for="fullname">Имя:</label>
<input type="text" name="fullname" id="fullname" class="txt" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" name="email" id="email" class="txt" />
</div>
<div>
<label for="password1">Пароль:</label>
<input type="password" name="password1" id="password1" class="txt" />
</div>
<div>
<label for="password2">Повторите пароль:</label>
<input type="password" name="password2" id="password2" class="txt" />
</div>
</fieldset>
Стиль тегов <fieldset> и <legend>, как и других HTML-тегов, по умолчанию определяется браузером. При этом сгруппированные элементы окружаются рамкой, а содержание тега <legend> отображается в левом
верхнем углу получившегося окошка. На рис. 6.11 представлен вид тегов <fieldset> и <legend> по умолчанию в броузере Firefox в Windows XP.
Рис. 6.11. Вид тегов <fieldset> и <legend> по умолчанию
Отправитель | Нити |
---|
3 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 3 далее... |