Интерактивная форма с помощью 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.
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Зарегистрироваться и Начать продвижение
Таким образом, при получении фокуса поле для ввода имени меняет свой внешний вид, т.к. к нему применяется уже класс 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 с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
