¿Cómo crear un formulario HTML con "instrucciones" precargadas que se borran cuando un usuario hace clic en el cuadro?

Question

que tienen un formulario 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> 

Lo que me gustaría es la funcionalidad de tal manera que los campos de texto tienen instrucciones en los que claro cuando un usuario hace clic en la caja, de modo que pueda ahorrar espacio y eliminar las palabras Nombre de usuario y contraseña desde fuera de los formularios. ¿Cómo puedo conseguir esto?

Answer 1

La característica que está buscando se llama "marcador de posición". (Si no otra cosa, el hecho de saber este término le ayudará a buscar para obtener más información en Google)

En los navegadores modernos que soportan HTML5, esta es una característica integrada que se puede utilizar muy fácilmente, de la siguiente manera:

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

Sin embargo, este método solo funciona con navegadores actualizados que admitan esta característica.

Los navegadores antiguos necesitarán tener un código JavaScript para hacerlo. Afortunadamente, hay una serie de scripts que puede usar, incluidos algunos escritos como complementos de JQuery. Los que recomendaría son los que se relacionan con el atributo placeholder en el campo de entrada, para que pueda admitirlo de forma nativa en los navegadores que tienen esta característica y recurrir a Javascript para aquellos que no lo tienen.

prueba este: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Answer 2

Estas son comúnmente llamadas filigranas y requieren javascript.

Mire el plugin jQuery-watermark.

Answer 3

Si utiliza HTML5 se puede hacer esto mediante el atributo 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> 

yo todavía incluyen el nombre de usuario y contraseña texto envuelto en <label> etiquetas para la accesibilidad, pero siempre se puede ocultar ellos con algunos CSS como este:

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

Answer 4

me escribió una personalizada porque quería tener un comportamiento específico.

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

Uso:

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

que me haga saber si tiene alguna pregunta al respecto.

HTH

Answer 5

Como otros han señalado, no es un atributo en HTML5 que permite que esta llama placeholder - leer sobre ello aquí:

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

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

Esto no requiere Javascript, pero no es compatible con navegadores antiguos (ver http://caniuse.com/#feat=input-placeholder).

Cabe señalar que el marcador de posición es no pretende reemplazar <label> s, que no esté utilizando y probablemente debería ser.

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

Las etiquetas son importantes por una variedad de razones y es una mala práctica no usarlas.