martes, 6 de octubre de 2015

Nuevos atributos en HTML5



Algunos tipos de campo requieren de la ayuda de atributos, como los anteriormente estudiados min, max y step. Otros tipos de campo requieren la asistencia de atributos para mejorar su rendimiento o determinar su importancia en el proceso de validación. Ya vimos algunos de ellos, como novalidate para evitar que el formulario completo sea validado o formnovalidate para hacer lo mismo con elementos individuales. El atributo autocomplete, también estudiado anteriormente, provee medidas de seguridad adicionales para el formulario completo o elementos individuales. Aunque útiles, estos atributos no son los únicos incorporados por HTML5. Es momento de estudiar el resto.


  • Atributo placeholder
Especialmente en tipos de campo search, pero también en entradas de texto normales, el atributo placeholder representa una sugerencia corta, una palabra o frase provista para ayudar al usuario a ingresar la información correcta. El valor de este atributo es presentado en pantalla por los navegadores dentro del campo, como una marca de agua que desaparece cuando el elemento es enfocado.

Código 6-15. El atributo placeholder.

<input type="search" name="busqueda" id="busqueda"
placeholder="escriba su búsqueda">


  • Atributo required
Este atributo booleano no dejará que el formulario sea enviado si el campo se encuentra vacío. Por ejemplo, cuando usamos el tipo email para recibir una dirección de email, el navegador comprueba si la entrada es un email válido o no, pero validará la entrada si el campo está vacío. Cuando el atributo required es incluido, la entrada será válida sólo si se cumplen las dos condiciones: que el campo no esté vacío y que el valor ingresado esté de acuerdo con los requisitos del tipo de campo.

Código 6-16. El campo email ahora es un campo requerido.

<input type="email" name="miemail" id="miemail" required>


  • Atributo multiple
El atributo multiple es otro atributo booleano que puede ser usado en algunos tipos de campo (por ejemplo, email o file) para permitir el ingreso de entradas múltiples en el mismo campo.
Los valores insertados deben estar separados por coma para ser válidos.

Código 6-17. El campo email acepta múltiples valores separados por coma.

<input type="email" name="miemail" id="miemail" multiple>

El Código 6-17 permite la inserción de múltiples valores separados por coma, y cada uno de ellos será validado por el navegador como una dirección de email.



  • Atributo autofocus
Esta es una función que muchos desarrolladores aplicaban anteriormente utilizando el método focus() de Javascript. Este método era efectivo pero forzaba el foco sobre el elemento seleccionado, incluso cuando el usuario ya se encontraba posicionado en otro diferente. Este comportamiento era irritante pero difícil de evitar hasta ahora. 
El atributo autofocus enfocará la página web sobre el elemento seleccionado pero considerando la situación actual. No moverá el foco cuando ya haya sido establecido por el usuario sobre otro elemento.

Código 6-18. El atributo autofocus aplicado sobre un campo de búsqueda.

<input type="search" name="busqueda" id="busqueda" autofocus>


  • Atributo pattern
El atributo pattern es para propósitos de validación. Usa expresiones regulares para personalizar reglas de validación. Algunos de los tipos de campo ya estudiados validan cadenas de texto específicas, pero no permiten hacer validaciones personalizadas, como por ejemplo un código postal que consiste en 5 números. No existe ningún tipo de campo predeterminado para esta clase de entrada.
El atributo pattern nos permite crear nuestro propio tipo de campo para controlar esta clase de valores no ordinarios. Puede incluso incluir un atributo title para personalizar mensajes de error.

Código 6-19. Tipos personalizados usando el atributo pattern.

<input pattern=”[0-9]{5}" name="codigopostal" id="codigopostal”
title=”inserte los 5 números de su código postal”>

IMPORTANTE: Expresiones regulares son un tema complejo y no relacionado directamente con HTML5. Para obtener información adicional al respecto, visite nuestro sitio web y siga los enlaces correspondientes a este capítulo. 


  • Atributo form
El atributo form es una adición útil que nos permite declarar elementos para un formulario fuera del ámbito de las etiquetas <form>. Hasta ahora, para construir un formulario teníamos que escribir las etiquetas <form> de apertura y cierre y luego declarar cada elemento del formulario entre ellas. En HTML5 podemos insertar los elementos en cualquier parte del código y luego hacer referencia al formulario que pertenecen usando su nombre y el atributo form:

Código 6-20. Declarando elementos del formulario en cualquier parte.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Formularios</title>
</head>
<body>
<nav>
<input type="search" name="busqueda" id="busqueda"
form="formulario">
</nav>
<section>
<form name="formulario" id="formulario" method="get">
<input type="text" name="nombre" id="nombre">
<input type="submit" value="Enviar">
</form>
</section>
</body>
</html>



Espero haber ayudado en algo. Hasta la próxima oportunidad!








2 comentarios:

  1. Respuestas
    1. Hola Unknown, gracias por la visita y el aporte de tu comentario!
      Los mejores deseos! Hasta cualquier momento!

      Eliminar