Блог

У меня есть 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>
  

Я хотел бы, чтобы функциональность была такой, чтобы в текстовых полях содержались инструкции, которые очищаются, когда пользователь нажимает на поле, чтобы я мог сэкономить место и удалить слова «Имя пользователя» и «Пароль» из-за пределов форм.

Как этого можно достичь?

Функция, которую вы ищете, называется «заполнитель». (если ничего другого, просто знание этого термина поможет вам найти дополнительную информацию в 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

Если вы используете 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>
  

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

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

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

• http://diveintohtml5.info/forms.html

• http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute

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

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

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

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

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

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

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

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

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

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

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

HTH