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
- 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:
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:
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:
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:
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:
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:
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:
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:
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:
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: