Los nuevos atributos type de la etiqueta input en HTML5

Tipos de Entrada agregadas en HTML5

HTML5 agregó nuevos tipos de entrada:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week 

Nota: Estos nuevos tipos no son soportados por los navegadores web antiguos, las entradas serán mostradas como un <input type="text">.

Entrada tipo Color

La declaración <input type="color"> es usado para campos de entrada que deben contener un color. Dependiendo del soporte del Navegador Web, un selector de color (picker color) puede aparecer en el campo de entrada.

Código:

<form>
  Selecciona tu color favorito:
  <input type="color" name="favorito">
</form>

Muestra: 

Selecciona tu color favorito:

Entrada Tipo Date

La declaración <input type="date"> muestra un campo de entrada que puede contener fechas. Dependiendo del soporte del Navegador Web, un selector de fecha (picker date) puede aparecer en el campo de entrada.

Código:

<form>
  Fecha:
  <input type="date" name="fecha">
</form>

Muestra:

Fecha:

Es posible delimitar las fechas para el campo de entrada tipo date.

<form>
  Introduce una fecha anterior a 2018-01-01:<br>
  <input type="date" name="fecha1" max="2018-01-01"><br>
  Introduce una fecha posterior a 2019-01-01:<br>
  <input type="date" name="fecha2" min="2019-01-02">
</form>

Muestra:

Introduce una fecha anterior a 2018-01-01:

Introduce una fecha posterior a 2019-01-01:

Entrada tipo Datetime-local

La declaración <input type="datetime-local"> muestra una entrada de fecha y hora, sin zona horaria. Dependiendo del soporte del Navegador Web, un selector de fecha y hora (date and time picker) puede aparecer en el campo de entrada.

Código:

<form>
  Fecha de Cumpleaños:<br>
  <input type="datetime-local" name="cumpleanios">
</form>

Muestra:

Fecha de Cumpleaños:

Entrada tipo Email

La declaración <input type="email"> muestra un campo de entrada similar a un campo de texto pero es específico para direcciones de email. Dependiendo del soporte del Navegador Web, la dirección de email puede ser automáticamente validada cuando se envíe.

Código:

<form>
  email:<br>
  <input type="email" name="email">
</form>

Entrada tipo Month

La declaración <input type="month"> muestra un campo de entrada que permite seleccionar un mes y año. Dependiendo del soporte del Navegador, un selector de fecha (date picker) puede mostrarse en el campo de entrada.

Código:

<form>
  Reunión:<br>
  <input type="month" name="reunion"
</form>

Muestra:

Reunión:

Entrada tipo Number

La declaración <input type="number"> muestra un campo de entrada numérico. Se puede especificar un rango para restringir la selección.

Código:

<form>
  Calificación (de 1 a 5):<br>
  <input type="number" name="calificacion" min="1" max="5">
</form>

Muestra:

Calificación (de 1 a 5):

Restricciones de campos de entrada

Esta es una lista de algunas restricciones para los campos de entrada más comunes:

atributo descripción
disabled Espesifica que un campo de entrada debe estar deshabilitado.
max Especifica el valor maximo para una campo de entrada.
maxlengh Especifica el número maximo de caracteres para un campo de entrada.
min Especifica el valor mínimo para un campo de entrada.
pattern Especifica una expresión regular para verificar el valor del campo de entrada
readonly Especifica que el campo de entrada es de solo lectura (no cambia).
required Especifica que un valor debe contener el campo de entrada.
size Especifica el ancho en caracteres de un campo de entrada. 
step Especifica el intervalo numérico de un campo de entrada.
value Especifica el valor por defecto para un campo de entrada.

El siguiente ejemplo despliega un campo de entrada númerico, en donde es posible entrar valores del 0 al 100 en intervalos de 10. El valor por defecto es 30.

Código:

<form>
  Calificación:
  <input type="number" name="puntos" min="0" max="100" step="10" value="30">
</form>

Muestra:

Calificación:

Entrada tipo Range

La declaración <input type="range"> define un control deslizante para ingresar un número. El Rango predeterminado es de 0 de 100. Sin embargo, puede establecer restricciones sobre que números se aceptan con los atributos min, max, y step.

Código:

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

Muestra:

Entrada tipo Search

La declaración <input type="search"> muestra un campo de entrada para busqueda similar al tipo text.

Código:

<form>
  Buscar:<br>
  <input type="search" name="buscar">
</form>

Muestra:

Buscar:

Entrada tipo Tel

La declaración <input type="tel"> muestra un campo de entrada que puede contener un número telefonico.

Código:

<form>
  Teléfono:<br>
  <input type="tel" name="telefono">
</form>

Muestra:

Teléfono:

Entrada tipo Time

La declaración <input type="time">  muesta un campo de entrada que permite al usuario especificar un horario. Dependiendo del soporte del Navegador Web, puede mostrar un selector de horario (time picker).

Código:

<form>
  Horario:<br>
  <input type="time" name="horario">
</form>

Muestra:

Horario:

Entrada tipo URL

La declaración <input type="url"> muestra un campo de entrada que puede contener direcciones URL. Dependiendo del soporte del Navegador Web, puede validar automaticamente una URL antes de enviar el formulario.

Código:

<form>
  Agrega tu página web:<br>
  <input type="url" name="paginaweb">
</form>

Entrada tipo Week

La declaración <input type="week"> muestra un campo de entrada que puede contener una semana del año. Dependiendo del soporte del Navegador Web, puede mostrar un seleccionador de semanas (week picker).

Código:

<form>
  Selecciona una semana:<br>
  <input type="week" name="semana">
</form>

Muestra:

Selecciona una semana: