Table of contents
- Tipos de <input>
- Tipo de entrada text
- Tipo de entrada password
- Tipo de entrada submit
- Tipo de entrada reset
- Tipo de entrada radio
- Tipo de entrada checkbox
- Tipo de entrada button
- Tipo de entrada color
- Tipo de entrada date
- Tipo de entrada datetime-local
- Tipo de entrada email
- Tipo de entrada image
- Tipo de entrada file
- Tipo de entrada hidden
- Tipo de entrada month
- Tipo de entrada number
- Restricciones <input>
- Tipo de entrada range
- Tipo de entrada search
- Tipo de entrada tel
- Tipo de entrada time
- Tipo de entrada url
- Tipo de entrada week
- Resumen
Este capítulo describe los diferentes tipos de entrada para el elemento HTML .
Tipos de <input>
Estos son los diferentes tipos de <input> que puedes 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="time"><input type="text"><input type="url"><input type="week">
Tip: el valor por defecto del atributo
typees "text".
Tipo de entrada text
El elemento <input> de tipo text define un campo de entrada de texto de una sola línea:
Ejemplo:
<!-- Elemento input -->
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br><br>
<label for="apellido">Apellido</label>
<input type="text" id="apellido" name="apellido">
</form>
Tipo de entrada password
El elemento <input> de tipo password define un campo de contraseña:
Ejemplo:
Los caracteres en un campo de tipo
passwordestán enmascarados (se muestran como asteriscos o círculos).
Tipo de entrada submit
El elemento <input> de tipo submit define un botón para enviar datos del formulario a un controlador de formularios.
El controlador del formulario suele ser una página en el servidor con un script para procesar los datos de entrada.
El controlador del formulario se especifica en el atributo action del formulario:
Ejemplo:
<!-- Elemento input de tipo submit -->
<form action="/action_page.php">
<label for="usuario">Usuario:</label>
<input type="text" id="usuario" name="usuario"><br>
<label for="pwd">Contraseña:</label>
<input type="password" id="pwd" name="pwd"><br><br>
<input type="submit" value="Enviar">
</form>
Tipo de entrada reset
El elemento <input type="reset"> define un botón de reinicio que restablecerá todos los valores del formulario a sus valores predeterminados:
Ejemplo:
Tipo de entrada radio
El elemento <input type="radio"> define un botón de radio.
Los botones de radio le permiten al usuario seleccionar UNA SOLA de un número limitado de opciones:
Ejemplo:
Tipo de entrada checkbox
El elemento <input type="checkbox> define una casilla de verificación.
Las casillas de verificación permiten al usuario seleccionar UNO o MÁS de un número limitado de opciones.
Ejemplo:
Tipo de entrada button
El elemento <input type="button"> define un botón.
Ejemplo:
Tipo de entrada color
El elemento <input type="color"> se usa 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:
Tipo de entrada date
El elemento <input type="date"> se usa 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:
También puedes usar los atributos min y max para agregar restricciones a las fechas:
Ejemplo:
<form>
<label for="datemax">Ingresa una fecha antes de 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Ingresa una fecha despues de 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
Tipo de entrada datetime-local
El elemento <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:
Tipo de entrada email
El elemento <input type="email"> se usa 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:
Tipo de entrada image
El elemento <input type="image"> define una imagen como un botón de envío.
La ruta a la imagen se especifica en el atributo src.
Ejemplo:
Tipo de entrada file
El elemento <input type="file"> define un campo de selección de archivos y un botón "examinar" para cargar archivos.
Ejemplo:
Tipo de entrada hidden
El elemento <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 con la función "Ver código fuente".
Ejemplo:
Tipo de entrada month
El elemento <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:
Tipo de entrada number
El elemento <input type="number"> define un campo de entrada numérico.
También puedes establecer restricciones sobre qué números se aceptan.
El siguiente ejemplo muestra un campo de entrada numérico, donde puedes ingresar un valor del 1 al 5:
Ejemplo:
Restricciones <input>
Aquí hay una lista de algunas restricciones <input> más comunes:
| Atributo | Descripción |
checked | Especifica que se debe preseleccionar un campo de entrada cuando carga la página (para type="checkbox" o type="radio") |
disabled | Especifica que un campo de entrada debe estar deshabilitado |
max | Especifica el valor máximo para un campo de entrada |
maxlength | Especifica el número máximo 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 comparar el valor de entrada |
readonly | Especifica que un campo de entrada es de solo lectura (no se puede cambiar) |
required | Especifica que es obligatorio un campo de entrada (debe completarse) |
size | Especifica el ancho (en caracteres) de un campo de entrada |
step | Especifica los intervalos de números legales para un campo de entrada |
value | Especifica el valor predeterminado para un campo de entrada |
Aprenderás más sobre las restricciones de entrada en el próximo artículo.
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:
Tipo de entrada range
El elemento <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, puedes establecer restricciones sobre qué números se aceptan con los atributos min, max y step.
Ejemplo:
Tipo de entrada search
El elemento <input type="search"> se usa para campos de búsqueda (un campo de búsqueda se comporta como un campo de texto regular).
Ejemplo:
Tipo de entrada tel
El elemento <input type="tel"> se utiliza para campos de entrada que deben contener un número de teléfono.
Ejemplo:
Tipo de entrada time
El elemento <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:
Tipo de entrada url
El elemento <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 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:
Tipo de entrada week
El elemento <input type="week"> permite al usuario seleccionar una semana y un año.
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de fecha en el campo de entrada.
Ejemplo:
Resumen
El atributo type del elemento <input> especifica el tipo de entrada que se va a mostrar. Existen muchos elementos <input> que puedes usar.
El valor por defecto del elemento <input> es text.
Traducido con 💚 desde W3Schools.com