Очистка поля javascript сценарием

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

Сегодня я расскажу вам, как улучшить эти самые формы с помощью JavaScript. А именно, форма по умолчанию создаётся без значения, то есть в ней ничего не написано.

Мы сделаем так, что в форме Email будет написано «Введите свой Email», а при клике пользователя в форму это сообщение удалится и он сможет ввести свой Email. Аналогично это делается с другими формами ввода.

Приступим, Для начала создадим форму ввода:

<input type="text" name="email" value="Введите свой почтовый адрес" onClick="c()" id="email">

value – значение формы
onClick="c()" - означает запуск скрипта функции c()

Далее напишем скрипт:

<script type="text/javascript">
 function c() {
	 var email = document.getElementById('email');
	 email.value = '';
 }
</script>

Вот такой простой JavaScript исполняет данную задачу.

Ниже представлен пример работы скрипта:

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

<script type="text/javascript">
 function c() {
	 var email = document.getElementById('email');
	 email.value = '';
	 emailbor.style.border = '3px groove #44BF2F';
 }
</script>

Так же вы можете изменить цвет рамки, размер рамки и её стиль, изменяя значения в скрипте.

Вот так вот работает очистка поля javascript сценарием

Ниже более красивая форма ввода.

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Как восстановить контакты в Skype

Вертикальное меню с помощью html и css

Как сделать редирект ссылок

Выборка из базы mysql

Сортировка данных таблиц

Комментарии:

Добавленно - 2011-07-20

SazereS пишет:

Фигня! Во-первых, скрипт будет убирать ЛЮБОЙ текст из поля, в том числе уже введенный емейл. Во вторых все это делается куда проще с JQuery, а добавление зеленой границы проще сделать через CSS, причем тогда она будет убираться при потере фокуса.

В CSS:

#email:focus{
border:3px groove #44BF2F;
}

Добавленно - 2011-07-20

Splish пишет:

SazereS, возможно лучше на JQuery, но ведь это лишь один из вариантов. Возможно кому то он будет легче.
И да, это урок, который можно применить в других задачах.

Добавленно - 2011-07-20

SazereS пишет:

Тогда хотя бы проверку надо дописать

if (email.value == "Введите свой почтовый адрес"){
email.value = "";
}

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

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =