Все ленты — последние статьи

Как сделать подсказку в текстовом поле формы.


Исчезновение подсказки при клике в поле формы.

Для чего это может пригодиться. Например, если требуется пояснение, какого рода информацию ждёт сервер от этого поля. Ну и просто — это удобно! Наверно слово "удобно", в уроках JQuery, есть ключевое и оно будет вам встречаться из урока в урок, просто потому, что все эти красивости и есть юзабилити, т.е. удобство взаимодействия пользователя и web страницы. Ну а теперь сам код.

Листинг № 1 — Подсказка для пользователя в полях формы. Скрипт JQuery.

// Подсказка для пользователя в полях формы
$(".nb").focus(function(){
var elem = $(this);
if(elem.attr("value") == "[Введите текст]")
{
elem.attr("value", "");
}
});
$(".nb").blur(function(){
var elem = $(this);
if(elem.attr("value") == "")
{
elem.attr("value", "[Введите текст]");
}
});

 

Листинг № 2 — HTML файл формы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jq.js"></script>
</head>
<body>
<form action="ww" method="get">
<input class="nb" name="" type="text" value="[Введите текст]"><br><br>
<input class="nb" name="" type="text" value="[Введите текст]"><br><br>
<input class="nb" name="" type="text" value="[Введите текст]"><br><br>
</form>
</body>
</html>
JQuery. Видео этого урока.

HTML5 в помощь

Листинг № 3 — А это совершенно новый способ, сделать то же самое с помощью HTML5

<form>
<input name="q" placeholder="Введите имя">
<br>email:<input type="email" placeholder="email">
<br>URL: <input type="url" placeholder="http://">
<br><input type="submit" value="Go">
</form>

SETTER © LPHP.RU