Este capítulo describe los diferentes tipos de HTML <input> elemento.
Tipos de entrada HTML
Estos son los diferentes tipos de entrada que puede usar en HTML:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Propina: El valor predeterminado de la type el atributo es «texto».
Tipo de entrada de texto
<input type="text"> define un
campo de entrada de texto de una sola línea:
Ejemplo
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Nombre de pila:
Apellido:
Tipo de entrada Contraseña
<input type="password"> define un campo de contraseña:
Ejemplo
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Nombre de usuario:
Contraseña:
Los caracteres en un campo de contraseña están enmascarados (se muestran como asteriscos o círculos).
Tipo de entrada Enviar
<input type="submit"> define un botón para
sumisión formar datos a un manejador de formularios.
El gestor de formularios suele ser una página de servidor con un script para procesar datos de entrada.
El controlador de formulario se especifica en el formulario action
atributo:
Ejemplo
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Si omite el atributo de valor del botón enviar, el botón obtendrá un texto predeterminado:
Ejemplo
Inténtalo tú mismo »
Reinicio del tipo de entrada
<input type="reset"> define un Botón de reinicio
que restablecerá todos los valores del formulario a sus valores predeterminados:
Ejemplo
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Si cambia los valores de entrada y luego hace clic en el botón «Restablecer», los datos del formulario se restablecerán a los valores predeterminados.
Tipo de entrada Radio
<input type="radio"> define un boton de radio.
Los botones de opción permiten al usuario seleccionar SÓLO UNA de un número limitado de opciones:
Ejemplo
Elija su idioma web favorito:
HTML
JavaScript
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Casilla de verificación del tipo de entrada
<input type="checkbox"> define un caja.
Las casillas de verificación permiten al usuario seleccionar CERO o MÁS opciones de un número limitado de opciones.
Ejemplo
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Botón de tipo de entrada
<input type="button"> define un botón:
Ejemplo
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Tipo de entrada Color
los <input type="color"> se utiliza para campos de entrada que deben contener un color.
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de color en el campo de entrada.
Ejemplo
Inténtalo tú mismo »
Tipo de entrada Fecha
los <input type="date"> se utiliza para campos de entrada que deben contener una fecha.
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de fecha en el campo de entrada.
Ejemplo
Inténtalo tú mismo »
También puede utilizar el min y max atributos para agregar restricciones a las fechas:
Ejemplo
Inténtalo tú mismo »
Tipo de entrada Fecha y hora local
los <input type="datetime-local"> especifica un campo de entrada de fecha y hora, sin zona horaria.
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de fecha en el campo de entrada.
Ejemplo
Inténtalo tú mismo »
Tipo de entrada Correo electrónico
los <input type="email"> se utiliza para campos de entrada que deben contener una dirección de correo electrónico.
Dependiendo de la compatibilidad del navegador, la dirección de correo electrónico se puede validar automáticamente cuando se envía.
Algunos teléfonos inteligentes reconocen el tipo de correo electrónico y agregan «.com» al teclado para que coincida con la entrada del correo electrónico.
Ejemplo
Inténtalo tú mismo »
Archivo de tipo de entrada
los <input type="file">
define un campo de selección de archivos y un botón «Examinar» para cargar archivos.
Ejemplo
Inténtalo tú mismo »
Tipo de entrada oculto
los <input type="hidden">
define un campo de entrada oculto (no visible para un usuario).
Un campo oculto permite a los desarrolladores web incluir datos que los usuarios no pueden ver ni modificar cuando se envía un formulario.
Un campo oculto a menudo almacena qué registro de la base de datos debe actualizarse cuando se envía el formulario.
Nota: Si bien el valor no se muestra al usuario en el contenido de la página, es visible (y se puede editar) utilizando las herramientas de desarrollo de cualquier navegador o la funcionalidad «Ver código fuente». ¡No utilice entradas ocultas como forma de seguridad!
Ejemplo
Inténtalo tú mismo »
Tipo de entrada Mes
los <input type="month"> permite al usuario seleccionar un mes y un año.
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de fecha en el campo de entrada.
Ejemplo
Inténtalo tú mismo »
Número de tipo de entrada
los <input type="number"> define un
numérico campo de entrada.
También puede establecer restricciones sobre los números que se aceptan.
El siguiente ejemplo muestra un campo de entrada numérico, donde puede introducir un valor de 1 a 5:
Ejemplo
Inténtalo tú mismo »
Restricciones de entrada
A continuación, se muestra una lista de algunas restricciones de entrada comunes:
| Atributo | Descripción |
|---|---|
| comprobado | Especifica que se debe preseleccionar un campo de entrada cuando se carga la página (para type = «checkbox» o type = «radio») |
| discapacitado | Especifica que un campo de entrada debe estar deshabilitado. |
| max | Especifica el valor máximo para un campo de entrada. |
| longitud máxima | Especifica el número máximo de caracteres para un campo de entrada. |
| min | Especifica el valor mínimo para un campo de entrada. |
| patrón | Especifica una expresión regular para comparar el valor de entrada |
| solo lectura | Especifica que un campo de entrada es de solo lectura (no se puede cambiar) |
| requerido | Especifica que se requiere un campo de entrada (debe completarse) |
| Talla | Especifica el ancho (en caracteres) de un campo de entrada. |
| paso | Especifica los intervalos de números legales para un campo de entrada |
| valor | Especifica el valor predeterminado para un campo de entrada. |
Aprenderá más sobre las restricciones de entrada en el próximo capítulo.
El siguiente ejemplo muestra un campo de entrada numérico, donde puede ingresar un valor de 0 a 100, en pasos de 10. El valor predeterminado es 30:
Ejemplo
Inténtalo tú mismo »
Rango de tipo de entrada
los <input type="range"> define un control para ingresar un número cuyo valor exacto no es importante (como un control deslizante). El rango predeterminado es de 0 a 100. Sin embargo, puede establecer restricciones sobre los números que se aceptan con el min, max, y step atributos:
Ejemplo
Inténtalo tú mismo »
Búsqueda de tipo de entrada
los <input type="search"> se utiliza para los campos de búsqueda (un campo de búsqueda se comporta como un campo de texto normal).
Ejemplo
Inténtalo tú mismo »
Tipo de entrada Tel
los <input type="tel"> se utiliza para campos de entrada que deben contener un número de teléfono.
Ejemplo
Inténtalo tú mismo »
Tipo de entrada Hora
los <input type="time"> permite al usuario seleccionar una hora (sin zona horaria).
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de tiempo en el campo de entrada.
Ejemplo
Inténtalo tú mismo »
Tipo de entrada URL
los <input type="url"> se utiliza para campos de entrada que deben contener una dirección URL.
Dependiendo de la compatibilidad del navegador, el campo de la URL se puede validar automáticamente cuando se envía.
Algunos teléfonos inteligentes reconocen el tipo de URL y agregan «.com» al teclado para que coincida con la entrada de URL.
Ejemplo