Ликиликс

  сайтостроение программирование

  

Работа с input и textarea

настройка внешнего вида формы

  26.09.2012  
Совсем недавно понадобилось разобраться с работой полей input и textarea, а именно сделать их красивее и ещё несколько полезных настроек которые возможно пригодятся и вам, так как на многих сайтах эти поля не имеют стилей, а ведь иногда так охота чтобы сайт выделился из общей массы, итак приступим
делаем сайты под ключ в Москве

Сделать подсвеченное поле input при заполнении

Недавно мы запустили сайт отправки смс, ясно и понятно что поля input будут самыми видными и самой рабочей частью этого сайта так как в них вводятся номера телефонов и захотелось их  украсить чтобы при заполнении форма подсвечивалась. Решение оказалось не столь трудным взгляните сами

input:focus {
  outline:none;
  outline:none;
  border-color:rgba(209,121,47,.75);
  outline:none;
  border-color:rgba(209,121,47,.75);
  border-radius:3px; -moz-border-radius:3px;
  -webkit-border-radius:3px; outline:none;
  border-color:rgba(209,121,47,.75);
  border-radius:3px; -moz-border-radius:
  3px; -webkit-border-radius:3px;
  outline:none;
  border-color:rgba(209,121,47,.75);
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  box-shadow:0 0 8px rgba(209,121,47,.75);
  -moz-box-shadow:0 0 8px rgba(209,121,47,.75);
  -webkit-box-shadow:0 0 8px rgba(209,121,47,.75);
}

Вставьте этот код в свой файл стилей css, и не забудьте его отредактировать под себя
Выделенное красным это подсветка input при заполнении
Выделенное синим это закругление input при заполнении

Сделать подсвеченное поле textarea при заполнении

Конечно же и не обошлось без правки текстового поля textarea

textarea:focus {
  outline:none;
  outline:none;
  border-color:rgba(209,121,47,.75);
  outline:none;
  border-color:rgba(209,121,47,.75);
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  outline:none;
  border-color:rgba(209,121,47,.75);
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  outline:none;
  border-color:rgba(209,121,47,.75);
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  box-shadow:0 0 8px rgba(209,121,47,.75);
  -moz-box-shadow:0 0 8px rgba(209,121,47,.75);
  -webkit-box-shadow:0 0 8px rgba(209,121,47,.75);
}

Вставьте этот код в свой файл стилей css, и не забудьте его отредактировать под себя
Выделенное красным это подсветка textarea при заполнении
Выделенное синим это закругление textarea при заполнении

Сделать ограниченный ввод знаков в поле input

Иногда просто необходимо чтобы поля input вмещали в себя X-число знаков, например ввод пароля или логина при регистрации.

<input maxLength="11" name="phone" >

Можно воспользоваться этой прекрасной командой) вместо цифры 11 введите число которое максимально допустимое для вашей формы.

Сделать ограниченный ввод знаков в текстовое поле textarea

Выше указанный код не подойдёт для textarea так как он не срабатывает во всех браузерах, мы будем использовать его модифицированный аналог из двух частей

<textarea name=msg onkeyup="return ismaxlength(this)" maxlength="70 "id="textareaTrue"></textarea>

Это первая часть кода для ограничения ввода знаков в textarea, замените цифру 70 на нужное вам число.
И вторая часть кода которую нужно вставить до закрывающегося тега или около счётчика посещения вашего сайта.

<script type="text/javascript">
function ismaxlength(obj){
 var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
 if (obj.getAttribute && obj.value.length>mlength)
 obj.value=obj.value.substring(0,mlength)
}

</script>

Уже заполненные частично input

Также иногда нужно чтобы чтобы поле input было уже заполнено для этого воспользуйтесь следующим кодом.

<input class="inptxt" value="123 " name="">

Замените 123 на своё содержание которое уже будет введено в input

Уже заполненные частично textarea

Тоже самое можно проделать и с textarea

<textarea class="inparea" cols=10 rows=3 title="" name=""> 456  </textarea>

Просто замените 456

Фоновая подсказка в input

Если частично заполненное поле input в качестве подсказки не подходит то воспользуйтесь фоновой подсказкой

<input  name="phone" placeholder=" подсказка">

Замените подсказка на свой текст таким образом в фоне input будет введён ваш текст, а при заполнении он будет пропадать и не будет мешать.

Фоновая подсказка в textarea

Также это можно проделать и с textarea

<textarea class="inparea" cols=10 rows=3 title="" name=""placeholder=" подсказка"></textarea>

Не забудьте заменить подсказка на свой текст.

Красивая кнопка в форме

И в заключении давайте сделаем красивую кнопку, а будет она в виде картинки

<input type="submit" value="" style="width: 116px; height: 31px; background: url('4.png') 0 0 no-repeat; border: none; cursor: pointer;" />

Синим цветом указана ширина и высота картинки
Красным путь к картинке
Вот таким образом можно заменить стандартные buttonSend и сделать кнопку куда красивее.
Ну вот и всё друзья на этом статья заканчивается, в ней вы узнали - как сделать подсвеченные края в форме при заполнении, как сделать закруглённую форму, как сделать ограниченный ввод знаков в форме, как сделать уже заполненную форму, как сделать подсказки в форме, и как сделать красивую кнопку в форме.


 

Подпишитесь на новые статьи через twitter

 

 
Copyright © My Company 2009-2013      обратная связькарта сайта