Крок 1. Стилізація форми:
Що ж, почнемо? Цього разу ми будемо починати не з каркаса нашої форми, а відразу з стилів, які ми будемо застосовувати для створення повноцінної форми зворотного зв'язку. Стилі залишаться ті ж, що і в минулому уроці. Виглядати вони будуть так:
Крок 2. HTML-каркас форми.
- class = "idle" - Спочатку ми поставимо кожному полю нашої форми такої ось стиль за замовчуванням з застосованим градієнтним фоном;
- onFocus = "this.className = 'activeField'" - Тепер ми через подію onFocus додамо стиль з білим фоном. Дана подія буде себе проявляти тільки при натисканні курсором на поле і при введенні в ньому будь-яких символів;
- onBlur = "this.className = 'idle'" - Тепер ми через подію onBlur додамо стиль з нашим градієнтним фоном. Ця подія буде підкріплювати наш стиль за замовчуванням для подальшого правильного відображення фону після введення будь-яких символів.
Сподіваюся, Ви хоч що-небудь почерпнули цікавого для себе з того, що я Вам зараз розповів. Далі всі події, які ми використовували і стилі застосовуємо до кожного полю нашої форми і до кнопки в тому числі. Нижче я привожу повну готову версію моєї розробки:
З щирою повагою Ваш провідник у світі CSS - М. К.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!