Intereting Posts
печать “” с использованием html Лучшая практика реализации стрелок вниз в поле выбора Группировка строк таблицы на основе значения ячейки с помощью jquery / javascript Изменение изображений каждые 5 секунд с помощью jquery в php Как показать google.com в iframe? что я должен использовать вместо document.write для всплывающего windows Расширения Google Chrome – открыть новую вкладку при нажатии значка на панели инструментов Использование тегов HTML-скриптов для кодирования при наличии источника В html5 для установки флажка, как отмечено, следует ли просто использовать check (как свойство) или checked = “checked” (как атрибут)? Как получить текст, который будет вставлен в текстовый редактор html? жить изменить любые свойства визуализации сайта Как скрыть div при размещении рекламы в Google adsense? PHP-захват массивов для создания строк кода Как перейти на якорь на submit – не вверху страницы Является ли shell нарушением разделения содержимого?

Как создать форму HTML с предварительно заполненными «инструкциями», которые очищаются, когда пользователь нажимает кнопку?

У меня есть html-форма:

Username: Password:

Я бы хотел, чтобы функциональность такая, что текстовые поля имеют в них инструкции, которые очищаются, когда пользователь нажимает кнопку, поэтому я могу сэкономить место и удалить слова Username и Password извне форм. Как я могу это достичь?

Функция, которую вы ищете, называется «заполнителем». (если ничего другого, просто зная, что этот термин поможет вам найти дополнительную информацию в Google)

В современных браузерах, поддерживающих HTML5, это встроенная функция, которую вы можете использовать очень легко:

  

Однако этот метод работает только с современными браузерами, которые поддерживают эту функцию.

Для более старых браузеров для этого потребуется код Javascript. К счастью, есть несколько сценариев, которые вы можете использовать, в том числе некоторые, написанные как плагины JQuery. Те, которые я рекомендую, это те, которые привязаны к атрибуту placeholder в поле ввода, так что вы можете поддерживать его изначально в браузерах, которые имеют эту функцию, и возвращаются к Javascript для тех, кто этого не делает.

Попробуйте это: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Если вы используете HTML5, вы можете сделать это, используя атрибут placeholder :

 

Я бы добавил текст Username и Password, заключенный в tags для доступности, но вы всегда можете скрыть их с помощью CSS:

 form { position:relative; } label { position:absolute; top:-9999px; } 

Они обычно называются водяными знаками и требуют javascript.

Посмотрите плагин jQuery-watermark .

Я написал пользовательский, потому что я хотел иметь конкретное поведение.

https://90dayjobmatch.com/js/jquery.wf.formvaluelabel.js

Применение:

 $('#signup_job_title').formvaluelabel({text:'eg. Graphic Artist'}); 

Дайте мне знать, если у вас есть какие-либо вопросы по этому поводу.

НТН

Как отмечали другие, в HTML5 есть атрибут, который позволяет это называется placeholder – читайте об этом здесь:

Это не требует Javascript, но он не поддерживается старыми браузерами (см. http://caniuse.com/#feat=input-placeholder ).

Следует отметить, что placeholder не предназначен для замены s, который вы не используете и, вероятно, должны быть.

  

Этикетки важны по целому ряду причин, и плохой практике не использовать их.