Uno de los problemas que teníamos con la versión anterior de HTML es decir la 4, era la validación ya que teníamos que utilizar otra tecnología para su validación, por supuesto con Javascript dábamos el toque que necesitábamos para dar lo que le faltaba a estos formularios.
En HTML5 esto se ha solucionado ya que se hicieron unas grandes mejoras para su propia validación y otras para su fácil manejo en si para verse más atractivos.
En este capítulo, vamos a ver una pequeña muestra a las nuevas características de los formularios en HTML5. Y entenderemos que sus nuevas características son muy importantes para la web de hoy.
Ahora, ten en cuenta que no todos los navegadores soportan estas novedades y quienes lo hacen muestran los resultados a su manera, pero Empecemos:
Todos sabemos que La etiqueta <input> especifica un campo de entrada donde el usuario puede introducir datos. Bueno, en HTML5 vemos que tiene varios tipos de entrada o <input>. Estas nuevas características permiten un mejor control de entrada y validación. Ejemplos, tenemos:
<input type=text>: especifica que el usuario debe de llenar el campo con texto
<input type=email>: especifica que el usuario debe de llenar el campo con un email valido
<input type=url>: especifica que el usuario debe de llenar el campo con url
<input type=color>: especifica que el usuario debe de llenar el campo con un color
<input type=date>: especifica que el usuario debe de llenar el campo con una fecha
<input type=month>: especifica que el usuario debe de llenar el campo con unos de los meses
para ver mas opciones ve aquí: http://www.w3schools.com/html5/html5_form_input_types.asp
1 ? Elemento <datalist>:
Este elemento proporcionar un "autocompletar" en funciones de los <input>. Es decir cuando el usuario se situé dentro del campo y comience a escribir este campo va a desplegar una cantidad de opciones predefinidas anteriormente en su configuración. Ejemplo:
<input "Paises-europeos" />
<datalist "Paises-europeos"
<option value"España"
<option value"Francia"
<option value"Alemania"
<option value"Portugal"
<option value"Holanda"
</datalist>
Si comienzas a escribir con la letra e, el porsupuesto te autocompletara españa. Asi funciona.
Los nuevos atributos:
Además de los nuevos tipos de entrada, este tiene varios atributos nuevos para especificar el comportamiento y las limitaciones: Autocomplete, min, max, pattern, múltiple, y step.
También para las listas hay un nuevo atributo, es el elemento <datalist>, que especifica una lista de opciones predefinidas para un elemento <input>
- Hablemos de los nuevos atributos para <input> y para <form>
1 ? El atributo autocomplete:
Que vendría siendo "Autocompletar" La mayoría de los navegadores tienen algún tipo de funcionalidad de autocompletar. El atributo autocomplete permite controlar cómo funciona esto. El atributo autocomplete específica si un campo de formulario o de entrada debe tener autocompletado de encendido o apagado, es decir On o Off.
<form action"form.php"autocomplete
Nombre:<input "text""fname" /><br />
Apellido: <input "text""lname" /><br />
E-mail: <input "email""email"autocomplete"off" /><br />
<input "submit" />
</form>
El atributo autocomplete trabaja con <form> y con los <input> siguientes: ext, search, url, tel, email, password, datepickers, range, and color.
2- El atributo autofocus:
El autofocus o enfoque automático proporciona una forma declarativa para enfocar un control de formulario durante la carga de la página. Anteriormente, un desarrollador necesita para escribir JavaScript utilizando control.focus (). La nueva forma permite al navegador hacer cosas inteligentes como no centrar el control si el usuario ya está escribiendo en otro.
<form action"form.php"
Nombre:<input "text""fname"autofocus"autofocus"/><br />
Apellido: <input "text""lname"autofocus"autofocus"/><br />
E-mail: <input "email""email"autofocus"autofocus" /><br />
<input "submit" />
</form>
Esto funciona correctamente en chrome.
3- El atributo multiple:
El atributo multiple especifica que el usuario puede introducir más de un valor en el elemento <input>. Ej: <input type=email múltiples> permite al usuario introducir varias direcciones de correo electrónico.
Seleccionevariasimagenes<input "file""img"multiple"multiple" /><br/>
Entre varios Email:<input "email"multiple"multiple"
Anteriormente solo se soportaba en navegadores que implementan WebKit como Chrome.
4- El atributo required:
El atributo required o requerido en un elemento se establecerá en un <input>, y automáticamente hace que el usuario se vea obligado a llenar el campo para continuar, es decir el navegador no permitirá que se envié la forma sin que el input con este atributo este vacío.
<form action"demo_form.asp"
Nombre: <input "text""name"required"required" />
<input "submit" />
</form>
El atributo requerido trabaja con los tipos de entrada: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
5- El atributo min and max:
El atributo min and max o mínimo y máximo nos hace especificar el valor mínimo y máximo para un elemento <input>.
Escojade1a5<input "number""quantity" />
El atributo min a max funciona con los siguientes tipos de entrada: number, range, date, datetime, datetime-local, month, time and week.
??????????????
Son aproximadamente 18 atributos que podemos utilizar, pero Ojo la mayoría está con solo soporte para navegadores que implementan webkit como chrome y opera.
Para ver todos los demas atributos ve aqui.
??????????????
2 ? Elemento <output>:
El elemento <output> es para mostrar los resultados de un cálculo o de otro tipo con la escritura.
<form oninput"x.value=parseInt(a.value)+parseInt(b.value)"
<input "range"value />
<input "number"value />
<output </output>
</form>
Por ejemplo aquí se realiza un cálculo del atributo step que nos genera un resultado y el del atributo range que nos presenta un slider que podemos graduar para dar un resultado. Y el resultado total lo sacamos utilizando el elemento <output>
Para saber mas de este nuevo elemento ve aqui:
3 ? Elemento <keygen>:
El propósito del elemento <keygen> es proporcionar una forma segura de autenticar a los usuarios. La etiqueta <keygen> especifica un campo generador de un par de claves en un formulario, cuando se envía el formulario, dos claves se generan, uno público y uno privado.
Para saber de este nuevo elemento ve aqui:
En Conclusion:
El apoyo crece en cuanto a los elementos de entrada y los atributos de los formularios en HTML5, para crear formularios más completos se requerirá menos y menos de JavaScript para la validación del lado del cliente y las mejoras de la interfaz de usuario. Aunque muchos de estos atributos no sean soportados por los navegadores excluyendo chrome no hay duda que debemos aprender a usarlos por que saldrán técnicas que harán posible su compatibilidad o a medida que pasa el tiempo y las actualizaciones de los navegadores se ejecuten contaremos ya con poderosas herramientas para nuestro trabajo.
más en: Pablo M. Francisco
Fuente: este post proviene de Pablo M. Francisco, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado: