HTML+CSS+JavaScript

Попросили помочь с заданием. Застопорилась на этом пункте:
==============================================================

8. На странице «регистрация», установите всем стандартным текстовым полям
ввода одну ширину при помощи CSS, полю для ввода пароля другую. При
вводе адреса электронной почты в соответствующее поле, фон и цвет
шрифта должны изменяться. В момент нажатия на кнопку
«зарегистрироваться» она должна окрашиваться в другой цвет, то же самое
должно происходить и с кнопкой «очистить», только цвет должен
отличаться.
* В форме, при наведении курсора на поля checkbox и radio, должна вокруг
этих полей появляться прерывистая рамка.
* При вводе текста в поля с ФИО, каждое слово должно начинаться с
большой буквы, даже если пользователь будет вводить ФИО с маленькой
буквы. То же самое касается и полей на странице с контактами.
================================================================

Вернее, вот на этом предложении. Не понимаю, где должен меняться
фон и цвет шрифта. В поле ввода? В какой момент? Поменять можно
что-то, что уже есть, а мы только вводим.
При вводе адреса электронной почты в соответствующее поле, фон и цвет
шрифта должны изменяться.

И под первой звездочкой - не та ли эта пунктирная рамка, которая
возникала при фокусе на ссылке и элементе формы и все хотели от
нее избавиться? Мне что-то никак не сообразить, как можно только
средствами CSS сделать рамку по наведению (before: и after:?), если
честно, рамка даже и без наведения вокруг этих элементо не встает.

Если кто понял больше, чем я, помогите. А я пойду 6-й пункт делать.

Может ваш заказчик имеет ввиду placeholder, но не знает что это такое, видел, а что за механизм не знает, вот и порет чушь.

Про placeholder ничего не было. Имя поля расположено рядом с полем,
нет смысла писать еще и в поле что-то. Пропущу это. А что с рамкой?

Я не говорю что было, я говорю о том, что его описание похоже на работу именно его, но как это называется вряд ли ваш заказчик знает.
Рамкой чего, вокруг чекбокса? Ну "нарисуйте" ее стилями для :hover, если ему так хочется, правда умный заказчик вообще-то не рамкой будет обеспокоен, а текстом у флажка, по которому можно сделать выбор.

label стоит и работает

Ну значит hover для label
А вообще странный мужик, головная боль, это одинаковое отображение флажков и радиокнопок в браузерах, и приходится вообще их прятать, а ему рамка нужна, словно отметить курсор в границе элемента более нечем.

Сделала вот так. Интересно, валидацию пройдет?

<label><span class="radio_on"><input type="radio" name="subscribe" value="Y" checked tabindex="20" style="border: red 2px dashed;">&nbsp;&nbsp;Да</span></label>       &nbsp;&nbsp;       <label><span class="radio_on"><input type="radio" name="subscribe" value="N" tabindex="21">&nbsp;&nbsp;Нет&nbsp;&nbsp;</label></span>

span.radio_on {     margin: 1px; } span.radio_on:hover {     margin: 0px;     border: red 1px dashed; }

А это зачем   Нет  , особенно после текста? Padding.

Прошло. Только я там один тэг не туда воткнула, уже исправила.

У меня ни padding ни text-indent не работает, радио-кнопка прилипает к тексту.

Так если вам надо текст и элемент внутри родителя как-то форматировать, заключите текст в тот же span. Можно и иначе поступить, но не непрерывными же пробелами это делать, а если мало двух будет, что так и клепать их дюжину? )

При вводе адреса электронной почты в соответствующее поле, фон и цвет
шрифта должны изменяться.

Вот ответ ведущего :

1. Это значит, что когда вы ставите курсор в это поле для ввода, фон и цвет шрифта у вводимого текста должны поменяться. Типа динамической подсветки. А, когда переключаетесь на другое поле - все по-прежнему, стандартно.

2. Есть поле. У него должны меняться фон и цвет шрифта. В какой-то момент текста в поле может не быть. А в другой момент уже будет. Так что изменение цвета шрифта при наличии текста тоже будет заметно.

================================================================

Ну вот, я опять ничего не поняла. Как можно поменять то, чего еще нет? Вводим
букву в поле, она черная. Вводим другую, первая становится красной. Вводим
третью, и вторая становится красной? Так, что ли? Непонятно, когда менять цвет.

"В какой-то момент" - неконкретно и некорректно. Я буду один момент считать
каким-то, а он - другой.

Сделайте так, что когда поле в фокусе то цвет красный, когда не в фокусе цвет черный, думаю это и имеется ввиду

Это очень конкретный момент, к которому можно привязать событие по наведению. Читая первый пункт, я так и подумала. Испугало то, что должны меняться фон и цвет шрифта у ВВОДИМОГО текста, т.е. не по наведению (там и текста-то еще не было, когда мы наводили!), а в процессе ввода! И при чем тут динамическая подсветка, когда речь о поле формы. Это из другой оперы совсем...

А второй пункт? Кличко, может, и поймет. Я не понимаю. Ладно, сделаю плейсхолдер и поменяю цвет, когда будет введен текст.

PS и эти люди нас учат! (это брату моему дали такое задание на курсах). То ли еще будет!

Ваш заказчик либо дуркует, либо не понимает что это. Обычно делают таким образом, чтобы при некорректном вводе данных в поле это поле подсвечивалось, при корректном же вводе остается обычным. Достигается это следующим:

input:focus:required:invalid {     изменить цвет фона, да и достаточно  }

Стиль же пелйсхолдера не у всех браузеров поддается изменениям, хотя можно и его поменять.

Да не заказчик это! Это брату моему дают такие задания на курсах.

Сделала вот так

input { border: 2px solid #ccc; background-color: #fff;} /*====ФОКУС====*/ input:focus { border: 2px solid #aa88ff; background-color: #ffeeac;} /*==НАВЕДЕНИЕ==*/ input:hover { border: 2px solid #aa88ff; background-color: #ffeeac; color: red;