Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Интерактивная форма с помощью CSS и JavaScript
 |
 |
Исходники |
Пример |
В этом уроке мы разберем, как можно придать форме интерактивности, заставив ее реагировать на такие действия пользователя, как клик, наведение мыши а также на событие потери полем фокуса.
Никаких дополнительных инструментов и скриптов нам не понадобится. Мы будем использовать лишь html, css и javascript.
Для начала создадим новый html-документ:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head> <body> </body> </html>
В секции head подключим файл стилей:
<link href="styles/style.css" rel="stylesheet" type="text/css" />
Теперь создадим форму и первое поле в ней для ввода имени человека:
<form action="#" method="post">
<p>Ваше имя:<br />
<input type="text" class="input_form_text" name="name" value=""
onfocus="this.className='input_form_textact'"
onblur="if(this.value==''){this.value='Ваше имя'}; this.className='input_form_text'"
onclick="if(this.value=='Ваше имя'){this.value=''}" /></p>
</form>
Придадим этому полю класс input_form_text (см. весь код стилевого файла ниже):
body{
margin:0;
padding:0;
font-family: Verdana, Arial, sans-serif;
}
p{
margin:10px;
font-size: 13px;
}
.input_form_text {
width: 200px;
height: 20px;
border:1px solid #CCCCCC;
background-image: url("../img/gray_bg.png");
background-repeat: repeat-x;
background-position: center -3px;
text-align: center;
color: #96A1A6;
font: 12px Arial, sans-serif;
}
.input_form_textact {
width: 200px;
background-image: none;
border:1px solid #CCCCCC;
height: 20px;
color: #96A1A6;
box-shadow: 0 0 3px 0 #cccccc;
text-align: center;
}
.input_form_captcha_text {
width: 118px;
height: 20px;
border:1px solid #CCCCCC;
background-image: url("../img/gray_bg.png");
background-repeat: repeat-x;
background-position: center -3px;
text-align: center;
color: #96A1A6;
font: 12px Arial, sans-serif;
}
.input_form_captcha_textact {
width: 118px;
border:1px solid #CCCCCC;
background-image: none;
height: 20px;
color: #96A1A6;
box-shadow: 0 0 3px 0 #cccccc;
text-align: center;
}
.input_form_textarea {
width: 400px;
border:1px solid #CCCCCC;
background-image: url("../img/gray_bg.png");
background-repeat: repeat-x;
background-position: center -3px;
text-align: left;
color: #96A1A6;
font: 12px Arial, sans-serif;
}
.input_form_textareaact {
width: 400px;
border:1px solid #CCCCCC;
background-image: none;
color: #96A1A6;
box-shadow: 0 0 3px 0 #cccccc;
text-align: left;
}
input.formbutton {
border:1px solid #CCCCCC;
width: 150px;
color: #96A1A6;
font: 12px Arial, sans-serif;
background: url("../img/bg_button.png") no-repeat -6px -5px;
font-weight: 700;
text-transform: uppercase;
height: 25px;
padding-bottom: 1px;
margin-top: 5px;
}
input.formbutton:hover {
border:1px solid #CCCCCC;
width: 150px;
color:#96A1A6;
font: 12px Arial, sans-serif;
background: url("../img/bg_button.png") no-repeat -6px 8px;
font-weight: 700;
text-transform: uppercase;
height: 25px;
text-decoration: none;
box-shadow: 0 0 3px 0 #cccccc;
cursor: pointer;
padding-bottom: 1px;
}
Для поля мы просто устанавливаем отображение по умолчанию: задаем ширину, высоту, фоновый рисунок, выравнивание текста по центру, а также гарнитуру и размер шрифта.
Атрибут name для нас сейчас значения не имеет, а атрибут value в качестве значения имеет пустую строку: это значит, что в поле изначально ничего не будет написано.
Дальше начинается самое интересное. Мы начинаем работать с так называемыми событиями JavaScript. Событие - это некоторое действие, которое может быть зафиксировано, и на которое можно "выдать" ответную реакцию.
Итак, первое событие, с которым мы тут сталкиваемся - это событие focus (к имени любого события добавляется еще префикс on, который означает "по событию такому-то". В нашем случае: "по событию focus"). Данное событие происходит в тот момент, когда поле получает фокус, т.е. становится активным.
И в тот момент, когда наступает данное событие, мы даем JavaScript команду на применение класса к текущему элементу - т.е. к данному конкретному полю. Для этого мы обращемся к элементу через конструкцию this (что означает "этот"), после чего даем команду на смену класса с помощью className.
Таким образом, при получении фокуса поле для ввода имени меняет свой внешний вид, т.к. к нему применяется уже класс input_form_textact.
Второе событие, которое здесь используется - это событие blur (помните про префикс on!). Событие blur происходит, когда поле теряет фокус, т.е. из него уходит указатель (к примеру совершается клик в другом поле, либо вообще в произвольном месте страницы).
Итак, при потере фокуса мы совершаем простую проверку с помощью оператора if.
Проверка гласит следующее: "Если атрибут value текущего поля пуст, то мы задаем для атрибута value текущего поля значение 'Ваше имя' и, кроме того, придаем текущему полю класс input_form_text".
Таким образом, когда мы покидаем поле, в нем будут появляться указанные слова и к нему будет применяться тот самый изначальный класс, который применяется к нему при первоначальной загрузке страницы.
Наконец, третее событие, которое мы используем - это событие клика мышью - click.
Мы отслеживаем данное событие, и когда был зафиксирован клик в текущем поле, то мы запускаем проверку с помощью того же оператора if.
Теперь проверка состоит в следующем: "Если атрибут value текущего поля содержит слова 'Ваше имя', то нужно изменить содержимое этого атрибута value на пустое значение."
Здесь, как Вы видите, все тоже очень логично: когда человек кликает в поле со словами 'Ваше имя', то он, вероятно, собирается ввести свое имя, и поэтому поле нужно очистить, чтобы человеку было удобнее вводить свое имя, не стирая вручную то, что уже указано в поле.
Добавляем следующее поле - для ввода E-mail:
<p>Ваш E-mail:<br />
<input type="text" class="input_form_text" name="email" value=""
onfocus="this.className='input_form_textact'"
onblur="if(this.value==''){this.value='Ваш E-mail адрес'}; this.className='input_form_text'"
onclick="if(this.value=='Ваш E-mail адрес'){this.value=''}" /></p>
Здесь я ничего не комментирую, потому что все полностью аналогично первому полю, поменялось лишь значение атрибута name (что в нашем случае не принципиально) и слова Ваше имя изменились на Ваш E-mail адрес.
Третье поле, которое мы добавим - это поле типа textarea, предназначенное для ввода большого объема текстовой информации. Для такого типа полей атрибут value не предусмотрен, поэтому код здесь будет даже проще, чем в случае с двумя первыми полями:
<p>Текст сообщения:<br /> <textarea class="input_form_textarea" name="message" cols="45" rows="6" onfocus="this.className='input_form_textareaact'" onblur="this.className='input_form_textarea'" onclick="this.className='input_form_textareaact'"></textarea></p>
Мы задаем изначальный класс для данного поля и указываем его размеры с помощью атрибутов cols и rows.
По событию focus (получение фокуса) и click (клик мышью) мы применяем к полю класс с именем input_form_textareaact, а по событию blur (потеря фокуса) - снова возвращаем класс input_form_textarea, который применяется к полю изначально.
Последнее поле, которое мы добавим - это поле типа text для ввода контрольных чисел:
<p>Введите цифры с картинки:</p>
<p><input type="text" class="input_form_captcha_text" name="captcha" value="Цифры с картинки" size="10"
onfocus="this.className='input_form_captcha_textact'"
onblur="if(this.value==''){this.value='Цифры с картинки'}; this.className='input_form_captcha_text'"
onclick="if(this.value=='Цифры с картинки'){this.value=''}" /></p>
Ситуация с этим полем аналогична ситуации с двумя первыми полями. При получении фокуса мы применяем класс input_form_captcha_textact.
При потере фокуса мы возвращаем изначальный класс input_form_captcha_text и, кроме того, если поле не заполнено, мы добавляем в него слова Цифры с картинки.
При клике же в данном поле мы снова делаем проверку, и если в поле находятся слова Цифры с картинки, мы их удаляем, передав атрибуту value в качестве значения пустую строку. Таким образом, при клике поле очищается, давая пользователю возможность ввести необходимый защитный код.
Теперь нам осталось добавить лишь кнопку отправки данных:
<p><input class="formbutton" name="send_message" type="submit" value="Отправить письмо"/></p>
Как Вы видите, здесь нет никакого JavaScript и все, что нас интересует - это класс, который применяется к форме для придания ей стилевого оформления.
Вот в общем-то и все. Наша форма, откликающаяся на действия пользователя, готова.
Поскольку вкусы у всех разные, Вы можете спокойно открыть файл стилей и подкорректировать оформление формы до такого состояния, которое Вам больше нравится.
Моя же задача в данном материале заключалась в том, чтобы показать Вам, как можно применять события JavaScript для достижения подобных эффектов.
Материал подготовлен на основе кода, предоставленного Владимиром Трофименко (сайт: psdmaster.ru)
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
