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

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

   <form method="POST" action="http://">
 Username: <input type="text" name="username" size="15" />
 Password: <input type="password" name="password" size="15" />
<input type="submit" value="Login" />
 </div>
 </form>

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

Ответ 1

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

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

<input type='text' name='username' size='15' placeholder='User name' />

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

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

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

Ответ 2

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

<form method="POST" action="http://">
    <label for="username">Username:</label> 
    <input placeholder="Username" id="username" name="username" size="15">
    <label for="password">Password:</label> 
    <input placeholder="Password" type="password" id="password" name="password" size="15">
    <input type="submit" value="Login">
</form>

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

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

Ответ 3

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

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

Ответ 4

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

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

Использование:

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

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

НТН

Ответ 5

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

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

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

<label for="username">Username:<label>
<input type="text" id="username" name="username" placeholder="Enter your username" size="15" />

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