Новости SEO SEO Дружелюбные формы для сайта. Placeholder
Дружелюбные формы для сайта. Placeholder PDF Печать E-mail

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

Placeholder

Используйте при создании форм placeholder, он позволит Вам сделать пользователям подсказку, и при этом поможет сэкономить место.  Атрибут placeholder выводит текст внутри поля формы, который исчезает при клике на поле мышкой.

В коде это поле выглядит так:

<input type="text" name="phone" id="phone" placeholder="(012) 345-67-89">

данный атрибут поддерживается всеми популярными браузерами и IE 10+.

Мало того, placeholder`у можно задать стиль, изменить шрифт, цвет. Как задать стиль placeholder`у? Элементарно!  С помощью отдельных css правил:

:-webkit-input-placeholder
-moz-placeholder


К примеру, чтобы сделать ярко красный шрифт небольшого размера Вам следует написать следующий код:

.form input[type="text"]::-webkit-input-placeholder {
    color: red;
    font-size:14px;
    font-family: georgia;}
   
.form input[type="text"]::-moz-placeholder {
    color: red;
    font-size:14px;
    font-family: georgia;
   }


Это, учитывая то, что вся форма взята в div с классом “form”. Тем не менее изменить внешний вид placeholder можно только для Firefox и браузеров на движке webkit (Chrome, Safari и всякие яндекс браузеры и интернеты от мэил ру).
 
 
Друзья, делайте простые и понятные формы, тогда люди их будут более охотно заполнять.
П.С. Если Вам понравится  эта статья, я расскажу Вам о том, как сделать интерактивную форму (которая будет проверять данные по мере ввода и сообщать о правильности или не правильности пользователю). Так же расскажу как сделать форму, которая не будет терять данные если пользователь случайно закроет окно, или браузер.
 
К слову, друзья, если Вас интересуют качественные и недорогие лодки из пвх настоятельно рекомендую Вам посетить отличный сайт - www.planetalodok.ru.
 
 

Добавить комментарий

Защитный код
Обновить