Стильная форма обратной связи с атрибутом placeholder

Предлагаем Вашему вниманию стильную форму обратной связи с атрибутом placeholder. Вы сможете переделать ее под себя, поменяв цвета, ширину и прочие визуальные технические качества. Давайте остановимся на ней немножко по подробнее и рассмотрим ее код.

Для начала определим, что за атрибут placeholder и каковы его свойства. Placeholder - атрибут языка верстки html, который выводит какой-либо текст, а затем при нажатии на него, текст исчезает, получается своего рода фокус. 

Файл index.php

Как мы видим создаются функции, которые имеют определенные классы (удаление, добавление) и взаимодействуют с placeholder, тем самым изменяя его свойства.

$(document).ready(function(){

if(!Modernizr.input.placeholder){

$('[placeholder]').focus(function() {
 var input = $(this);
 if (input.val() == input.attr('placeholder')) {
 input.val('');
 input.removeClass('placeholder');
}
}).blur(function() {
 var input = $(this);
 if (input.val() == '' || input.val() == input.attr('placeholder')) {
 input.addClass('placeholder');
 input.val(input.attr('placeholder'));
}
}).blur();
 $('[placeholder]').parents('form').submit(function() {
 $(this).find('[placeholder]').each(function() {
 var input = $(this);
 if (input.val() == input.attr('placeholder')) {
 input.val('');
}
})
});
}
});

Далее пишем саму форму обратной связи, указываем тег form в нем обязательное имя со значением name="pr", который и будет взаимодействовать с атрибутом placeholder. Прописываем в тегах input onfocus="if(this.value=='Значение')this.value='';" placeholder="Значение", а в теге textarea placeholder="Значение". Для кнопочки submit прописываем id="submit".

<div id="inputArea">
<form action="#" method="POST" name="pr">
<input type="text" name="name" value="Имя" onfocus="if(this.value=='Имя')this.value='';" placeholder="Имя"/>
<input type="text" name="email" value="E-mail" onfocus="if(this.value=='E-mail')this.value='';" placeholder="E-mail"/>
<input type="text" name="phone" value="Телефон" onfocus="if(this.value=='Телефон')this.value='';" placeholder="Телефон"/>
<textarea rows='4' name="message" placeholder="Сообщение"></textarea>
</div>
<input type="submit" name="submit" id="submit" value="ОТПРАВИТЬ">
</form>

Файл style.css

Прописываем стили для тегов input, textarea и submit.

/*Input, textarea*/

#inputArea
{
padding: 30px;
}

#inputArea input,
#inputArea textarea
{
font-family: Tahoma;
font-size: 14px;
margin: 10px;
display: block;
padding: 5px;
width: 600px;
color: black;
}

/*Submit*/

#submit
{
background: #6cbb6b;
background-image: -moz-linear-gradient(#95d788, #6cbb6b);
background-image: -webkit-gradient(linear,left bottom,
left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
border: 1px solid #7eba7c #578e57 #447d43;
height: 35px;
cursor: pointer;
font: bold 14px Tahoma;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
width: 150px;
margin: 0 auto;
margin-left: 250px;
}

#submit:hover
{
background: #95d788;
background-image: -moz-linear-gradient(#6cbb6b, #95d788);
background-image: -webkit-gradient(linear,left bottom,
left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
}

#submit:active
{
background: #95d788;
outline: none;
}

#submit::-moz-focus-inner
{
border: 0;
}

Итог:

Думаю данная форма обратной связи, сможет Вам пригодиться в применении, ну а если Вы ищете простую контактную форму на PHP, то думаю данный урок даст Вам только начальное представление. Всего доброго, спасибо за внимание!