PHP уроки
ПРОСТО самая лучшая обучалка PHP!
  • Студия LPHPRU
  • Уроки PHP
  • Контакты
  • Помощь
Меню
  • PHP - с чего начать?
  • Уроки PHP
  • Функции PHP
  • Массивы
  • Denwer
  • MySQL
  • Информация
  • Dreamweaver уроки
  • JQuery уроки
Календарь
Июнь (2023)
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
2627282930  

  • Что нового?
    • Тест №2
    • Тест №1 для разработчиков
    • PHP 5.6 RC1
    • SQL. Как cкопировать данные одной колонки в другую, в той же таблице
    • GRUB изменить порядок загрузки OS в Linux
    • SSH - вход на сервер без ввода пароля
    • PhpMyAdmin - проблема с загрузкой большого файла на сервер

  • Комментарии
    • тут нечего не понятно
    • Может уже пора на WebStorm переходит�...
    • Здравствуйте. 10 лет пользуюсь др�...
    • Была такая проблема, решалась пе�...
    • Возможно с течением времени этот...

  • TOP-5
    • Метод POST (2946431 )
    • Привет, МИР! (911225 )
    • Метод GET (667805 )
    • Операторы (606044 )
    • Firefox уже запущен, но не отвечает... (353682 )

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

Главная» Array » Как сделать подсказку в текстовом поле формы.
PHP урок № 355
Исчезновение подсказки при клике в поле формы.
Для чего это может пригодиться. Например, если требуется пояснение, какого рода информацию ждёт сервер от этого поля. Ну и просто - это удобно! Наверно слово "удобно", в уроках JQuery, есть ключевое и оно будет вам встречаться из урока в урок, просто потому, что все эти красивости и есть юзабилити, т.е. удобство взаимодействия пользователя и web страницы. Ну а теперь сам код.
Листинг № Array - Подсказка для пользователя в полях формы. Скрипт 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", "[Введите текст]"); } });
Листинг № Array - 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 в помощь
Листинг № Array - А это совершенно новый способ, сделать то же самое с помощью 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
Администрация сайта
Array
  • lphp.ru © 2009-2023