Основы работы с XHTML и CSS
Теги <fieldset> и <legend>
Рамка группы создается вокруг элементов управления формы с помощью тега <fieldset>. Рамка помечается текстом, который задается во вложенном теге <legend>. fieldset является линейным элементом XHTML, поэтому он должен находиться внутри блочного тега. Общая форма двух этих тегов показана ниже.
<fieldset> <legend>text</legend> ...элементы управления формы </fieldset>
Листинг 11.33. Общая форма тегов <fieldset> и <legend>
Пример группы нескольких fieldset показан на рисунке 11.28.
Рис. 11.28. Пример группы нескольких fieldset
Код этих fieldset показан ниже. Так как fieldset расширяется, чтобы заполнить ширину своего контейнера, обычно нужно задавать для них фиксированную ширину, чтобы управлять их размещением и видом. Отметим, что все fieldset в примере имеют ширину 180 пикселей, чтобы удержать их от расширения на всю ширину заключающего их раздела, что позволяет вывести их рядом друг с другом; они также выровнены по вертикали по верху контейнерного раздела. Таблицу стилей можно применять к обоим тегам <fieldset> и <legend>, чтобы изменить их оформление.
<style type="text/css"> fieldset {width:180px; vertical-align:top} legend {font-family:verdana; font-size:9pt; font-weight:bold; color:royalblue} </style>
<div> <-- Блочный контейнер для всех fieldset --> <fieldset> <legend>Radio Buttons:</legend> <input type="radio" name="Radio"/>First Button<br/> <input type="radio" name="Radio"/>Second Button<br/> <input type="radio" name="Radio"/>Third Button<br/> </fieldset>
<fieldset> <legend>Checkboxes:</legend> <input type="checkbox" name="Box1"/>First Checkbox<br/> <input type="checkbox" name="Box2"/>Second Checkbox<br/> <input type="checkbox" name="Box3"/>Third Checkbox<br/> <input type="checkbox" name="Box4"/>Fourth Checkbox<br/> <input type="checkbox" name="Box5"/>Fifth Checkbox<br/> </fieldset>
<fieldset> <legend>Selection List:</legend> <select size="5"> <option>First Option</option> <option>Second Option</option> <option>Third Option</option> <option>Fourth Option</option> <option>Fifth Option</option> <option>Sixth Option</option> <option>Seventh Option</option> </select> </fieldset> </div>
Листинг 11.34. Код для объединения элементов управления в группы с заголовками
Forekc.ru
Рефераты, дипломы, курсовые, выпускные и квалификационные работы, диссертации, учебники, учебные пособия, лекции, методические пособия и рекомендации, программы и курсы обучения, публикации из профильных изданий