HTML5 incorpora nuevos elementos para facilitar la creación de campos de datos que en muchos casos debían programarse con javascript o añadir alguna librería externa en algún lenguaje que permitiera extender las capacidades que tenían los elementos de xhtml y html4.
Muchos programadores siguen trabajando de la forma tradicional ya que es soportada por la mayoría de los navegadores, las ultimas mejoras solo son soportadas por las versiones más nuevas.
HTML5 ofrece un conjunto de nuevos atributos para el atributo type del elemento input, es decir la mayoría de los elementos de un formulario, como las cajas de texto.
Algunos de estos atributos de html conocidos son:
Input type=text - Caja de texto
input type=password – Campo para contraseña que oculta la contraseña con asteriscos.
Input type=submit – Botón para enviar formularios
ATRIBUTO TIPO NUMÉRICO REGÍSTRATE
El elemento que contenga como atributo type number, permite no solo determinar que el valor ingresado sea numérico, sino además restringirlo entre máximos y mínimos, podemos ver en la imagen como además tiene validación sin necesidad de programar nada
El código fuente del ejemplo para utilizar este atributo es el siguiente
El atributo tipo date se utiliza para campos donde es necesario contener una fecha. Según el navegador y el soporte que ofrezcan aparecerá el control calendario para poder seleccionar un fecha.
ATRIBUTO TIPO COLOR
El atributo tipo color se utiliza para campos donde es necesario contener un color. Según el navegador y el soporte que ofrezcan aparecerá el control tipo colorpicker para poder seleccionar un color o bien escribir el color en hexadecimal. El selector aparecerá en forma de pop-up cuando se hace click en el color.
ATRIBUTO TIPO EMAIL
El atributo tipo email se utiliza para campos donde es necesario contener un email. Según el navegador y el soporte que ofrezcan validara que el texto introducido tenga el formato de un email, sino aparecerá un mensaje de error, esto nos facilitara la validación de un formulario sin programar.
ATRIBUTO TIPO URL
El atributo tipo url se utiliza para campos donde es necesario contener un dominio, una url. Según el navegador y el soporte que ofrezcan validara que el texto introducido tenga el formato de un dominio, sino aparecerá un mensaje de error, esto nos facilitara la validación de un formulario sin programar. No es necesario que contenga http, ni www, en ese caso si lo requerimos deberemos validarlo mediente programación.
ATRIBUTOS Y PROPIEDADES PARA HTML5
1. Atributo Autocomplete
Cuando escribimos en un campo del formulario nos encontramos que generalmente el navegador nos va a dar la opción de autocompletar lo que estemos escribiendo en ese momento con texto que ya hayamos escrito con antes, esto puede dar problemas de seguridad ya que por ejemplo si escribimos varios email porque el ordenador fue utilizado por diferente usuario podríamos escribiendo ver información que otro usuario ha introducido. En el ejemplo desactivamos el autocompletar en el mail, pero no en los demás campos. También puede desactivarse desde el navegador pero muchos usuarios no saben que existe la opción, ni como desactivar el autocompletado.
2. Atributo Autofocus
Este atributo sirve para indicar en que input de un formulario debe posicionarse el cursor cuando se carga la pagina web, si no esta presente entonces comenzara por el primero que encuentre. Esto también se puede programar con jQuery para ir poniendo el foco en distintos controles según lo necesitemos.
3. Atributo Form
Este atributo es muy útil para gestionar elementos por fuera de un formulario sin importar en que parte de la estructura de la web se encuentre.
4. Atributo FormAction
Este atributo es muy útil para enviar un mismo formulario a paginas distintas, algo que anteriormente había que programar en javascript y enviarle parámetros de todos los elementos del formulario para poder hacer el reenvío, en algunos caso se tornaba muy engorroso sobre todo si había múltiples formularios que dependían uno de otro.
Tomamos el ejemplo del caso anterior con un botón enviamos el formulario a la pagina grabar.php y con el otro a stock.php
5. Atributo List y Datalist
Este atributo permite definir una lista en un elemento <datalist> y luego aplicárselo a un elemento input para que realice una búsqueda a medida que vamos escribiendo.
Vemos que al escribir solo una letra en este caso f, se despliega un listado con las posibilidades encontradas, esto es muy útil ya que realiza un filtro de los datos que contenga el datalist y además puede ser reutilizado en otro controles o elementos.
Muchos programadores siguen trabajando de la forma tradicional ya que es soportada por la mayoría de los navegadores, las ultimas mejoras solo son soportadas por las versiones más nuevas.
HTML5 ofrece un conjunto de nuevos atributos para el atributo type del elemento input, es decir la mayoría de los elementos de un formulario, como las cajas de texto.
Algunos de estos atributos de html conocidos son:
Input type=text - Caja de texto
input type=password – Campo para contraseña que oculta la contraseña con asteriscos.
Input type=submit – Botón para enviar formularios
ATRIBUTO TIPO NUMÉRICO REGÍSTRATE
El elemento que contenga como atributo type number, permite no solo determinar que el valor ingresado sea numérico, sino además restringirlo entre máximos y mínimos, podemos ver en la imagen como además tiene validación sin necesidad de programar nada
El código fuente del ejemplo para utilizar este atributo es el siguiente
<html> <title>Tipo Number</title> <body> <h4>Tipo Number</h4> <form> Nro Pasaje(1-40): <input type="number" name="nropasaje" min="1" max="40"> <br> <input type="submit" value="Enviar"> </form> </body> </html>ATRIBUTO TIPO FECHA (DATE)
El atributo tipo date se utiliza para campos donde es necesario contener una fecha. Según el navegador y el soporte que ofrezcan aparecerá el control calendario para poder seleccionar un fecha.
ATRIBUTO TIPO COLOR
El atributo tipo color se utiliza para campos donde es necesario contener un color. Según el navegador y el soporte que ofrezcan aparecerá el control tipo colorpicker para poder seleccionar un color o bien escribir el color en hexadecimal. El selector aparecerá en forma de pop-up cuando se hace click en el color.
<html>
<body>
<h4>Tipo color</h4>
<form>
Seleccionar un color:
<input type="color" name="color" value="#8FAE70">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
ATRIBUTO TIPO EMAIL
El atributo tipo email se utiliza para campos donde es necesario contener un email. Según el navegador y el soporte que ofrezcan validara que el texto introducido tenga el formato de un email, sino aparecerá un mensaje de error, esto nos facilitara la validación de un formulario sin programar.
<html> <body> <h4>Tipo email</h4> <form> Ingrese Email: <input type="email" name="email" value=""> <br> <input type="submit" value="Enviar"> </form> </body> </html>
ATRIBUTO TIPO URL
El atributo tipo url se utiliza para campos donde es necesario contener un dominio, una url. Según el navegador y el soporte que ofrezcan validara que el texto introducido tenga el formato de un dominio, sino aparecerá un mensaje de error, esto nos facilitara la validación de un formulario sin programar. No es necesario que contenga http, ni www, en ese caso si lo requerimos deberemos validarlo mediente programación.
<html> <body> <h4>Tipo Url</h4> <form> Ingrese Email: <input type="url" name="url" value=""> <br> <input type="submit" value="Enviar"> </form> </body> </html>
ATRIBUTOS Y PROPIEDADES PARA HTML5
1. Atributo Autocomplete
Cuando escribimos en un campo del formulario nos encontramos que generalmente el navegador nos va a dar la opción de autocompletar lo que estemos escribiendo en ese momento con texto que ya hayamos escrito con antes, esto puede dar problemas de seguridad ya que por ejemplo si escribimos varios email porque el ordenador fue utilizado por diferente usuario podríamos escribiendo ver información que otro usuario ha introducido. En el ejemplo desactivamos el autocompletar en el mail, pero no en los demás campos. También puede desactivarse desde el navegador pero muchos usuarios no saben que existe la opción, ni como desactivar el autocompletado.
<html> <body> <h4>Atributo Autocomplete</h4> <form> <form autocomplete="on"> Nombre:<input type="text" name="nombre"> <br> Email: <input type="email" name="email" autocomplete="off"><br> <br> <input type="submit" value="Enviar"> </form> </body> </html>Vemos que al ingresar la palabra Autocompleta y enviar al acceder al mismo formulario luego y presionar solo la letra A, ya sugiere en este caso la palabra que habíamos escrito anteriormente.
2. Atributo Autofocus
Este atributo sirve para indicar en que input de un formulario debe posicionarse el cursor cuando se carga la pagina web, si no esta presente entonces comenzara por el primero que encuentre. Esto también se puede programar con jQuery para ir poniendo el foco en distintos controles según lo necesitemos.
3. Atributo Form
Este atributo es muy útil para gestionar elementos por fuera de un formulario sin importar en que parte de la estructura de la web se encuentre.
<html> <body> <h4>Atributo Form</h4> <form> <form action="grabar.php" id="formA"> Producto:<input type="text" name="producto"> <br> Descripción: <br><textarea rows="4" cols="50"></textarea> <br> <input type="submit" value="Enviar"> </form> <br> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. </p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. </p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. </p> <br> Stock: <input type="text" name="stock" form="formA"> </body> </html>Podemos ver en el código fuente HTML que hemos creado un formulario para introducir los datos de un producto luego algún texto explicativo y finalmente ponemos un campo de texto para el stock fuera del formulario, pero lo relacionamos con este formulario a través de su identificar id=”formA” en el campo de texto stock pondremos que lo relacionamos con le formulario form=”formA”, de esta manera al enviar el formulario se enviaran también todos los elementos que este relacionados.
4. Atributo FormAction
Este atributo es muy útil para enviar un mismo formulario a paginas distintas, algo que anteriormente había que programar en javascript y enviarle parámetros de todos los elementos del formulario para poder hacer el reenvío, en algunos caso se tornaba muy engorroso sobre todo si había múltiples formularios que dependían uno de otro.
Tomamos el ejemplo del caso anterior con un botón enviamos el formulario a la pagina grabar.php y con el otro a stock.php
<html> <body> <h4>Atributo Form</h4> <form> <form action="grabar.php" id="formA"> Producto:<input type="text" name="producto"> <br> Descripcion: <br><textarea rows="4" cols="50"></textarea> <br> <input type="submit" value="Enviar"> </form> <br> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. </p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. </p> <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. </p> <br> Stock: <input type="text" name="stock" form="formA"> <input type="submit" formaction="stock.php" form="formA"> </body> </html> Atributo Image con submit Si queremos utilizar una imagen como botón tipo submit para enviar un formulario, la única forma de hacerlo era poner una imagen o bien utilizar hojas de estilo css y luego hacer la funcionalidad con javascript. <html> <body> <h4>Atributo tipo Image</h4> <form> <form action="grabar.php" id="formA"> Producto:<input type="text" name="producto"> <br> Descripción: <br><textarea rows="4" cols="50"></textarea> <br> <input type="image" src="enviar.png" alt="Submit" width="163" height="78"> </form> </body> </html>
5. Atributo List y Datalist
Este atributo permite definir una lista en un elemento <datalist> y luego aplicárselo a un elemento input para que realice una búsqueda a medida que vamos escribiendo.
<html> <body> <h4>Atributo tipo list y datalist</h4> <form> <form action="grabar.php" id="formA"> <input list="autos" name="vehiculos"> <datalist id="autos"> <option value="Ford"> <option value="Fiat"> <option value="Ferari"> <option value="Honda"> <option value="Toyota"> <option value="Renault"> <option value="Peugeot"> </datalist> </form> </body> </html>
Vemos que al escribir solo una letra en este caso f, se despliega un listado con las posibilidades encontradas, esto es muy útil ya que realiza un filtro de los datos que contenga el datalist y además puede ser reutilizado en otro controles o elementos.
