После входа на eYou.com мне сразу же пришлось конвертировать новую версию интерфейса электронной почты в XHTML+CSS. К счастью, мои базовые навыки еще достаточно хороши, поэтому я сделал это планомерно. Конечно, вы столкнетесь с новыми проблемами. Например, когда вы обычно создаете веб-страницы, вы редко используете формы, потому что у вас нет опыта работы с программами. К счастью, в мире еще есть Google, который позволяет мне легко справляться с новыми задачами. Запишите некоторые впечатления и поделитесь ими со всеми.
Из соображений доступности стандартный способ написания формы должен включать набор полей и легенду (описание) в <form> и </form>, чтобы пользователи могли понять сводную информацию о поле формы. Простая структура выглядит следующим образом:
| Ниже приводится цитируемое содержание: <форма> <набор полей> <легенда></легенда> ... </fieldset> </форма> |
В некоторых случаях вы можете не захотеть, чтобы набор полей и легенда влияли на эстетику вашего дизайна. С этим легко справиться. Просто установите границу набора полей на 0 и отключите отображение легенды в CSS.
В большинстве случаев макет формы разделен на два столбца: метка слева и поле ввода (тип ввода = «текст»...) справа. При таком простом макете из двух столбцов я настоятельно не рекомендую использовать таблицы. Ссылки http://stylephreak.frogrun.com/uploads/source/cssform.php и http://www.aplus.co.yu/css/forms/?css=1 (две определенно ценные ссылки, вы уже знаете) не нужно читать дальше), мы обнаружили, что обычным решением для веб-стандартов является добавление div вокруг метки и ввода type="text"... и установка отображения div на блокировку. Установите для метки значение float: left; (это также причина, по которой для элемента div установлено значение display:block;), и тогда метку можно будет разместить в той же строке, что и поле ввода. Небольшой трюк для выравнивания меток — зафиксировать ширину метки, а затем использовать функцию выравнивания текста, чтобы выровнять ее по левому или правому краю по мере необходимости. Совет по установке ширины: используйте единицу измерения em, чтобы установить ширину на основе максимального количества слов в теге, без необходимости тщательно проверять пиксели.
Чтобы мое объяснение было легче понять, я просто пишу код:
| Ниже приводится цитируемое содержание: XHTML: (частично) <форма> body {/*Это не имеет никакого отношения к форме, установите эффект отображения страницы*/ |