Веб-стандартизация привлекает все больше и больше внимания. При создании веб-страниц, соответствующих веб-стандартам, мы часто сталкиваемся с проблемами формы. Сегодняшняя статья знакомит вас с некоторыми семантическими структурами форм. Надеюсь, это поможет каждому разобраться с CSS-макетом.
1. Используйте теги набора полей и легенды.
В форме мы часто группируем информацию в форме. Например, в форме регистрации мы можем группировать регистрационную информацию на базовую информацию (обычно обязательную) и подробную информацию (как правило, необязательную). Итак, как мы можем сделать это лучше? это? Мы можем рассмотреть возможность добавления в форму следующих двух тегов:
fieldset: групповые формы. Форма может иметь несколько наборов полей.
легенда: опишите содержимое каждой группы
| Ниже приводится цитируемое содержание: <form id="demoform" class="democss" action=""> <набор полей> <legend>Базовый регистр</legend> <p>Имя: <input type="text" name="fname" value="" /></p> ... </fieldset> <набор полей> <legend>Подробная регистрация</legend> <p>Проценты: <input type="text" name="interest" value="" /></p> ... </fieldset> ... </форма> |
По умолчанию набор полей имеет рамку, а легенда обычно отображается в верхнем левом углу. Но в некоторых случаях вы можете не захотеть, чтобы стили по умолчанию или макеты наборов полей и легенд по умолчанию влияли на эстетику дизайна.
Решение. Установите для границ набора полей значение 0 и отсутствие отображения легенды в CSS.
2. Используйте теги меток
Мы присваиваем текстовую метку в форме метку и используем атрибут for, чтобы связать ее с компонентом формы. Эффект заключается в том, что при щелчке по текстовой метке курсор отображается в соответствующем компоненте формы.
| Ниже приводится цитируемое содержание: <form id="demoform" class="democss" action=""> <набор полей> <legend>Базовый регистр</legend> <р> <label for="fname">Имя:</label> <input type="text" id="fname" name="fname" value="" /> </p> ... </fieldset> <набор полей> <legend>Подробная регистрация</legend> <р> <label for="interest">Интерес:</label> <input type="text" id="interest" name="interest" value="" /> </p> ... </fieldset> ... </форма> |
В дополнение к вышеперечисленным методам мы также можем использовать label для вложения всего компонента формы и текстовой метки, например:
| Ниже приводится цитируемое содержание: <метка для="fname"> Имя: <input type="text" id="fname" name="fname" value="" /> </метка> |
Согласно спецификации, текст будет автоматически связан с соседними компонентами формы, но, к сожалению, текущий основной браузер IE6 не поддерживает эту функцию.
3. Используйте атрибуты accesskey и tabindex.
Веб-сайтам необходимо учитывать больше ситуаций использования. Например, при отсутствии курсорного устройства (например, мыши) форму можно заполнять с помощью операций с клавиатурой. В это время нажатие не имеет для них значения. На данный момент мы выбираем ключ доступа к метке (клавиша быстрого доступа, значение атрибута alt+accesskey в IE, значение атрибута alt+shift+ accesskey в FF) и атрибут tabindex (клавиша Tab, значение атрибута tabindex представляет собой последовательность) для добавления к метке формы. такие как метка, ввод и т. д.
| Ниже приводится цитируемое содержание: <label for="fname" accesskey="f" tabindex="1" >Имя:</label> <input type="text" id="fname" name="fname" value="" /> |
4. Используйте тег optgroup
Роль тега optgroup — определить набор опций в списке выбора. Мы можем использовать тег optgroup для классификации параметров выбранного элемента и использовать атрибут метки. Значение атрибута будет отображаться в виде невыбираемого заголовка с отступом в раскрывающемся списке (выбрать). Примечание. optgroups не поддерживают вложенность.
| Ниже приводится цитируемое содержание: <select name="Китай"> <optgroup label="Цзянсу"> <option value="nj">Нанкин</option> <option value="sz">Сучжоу</option> </optgroup> <optgroup label="Чжэцзян"> <option value="hz">Ханчжоу</option> <option value="wz">Вэнь Чжоу</option> </optgroup> </выбрать> |
В IE6.0 есть небольшая ошибка (отсутствует в FireFox): при использовании клавиш со стрелками на клавиатуре для выбора в IE, когда выбранный элемент изменяется с опции одной группы опций на опцию другой группы опций, onchange не будет быть спровоцировано. Решение: добавьте события onkeydown или onkeyup, чтобы решить проблему.
5. Используйте теги кнопок
Определение и использование
Определяется как кнопка отправки. Внутри элемента кнопки вы можете разместить контент, например текст или изображения. В этом разница между этим элементом и кнопкой элемента ввода.
<button><img src="images/click.gif" alt="Нажмите на меня />Нажмите на меня!</button>
Кнопка предоставляет больше функций и более богатое содержимое, чем ввод. Кнопка разделяет текст кнопки, и вы можете добавлять изображения внутри кнопки, предоставляя тексту и изображениям больше стилей на выбор, делая жесткую кнопку более яркой.
А использование тегов кнопок будет более семантическим, чем кнопки ввода, и их можно понять просто из буквального значения.