Hoy todos los sitio Web que circulan en Internet deberían contener una de las funcionalidades mas importantes, que es la de tener un formulario de contacto, el cual permite la comunicación entre los usuarios y las empresa. HTML5 además nos permite al momento de crear un formulario optimizarlo para ser usado también en SmartPhone o iPhone.
La optimización hoy pasa una serie de tags que nos permiten una correcta funcionalidad dentro de los teléfonos inteligentes, realizaremos un recorrido por algunas novedades explicando por qué el uso de cada una de ellas
Placerholder
Usado en muchos formularios, cuando un campo no tiene valor, si se focaliza este campo se elimina el placerholder, si abandonamos el campo sin añadir un valor se añade el del placerholder
Por lo generar se muestra en un tono claro no siendo este un valor valido para el formulario.
<label form="referencia">Nombre Usuario</label>
<input id="referencia" name="nombre" type="text" placerholder="Ingresa tu nombre" />
Tips: Puede crear un archivo Html simple he ir copiando y pegando las etiquetas para que las puedas probar y ver su funcionamiento.
Autofocus
Uno de los ejemplos más emblemáticos es el Google, el foco siempre lo acapara el input de la búsqueda, antes siempre se programó en Javascript hoy en HTML5 se debe agregar al input.
<label form="referencia">Nombre Usuario</label>
<input id="referencia" name="nombre" type="text" placerholder="Ingresa tu nombre" autofocus />
Autocomplete
Con el tiempo los navegadores han implementado nuevas funcionalidades y mejoras, una de ellas es la de guardar datos al momento completar algun tipo de formulario, con la nueva especificación en HTML5 podemos desactivar esta opción agregando valores "on - off", según requerimiento
<form action="" autocomplete="off">
.....
</form>
Si este código va dentro de la etiqueta form desactiva todo el formulario, pero si solo queremos desactivar un input queda de la siguiente forma
<label form="referencia">Nombre Usuario</label>
<input id="referencia" name="nombre" type="text" placerholder="Ingresa tu nombre" autocomplete="off" autofocus />
Requiered
Este es uno de los más usados al momento de validar formulario, antes se debia extender desde un Javascript, hoy solo va dentro del tag input, validando el campo como requerido, el mensaje que se muestra es según la versión del navegador, caso contrario hay una solución invocando Javascript.
<label form="referencia">Nombre Usuario</label>
<input id="referencia" name="nombre" type="text" placerholder="Ingresa tu nombre" autocomplete="off" required />
La alternativa para usar con Javascript seria
if(!Supports('input', 'requiered' )){
//Codigo para emular la funcionalidad
}
Tips: Es un gran error de seguridad validar un formulario únicamente de cara al usuario, también es imprescindible validar en líneas generales desde el Backend
Detalles de un contacto
La nueva especificación añade tres nuevos tipos de valores para los detalles de contacto específicamente: correo electrónico, sitios web y números de teléfono:
<label for="correo">Correo electrónico</label>
<input id="correo" name="correo" type="email" />
<label for="website">Sitio web</label>
<input id="website" name="website" type="url" />
<label for="telefono">Número de teléfono</label>
<input id="telefono" name="telefono" type="tel" />
Nuestros navegadores los mostrarán como campos de texto normal, pero si lo revisamos en un SmartPhone veremos que se aplica de la siguiente forma.
La optimización hoy pasa una serie de tags que nos permiten una correcta funcionalidad dentro de los teléfonos inteligentes, realizaremos un recorrido por algunas novedades explicando por qué el uso de cada una de ellas
Placerholder
Usado en muchos formularios, cuando un campo no tiene valor, si se focaliza este campo se elimina el placerholder, si abandonamos el campo sin añadir un valor se añade el del placerholder
Por lo generar se muestra en un tono claro no siendo este un valor valido para el formulario.
<label form="referencia">Nombre Usuario</label>
<input id="referencia" name="nombre" type="text" placerholder="Ingresa tu nombre" />
Tips: Puede crear un archivo Html simple he ir copiando y pegando las etiquetas para que las puedas probar y ver su funcionamiento.
Autofocus
Uno de los ejemplos más emblemáticos es el Google, el foco siempre lo acapara el input de la búsqueda, antes siempre se programó en Javascript hoy en HTML5 se debe agregar al input.
<label form="referencia">Nombre Usuario</label>
<input id="referencia" name="nombre" type="text" placerholder="Ingresa tu nombre" autofocus />
Autocomplete
Con el tiempo los navegadores han implementado nuevas funcionalidades y mejoras, una de ellas es la de guardar datos al momento completar algun tipo de formulario, con la nueva especificación en HTML5 podemos desactivar esta opción agregando valores "on - off", según requerimiento
<form action="" autocomplete="off">
.....
</form>
Si este código va dentro de la etiqueta form desactiva todo el formulario, pero si solo queremos desactivar un input queda de la siguiente forma
<label form="referencia">Nombre Usuario</label>
<input id="referencia" name="nombre" type="text" placerholder="Ingresa tu nombre" autocomplete="off" autofocus />
Requiered
Este es uno de los más usados al momento de validar formulario, antes se debia extender desde un Javascript, hoy solo va dentro del tag input, validando el campo como requerido, el mensaje que se muestra es según la versión del navegador, caso contrario hay una solución invocando Javascript.
<label form="referencia">Nombre Usuario</label>
<input id="referencia" name="nombre" type="text" placerholder="Ingresa tu nombre" autocomplete="off" required />
La alternativa para usar con Javascript seria
if(!Supports('input', 'requiered' )){
//Codigo para emular la funcionalidad
}
Tips: Es un gran error de seguridad validar un formulario únicamente de cara al usuario, también es imprescindible validar en líneas generales desde el Backend
Detalles de un contacto
La nueva especificación añade tres nuevos tipos de valores para los detalles de contacto específicamente: correo electrónico, sitios web y números de teléfono:
<label for="correo">Correo electrónico</label>
<input id="correo" name="correo" type="email" />
<label for="website">Sitio web</label>
<input id="website" name="website" type="url" />
<label for="telefono">Número de teléfono</label>
<input id="telefono" name="telefono" type="tel" />
Nuestros navegadores los mostrarán como campos de texto normal, pero si lo revisamos en un SmartPhone veremos que se aplica de la siguiente forma.
