Видеоуроки с ответами на вопросы: как создать сайт, как сделать дизайн сайта, как продвинуть его в сети, а так же css, .htacces, seo, php, html и многое другое.
главная страница | обратная связь | RSS-канал новостей| карта сайта
Веб-Строительство
Скачать
Главная страница>>html&php>>форма с подсчетом символов и подсказками

форма с подсчетом символов и подсказками

С помощью CSS, JavaScript и событий onKeyDown, onBlur, onFocus, onMouseOver, onMouseOut мы сделаем красивую форму для отправки сообщений с подсказками и подсчетом количества введенных слов, их ограничением в случае превышения лимита.

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

События onBlur, onFocus, onMouseOver, onMouseOut используются для тегов LABEL, INPUT, SELECT, TEXTAREA и BUTTON, в данном случае мы будем использовать их для TEXTAREA, INPUT, BUTTON нашей формы.

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

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

Событие onMouseOver возникает при наведении курсора на объект. В нашем случае это кнопка «отправить», которая примет синий цвет.

Событие onMouseOut возникает при отводе курсора за границы объекта. В нашем случае данным событием обладает кнопка «отправить» и после того как пользователь уберет курсор с объекта, то он станет серым.

Событие onKeyDown будет осуществлять подсчет символов в активной форме.

В этих событиях мы будем писать небольшой Java-код, который будет позволять менять цвет (this.style.background='цвет' – этот.стиль.фона.цвет). Если Вы хотите изменять не только цвет, но и еще что-то, например, сделать текст другим цветом, то перечисляйте команды через точку с запятой - ; (onBlur ="this.style.color='red'; this.style.background='blue'”).

CSS-код:
/* "Сеть для бизнеса" http://web4biz.ru - сайт Вам в помощь! Урок подготовил Григорьев Сергей*/

/* CSS главной формы: толщина рамки 1 пиксель серого цвета, шириной рамки в 400 пикселей. Внутренние отступы 15 пикселей, внешние - 5 пикселей. */
.form {
border: 1px solid #E9E9E9;
width:400px;
padding:15px;
margin:5px
}

/* кнопка: толщина рамки 1 пиксель серого цвета, жирный шрифт и серый фон */
.button {
border: 1px solid #E9E9E9;
color:#666666;
font-weight:bold;
background:#F4F4F4
}

/* текст формы: текст такой-то такой-то и все это добро серого цвета */
.pform {
font:Verdana, Arial, Helvetica, sans-serif 14px;
color:#666666
}
/* синий фон input`ов */
.input {
background:#DFEBFF
}


Html-код формы:
<!-- "Сеть для бизнеса" http://web4biz.ru - сайт Вам в помощь! Урок подготовил Григорьев Сергей -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="form.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>форма с подсчетом символов и подсказками</title>
</head>
<body>

<SCRIPT type=text/javascript>
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
limitCount.value = limitNum - limitField.value.length;
}
}
</SCRIPT>
<form class="form" action="form.html" method="post" name="form">
<p class="pform"<label>Ваше имя:</label><br>
<input class="input" onFocus="this.style.background='#FFFFCC'"
onBlur="this.style.background='#DFEBFF'; if (this.value=='')
{this.value='Введите ваше имя'}" value="Введите ваше имя"
name="author" type="text" size="35" maxlength="30">
<br>
<label>Текст:<br>
<textarea onKeyDown="limitText(this,this.form.count,500)";
wrap="PHYSICAL" class="input"
onFocus="this.style.background='#FFFFCC'"
onBlur="this.style.background='#DFEBFF'; if (this.value=='')
{this.value='Введите текст сообщения'}" name="text" cols="40"
rows="4" maxlength="200" >Введите текст сообщения</textarea> </label>
Символов осталось: <INPUT readOnly size="2" value="500"
style='margin-top:5px;' name=count>
<br><br>
<input onMouseOver="this.style.background='#DFEBFF'"
onMouseOut="this.style.background='#f6f6f6'" name="button"
type="submit" class="button" value="Отправить"></p>
</form>
<!--
#DFEBFF - пастельно синий
#FFFFCC - пастельно желтый
#f6f6f6 - серый у кнопки
-->
</body>
</html>


В коде присутствует Java-код, который отвечает за подсчет символов в поле самого комментария text, его разбирать нам нет необходимости.

В нашем поле комментария <TEXTAREA> есть код onKeyDown="limitText(this,this.form.count,500)"; wrap="PHYSICAL". Функция limitText непосредственно связана с вышеприведенным Java-кодом и именем нашей формы form. А так же третьим элементом, где выводится количество оставшихся символов «Символов осталось: <INPUT readOnly size="2" value="500" style='margin-top:5px;' name=count>». Если Вы меняете допустимый размер. К примеру, вместо 500 сделать 800, то параметры нужно менять в двух перечисленных кодах, где стоят эти цифры.

Наш CSS код, а именно class="input" возвращает синие цвета обратно после «событий», тем самым позволяет применять цветные формы и события в них. Все остальные классы имеют обычные функции.

Вот вроде и все нюансы учтены, только стоит вбить туда свои параметры и установить на сайт. Скачать архив с примером
Дата публикации: 2009-07-15 Просмотров: 1196 Автор: Сергей печатная версия

Пять популярных статей из категории - html&php:
форма с подсчетом символов и подсказками


Комментарии к статье:

Автор комментария: Александр
Дата: 2010-08-04 13:11:02 ip-адрес:(85.115.187.94)
Статья хорошая, все расписано. Еще бы добавить php-скрипт, который бы все обрабатывал и цены бы не было :) Тема все-таки html&php

Ответ: учтем в след. уроке

Автор комментария: Евгений
Дата: 2010-08-09 12:36:18 ip-адрес:(94.159.50.102)
onKeyDown="limitText(this,this.form.count,500)" заменить на onkeyup так будет лучше, заметите различия при удаление всех символов: поле пусто лимит 699, еще раз удаляем и 700, причем текст-арея как был пустым таким остался

Ответ: спасибо, учтем

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



Символов осталось:

Удалите слово "форма" и введите сумму красных чисел на изображении:
Интернет-Бизнес
Последнее:
• Кто твой посетитель?
• Как сделать favicon для сайта
• Этапы разработки сайта
• css спрайты в оформлении меню / css sprite in menu
• как сделать карту сайта
• форма с подсчетом символов и подсказками
• 6 ошибок в поисковой оптимизации (SEO)
• 5 технических советов поисковой оптимизации сайта (SEO)
• Описание robots.txt. Основные правила, примеры.
• Как привлечь к себе больше посетителей?
© 2009-2010. Григорьев Сергей.
Условия использования материалов сайта