1. La ayuda para completar
El atributo placeholder permite mostrar un valor de ejemplo en un campo de texto para ayudar al usuario. Este verá así un ejemplo del tipo de valor que tiene que insertar. En cuanto el usuario haga clic en el campo, el valor de ejemplo desaparecerá.
Esta es la sintaxis que podríamos usar, si volvemos a tomar el ejemplo anterior:
<input type="text" pattern="[0-9]{3}-[A-Z]{3}"
placeholder="111-AAA" id="clave">
Se visualizará así cuando el usuario no haya hecho clic en el campo:
Se visualizará así cuando el usuario haya hecho clic en el campo:
2. Activar un campo
Usted puede hacer que el punto de inserción parpadee en un campo específico utilizando el atributo boleano autofocus.
Veamos un ejemplo en el que se ha usado este atributo con una sintaxis abreviada:
<label for="nombre">Su nombre y apellidos: </label>
<input type="text" id="nombre" autofocus />
Cuando se abra la página, verá que el punto de inserción parpadea en el interior del campo seleccionado:
Deberá usar un único autofocus en cada página.
Utilice esta funcionalidad con "moderación": algunos internautas la "odian", porque sienten que se les está obligando a insertar un valor en dicho campo. Además, algunos usuarios experimentados utilizan la barra espaciadora para recorrer las páginas web y, con el autofocus, no será posible usar esa funcionalidad. Aunque, "en principio", los navegadores deberían disponer de una opción para desactivar el autofocus.
3. El completado automático
En los formularios, los navegadores usan de manera predeterminada el atributo autocomplete con el valor on, lo que permite acceder a la lista de los últimos valores introducidos en un campo. De este modo es posible seleccionar rápidamente un valor que ya hayamos insertado con anterioridad.
<form id="registro" method="post" action="registro.php"
autocomplete="on">
Aunque usted haya activado la funcionalidad de autocompletado para la totalidad de los campos de un formulario, no tiene por qué usarla, si no lo desea, en un campo determinado:
<input type="url" id="url" autocomplete="off" />
4. Redimensionar un campo
La nueva propiedad CSS3 resize permite autorizar a los usuarios para que puedan cambiar la dimensión de un campo de texto. Esta propiedad admite cinco valores:
- none: no se autoriza la redimensión.
- both: se autoriza la redimensión vertical y horizontal.
- horizontal: solamente se autoriza el redimensión horizontal.
- vertical: solamente se autoriza el redimensión vertical.
- inherit: hereda la propiedad del elemento padre.
Veamos el formulario:
<form id="test" method="#" action="#">
<p>
<label for="nombre">Nombre y apellidos: </label>
<input type="text" id="nombre" />
</p>
<p>
<label for="comentario">Comentarios: </label>
<br />
<textarea name="comentario" id="comentario"></textarea>
</p>
<p>
<input type="submit" name="enviar" id="enviar" value="Enviar" />
</p>
</form>
Veamos el estilo CSS para el elemento <textarea>:
#comentario{
width: 200px;
height: 90px;
border: 1px solid #333;
background-color: lightyellow;
resize: both;
}
Así se visualizará con Firefox:
Se puede ajustar el tamaño tanto vertical como horizontalmente:
Espero haber ayudado en algo. Hasta la próxima oportunidad!
Twittear
No hay comentarios:
Publicar un comentario