HTML5 nos ofrece nuevas opciones a la hora de crear formularios, como son nuevos tipos de campos y validación automática del lado del cliente, sin necesidad de scripts.
Aunque no todos los navegadores implementan todavía todas estas nuevas características, siempre podemos utilizar algún script que nos permita su uso, como puede ser este plugin de jquery
Veamos los nuevos tipos de campo que nos ofrece:
- email: nos sirve para introducir direcciones de email
- url: para direcciones de páginas web
- number: para la introducción de números
- tel: para números de teléfono
- search: para campos de búsqueda
- search: para campos de búsqueda
- datetime: para seleccionar fecha y hora
- date: para seleccionar una fecha
- month: para seleccionar un mes
- week: para seleccionar una semana
- time: para seleccionar una hora
- datetime-local: para seleccionar una fecha y una hora sin zona horaria
- range: para seleccionar entre un rango de valores
- color: para seleccionar un color en valor hexadecimal
Nuevos atributos que nos ofrecen nuevas posibilidades:
- placeholder: nos muestra un texto de ejemplo dentro de la caja de texto que desaparece cuando hacemos foco en él.
- required: nos indica que ese campo no puede ser enviado vacío, y debe cumplir las especificaciones del tipo de campo que sea, por ejemplo, en un campo tipo email debemos introducir una dirección de correo válida
- autofocus: Hace que el cursor se coloque automáticamente en ese campo sin necesidad de ningún script.
- pattern: Expresión regular que debe coincidir con el valor correcto que queremos que introduzca el usuario.
- maxlength: En los textareas ahora podemos utilizar este atributo para limitar el número máximo de caracteres introducidos.
Estos son las principales novedades que nos ofrece HTML5, aunque hay muchas más que puedes consultar aquí
Veamos un ejemplo de un formulario en HTML5 que muestre estas novedades:
<form method="post" action="script_de_proceso.php" autocomplete="off"> <input type="text" placeholder="Nombre" name="nombre" value="" required autofocus> <input type="email" placeholder="Dirección de correo" name="email" value="" required> <textarea placeholder="Observaciones" name="observaciones" maxlength="200"></textarea> <input type="submit" name="enviar" value="Enviar"> </form>
Comentarios