MODULO 4. Lección 12: HTML: NUEVAS FUNCIONALIDADES EN FORMULARIOS (PARTE1)

Una de las características más importantes de HTML5 son los nuevos elementos disponibles para el manejo de formularios, ya que nos permite gestionarlos de manera nativa, prescindiendo de Javascript para realizar algunas validaciones de formulario del lado del cliente.

Disponer de controles avanzados nativos, facilita mucho el trabajo del desarrollador al no tener que preocuparse por problemas de compatibilidad entre distintos navegadores y supone un ahorro de tiempo y de ancho de banda, ya que por un lado permite no enviar el formulario si no es valido, y por otro lado informa al usuario de si alguno si alguno de los valores introducidos no cumple los requisitos definidos.

Son más intuitivos. Se pueden mostrar pistas de lo que se quiere introducir en los campos de entrada, una calendario para un campo de fecha o una paleta de colores.

Nuevos estados del atributo type del elemento input:

• url, tel, email, number, color, search, range, datetime, datetime-local, date, month, week, time
• vista de los tipos de input en los dispositivos móviles
• nuevos atributos de contenido: autocomplete, autofocus, min, max, step, pattern, placeholder, required
• Modernizr y Polyfills

URL: Se usa en los campos que deban contener una dirección web.
<input type ="url"name="url">

tel: Se usa para definir campos en los que se deba introducir un número de teléfono.
<input type ="tel"name="telf"/>
 No impone una sintaxis o patrón determinado y para validarlo como un formato númerico en particular, se debe complementar con pattern
<input type ="tel"name="telf" pattern=(+[09]{2}[0-9]{9}"/>

email: Se usa para definir campos en los que se tenga que introducir una dirección de correo electrónico valida.
<input type ="email"name="email"/>

number: Se usa para definir campos en los que se tenga que introducir un valor numérico. Este campo, puede contener atributos que permitan realizar restricciones sobre el número (por ejemplo definiendo un valor mínimo o máximo, mediante los atributos min y max) o asignarle un valor especifico por defecto  mediante el atributo value.

<input type ="number"name="cantidad" min="1" max="5" value="2"/>

color: Se usa para definir campos dónde el usuario puede seleccionar un color desde una paleta de colores.

<input type ="color"name="favcolor" value "#123456"/>

En el ejemplo, hemos asignado un color azul marino de base mediante un valor hexadecimal. Si no introducimos ningún valor, por defecto se le asigna el color negro.

search: Se usa para definir campos de búsqueda en formato de texto, adquiriendo un aspecto gráfico más adecuado a su función.

<input type ="search"name="buscador"/>

range: Se usa para definir campos que deban contener un valor numérico que este dentro de un rango especifico. Rango que definimos mediante los atributos min y max. También podemos utilizar el atributo value, para darle un valor por defecto, o el atributo step, para definir los intervalos en los que puede variar el valor.

<input type ="range"name="puntos" min="1" max="10"/>

datetime: Permite al usuario seleccionar la hora completa, además del día, mes, año y zona horaria.

<input type ="datetime"name="fechahora"/>

datetime-local: Permite al usuario seleccionar la hora completa, además del día, mes, año, pero en este caso no se incluye la zona horaria.

<input type ="datetime-local"fechahora_usuario="buscador"/>

date: Permite al usuario seleccionar una fecha completa, formada por día, mes y año

<input type ="date"name="fecha"/>

month:Permite al usuario seleccionar una fecha completa, formada por un mes y un año especifico.

<input type ="month"name="mes"/>

week: Permite al usuario seleccionar una semana y un año especificos

<input type ="week"name="semana"/>

time: Permite al usuario seleccionar una hora en formato de horas y minutos
<input type ="week"name="semana"/>


En dispositivos móviles cuando dentro de un formulario, el foco se sitúa en un campo de tipo tel, las pantallas táctiles cambian su formato por defecto y se optimizan para introducir un número de teléfono mostrando un formato numérico.

Cuando el foco se sitúa en un campo de tipo email, las pantallas táctiles se optimizan para la introducción de un campo de texto. En el caso de Iphone saldrá también la @

Cuando el foco se sitúa en un campo de tipo URL, las pantallas táctiles se optimizan para la introducción de un campo de texto. En el caso de Iphone, salen también los simbolos / y .com