Nuevos tipos de Input en HTML5
HTML5 tiene varios tipos nuevos de entrada de formulario. Estas nuevas características proporcionan un mejor control y validación de entrada.
Este capítulo introduce exhaustivamente estos nuevos tipos de entrada:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Nota:No todos los navegadores principales admiten los nuevos tipos de input, pero ya puede utilizarlos en todos los navegadores principales. Incluso si no se admiten, aún se pueden mostrar como campos de texto normales.
Tipo de Input: color
El tipo color se utiliza en campos de entrada principalmente para seleccionar colores, como se muestra a continuación:
Ejemplo
Seleccione un color del selector de color:
Pruébalo »
Tipo de Input: date
El tipo date te permite seleccionar una fecha a partir de un selector de fecha.
Tipo de Input: datetime
El tipo datetime te permite seleccionar una fecha (hora UTC).
Ejemplo
Defina un control de fecha y hora (hora local):
Pruébalo »
Tipo de Input: datetime-local
El tipo datetime-local te permite seleccionar una fecha y hora (sin zona horaria).
Ejemplo
Defina una fecha y hora (sin zona horaria):
Pruébalo »
Tipo de Input: email
El tipo email se utiliza para campos de entrada que deban contener una dirección de correo electrónico.
Ejemplo
Al enviar el formulario, se valida automáticamente si el valor del campo email es legal y válido:
Pruébalo »
Consejo:El navegador Safari en iPhone admite el tipo de entrada email, y modifica el teclado de pantalla táctil para adaptarse a él (añadiendo las opciones @ y .com).
Tipo de Input: month
El tipo month te permite seleccionar un mes.
Ejemplo
Defina mes y año (sin zona horaria):
Pruébalo »
Tipo de Input: number
El tipo number se utiliza para campos de entrada que deban contener valores numéricos.
También puede establecer restricciones sobre los números aceptados:
Ejemplo
Defina un campo de entrada numérico (con restricciones):
Pruébalo »
Utilice los siguientes atributos para especificar restricciones sobre los tipos numéricos:
| Atributo | Descripción |
|---|---|
| disabled | Especifica que el campo de entrada está deshabilitado |
| max | Especifica el valor máximo permitido |
| maxlength | Especifica la longitud máxima de caracteres del campo de entrada |
| min | Especifica el valor mínimo permitido |
| pattern | Especifica el patrón para validar el campo de entrada |
| readonly | Especifica que el valor del campo de entrada no se puede modificar |
| required | Especifica que el valor del campo de entrada es obligatorio |
| size | Especifica el número de caracteres visibles en el campo de entrada |
| step | Especifica el intervalo numérico legal del campo de entrada |
| value | Especifica el valor predeterminado del campo de entrada |
Pruébalo con un ejemplo que incluye todos los atributos de restricciónPruébalo
Tipo de Input: range
El tipo range se utiliza para campos de entrada que deban contener valores numéricos dentro de un cierto rango.
El tipo range se muestra como una barra deslizante.
Ejemplo
Defina un valor numérico que no requiere mucha precisión (similar a un control de deslizador):
Pruébalo »
Utilice los siguientes atributos para especificar restricciones sobre los tipos numéricos:
- max - Especifica el valor máximo permitido
- min - Especifica el valor mínimo permitido
- step - Especifica el intervalo numérico legal
- value - Especifica el valor predeterminado
Tipo de Input: search
El tipo search se utiliza para campos de búsqueda, como la búsqueda en el sitio o la búsqueda de Google.
Ejemplo
Defina un campo de búsqueda (similar a la búsqueda del sitio o la búsqueda de Google):
Pruébalo »
Tipo de Input: tel
Ejemplo
Defina un campo de entrada de número de teléfono:
Pruébalo »
Tipo de Input: time
El tipo time te permite seleccionar una hora.
Ejemplo
Defina un control de tiempo (sin zona horaria):
Pruébalo »
Tipo de Input: url
El tipo url se utiliza para campos de entrada que deban contener una dirección URL.
Al enviar el formulario, se valida automáticamente el valor del campo url.
Ejemplo
Defina un campo de entrada de URL:
Pruébalo »
Consejo:El navegador Safari en iPhone admite el tipo de entrada url, y modifica el teclado de pantalla táctil para adaptarse a él (añadiendo la opción .com).
Tipo de Input: week
El tipo week te permite seleccionar semana y año.
Ejemplo
Defina semana y año (sin zona horaria):
Pruébalo »
Etiqueta <input> de HTML5
| Etiqueta | Descripción |
|---|---|
| <input> | Describe el control de entrada input. |