comunidades

Día #9 Formularios en HTML5. Nuevos elementos y Nuevos atributos.


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í.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Todos los pagos y compras online, todos los "Me gusta", comentarios, mensajes, twits, chats, todas las gestiones que hacemos por internet dejan un rastro que contiene nuestros datos personal ...

This my first post in english. Please try to understand any mystakes :). Today 80% of consumers are concerned about mobile marketing. Thousands of mobile phone users world wide were surveied on their ...

Recomendamos

Relacionado

general desarrollo web html5 ...

En este tutorial o artículo, vamos a ver de pronto no todo acerca los videos en HTML5 pero si lo más relevante e importante de esta nueva etiqueta Video. HTML ha hecho cambios muy grandes en la web, que quizás la gente común no note pero a los que trabajamos en este campo se no se nos hacen grandioso, una de estas mejores es la de poder incluir directamente video y audio en el código, para depende ...

documentos error Autores ...

Cuentas de redes sociales usando un ataque de phishing El phishing es uno de los mejores ataques de ingeniería social que implica la recopilación de información confidencial y confidencial del objetivo, por ejemplo La tarjeta de crédito, la tarjeta de débito, la contraseña bancaria y la contraseña de las redes sociales. En este método, el atacante clona el sitio web oficial específico y lo envía a ...

Código html Código web Programación Web ...

Es muy sencillo hacer un menú de navegación utilizando para ello un campo de formulario despegable y un botón para confirmar la selección. Código para hacer un menú de navegación. Para crear un menú de este tipo se debe utilizar el siguiente código HTML en el lugar concreto donde queramos situarlo dentro de la página: <form> <SELECT NAME=”urldestino”> <option selected&g ...

general propuestas

Los componentes de suscripción por correo electrónico, sirven para que los usuarios que visitan un sitio web, puedan suscribirse a sus actualizaciones recibiéndolas por correo electrónico. Se trata de una herramienta fundamental para cualquier blog o sitio web, pues crea un vínculo directo entre sus visitantes y su autor. Cuando el creador de la página web publica un contenido, éste llega a todos ...

BLOGGER jimdo marketing digital ...

El email marketing está afectado al igual que tu blog por el RGPD, es decir el reglamento general de protección de datos, que durante el 2018 entró en vigor en la Unión Europea. RGPD para cumplimiento legal de tu blog y el email marketing El RGPD está provocando que los datos de los usuarios sean protegidos dentro de la navegación como en formularios para suscripción, descarga u otras acciones en ...

general seo

Todos los sitios web y Blogs precisan de un componente que sirva para buscar información por todo su contenido. Los usuarios normalmente precisan encontrar información dentro de un sitio web. Muchas veces, cuando han encontrado lo que quieren en un determinado lugar, prefieren buscar dentro de él para encontrar más datos dentro de la web que visitan. Gracias al uso de un buscador, los usuarios que ...

general curso html5 ...

Estás interesado en aprender a desarrollar webs móviles en HTML5 CSS3, Javascript, Jquery mobile y Frameworks? Hola, estoy preparando un curso por email y skype de desarrollo de webs moviles con HTML5.Que les parece la idea? Interesados, participarán por 5 cursos totalmente gratuitos. Curso por mail, resolución de dudas por skype (uno a uno) clases semanales. Sorteo día 30/04/2015. Início: 02/05/2 ...

#Linking #NotiGoogle #BlogTopSEO ...

Ayer han sido anunciados por Google dos nuevos nuevos atributos para identificar la naturaleza de los enlaces. Con esto, el viejo nofollow evoluciona y se agregan dos formas específicas rel=ugc y rel=sponsored; la idea es decirle al buscador, de qué van los enlaces que usamos en nuestro contenido ¿Estás listo? ¿Por qué nace el nofollow? Este atributo fue presentado por primera vez en 2005; la mi ...

informática android apps ...

En este artículo veremos que son Layouts y Views para el diseño de la interfaz de usuario (UI) de una aplicación Android. Crearemos una pequeña aplicación paso a paso para comprender como definir nuestros diseños, relacionarlos con el código Java y manejar eventos disparados por el usuario al interactuar con la interfaz. ¿Java o XML? Cuando vimos la estructura de un proyecto en Android, hablamos s ...

informática android apps ...

En este artículo veremos que son Layouts y Views para el diseño de la interfaz de usuario (UI) de una aplicación Android. Crearemos una pequeña aplicación paso a paso para comprender como definir nuestros diseños, relacionarlos con el código Java y manejar eventos disparados por el usuario al interactuar con la interfaz. ¿Java o XML? Cuando vimos la estructura de un proyecto en Android, hablamos s ...