TML, CSS, СКРИПТЫ: практика создании сайтов

Применение веб-технологий стороны клиента для создания сайтов

А правило вида

input[type-"text"] {…}

относится только к таким элементам, которые описываются тегами
,

сопровождаемыми атрибутами type со строго определенным значением text,

т. е. к однострочным текстовым полям ввода.

К великому сожалению, столь изящный механизм, как селекторы атрибутов,

никак не поддерживается браузером от Microsoft. Следующий пример будет

отображаться так, как задумано, только в Opera 7—8 и Firefox.

\ Листинг 6*14, Использование селекторов атрибутов

г для оформления веб-форм

Регистрация нового участника

style=»font-size: 75%»>тайного общества борцов за

веб-стандартызрапх/п1>

Пepcoнaльнaя инфopмaция

cD. M. 0. :

maxlength=»100″ name=»fio» />

Желаемый логин:

maxlength=»50″ name=»login» />

Желаемый пароль:

maxlength=»10″ name=»password» />

Дцрес электронной почты:

maxlength=»100″ name=»email» /x/p>

Немного о себе:

name=»about,,x/textareax/p>

JlM4HHe npeflno4TeHMH

Каким браузером вы предпочитаете пользоваться?р>

Microsoft Internet Explorer

0pera

Mozilla Firefox

Какая операционная система вам более всего по душе?р>

value=»Windows» /> Microsoft

Windows

MacOS

Linux

316 Часть II. Применение веб-технологий стороны клиента для создания сайтов

type=»reset» value=»Очистить форму» />р>

Отображение веб-страницы, описанной в вышеприведенном листинге,

иллюстрируется на рис. 6.17.

>Оформл«нме оеб-формы срсд^ШИШ

Щ|||Ц!|ИЦ|ЦШЛШ||||Ш|

шайл .рр^вка |ид

^ $юидон» Щящтт* Сдое***

‘«Па:

Регистрация нового участника

тайного общества борцов за веб-стандарты

• Персональной информация

Ф.И.О.:

Иванов’и. и.

Же лаемый логин

Вуапоу:’- ^ .

Ж?.л.§!?!5Ё|й_ пароль:

.**.**iir~7».’.» !

Адрес электронной почты

¦ivanovelvanov. ru

‘ Немного о себе:

Разрабатываю сайты с 1997 года]

Личные предпочтения

Каким браузером вы предпочитаете пользоваться?

С Microsoft Internet Explorer

f Opera

® Mo2illa Firefox

Какая операционная система вам более всего по душе?

О Microsoft Windows

О MacOS

@ Linux

Гйт4во-ЩЩ|^

Рис. 6.17. Веб-форма, внешний вид которой определяется CSS-правилами,

использующими селекторы атрибутов

Глава 6. Формы в HTML

317

Для того чтобы обеспечить желаемый внешний вид этой формы в IE,

необходимо поступиться элегантностью в пользу совместимости. Один из

возможных вариантов решения проблемы — это определение индивидуальных

классов для полей различного типа при помощи атрибута class (к примеру,

текстовые поля можно отнести к классу с именем наподобие textf ield, а кнопки

объединить в класс с именем button).

input.textfield, textarea {

background: #f0f0f0;

border: solid lpx #ccc;

font-family: Lucida Console, monospace;

}

input.button {

color: #fff;

background: #000;

font-weight: bold;

border: solid 2px #999;

}

0. M. 0.:

maxlength=»100″ name=»fio» class=»textfield» />

Желаемый логин:

maxlength=»50″ name=»login» class=»textfield» />

Желаемый пароль :

maxlength=»10″ name=»password» class=»textfield» />

Дцрес электронной почты:

maxlength=»100″ name=»email» class=»textfield» />

Так или иначе, возможности CSS по изменению внешнего вида элементов

интерфейса веб-форм отнюдь не безграничны.

При помощи CSS никоим образом нельзя повлиять на облик «радиокнопок» и

флажков, будь то их геометрические параметры или цвета; управление

внешним видом списков тоже весьма и весьма проблематично.

Визуальный облик всех подобных элементов определяется индивидуальными

особенностями браузера, и это никак не противоречит идеологии HTML.

318 Часть II.