HTML Tipos de entrada
Este capítulo describe los diferentes tipos del elemento HTML <input>.
Tipos de entrada HTML
Estos son los diferentes tipos de entrada 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="text"><input type="time"><input type="url"><input type="week">
Consejo: El valor predeterminado del atributo type es "text".
Texto de tipo de entrada
<input type="text"> define un campo de entrada de texto de una sola línea:
Ejemplo
<form>
<label for="fname">Nombre de pila:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Apellido:</label><br>
<input type="text" id="lname" name="lname">
</form>
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
<form>
<label for="username">Nombre de usuario:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Contraseña:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Nombre de usuario:Contraseña:
Los caracteres de 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 enviar datos de formulario a un controlador de formulario.
El controlador de formulario suele ser una página de servidor con un script para procesar datos de entrada.
El controlador de formulario se especifica en el atributo action del formulario:
Ejemplo
<form action="/action_page.html">
<label for="fname">Nombre de pila:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Apellido:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
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 enviado, el botón obtendrá un texto predeterminado:
Ejemplo
<form action="/action_page.html">
<label for="fname">Nombre de pila:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Apellido:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
Inténtalo tú mismo »
Restablecer tipo de entrada
<input type="reset"> define un botón de reinicio que restablecerá todos los valores del formulario a sus valores predeterminados:
Ejemplo
<form action="/action_page.html">
<label for="fname">Nombre de pila:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Apellido:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
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 botón de opción.
Los botones de opción permiten al usuario seleccionar SÓLO UNA de un número limitado de opciones:
Ejemplo
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Casilla de verificación de tipo de entrada
<input type="checkbox"> define una casilla de verificación.
Las casillas de verificación permiten al usuario seleccionar CERO o MÁS opciones de un número limitado de opciones.
Ejemplo
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
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
<input type="button" onclick="alert('Glory to Ukraine!!')" value="Click Me!">
Inténtalo tú mismo »
Así es como se mostrará el código HTML anterior en un navegador:
Tipo de entrada Color
El <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
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Inténtalo tú mismo »
Tipo de entrada Fecha
El <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
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Inténtalo tú mismo »
También puede utilizar los atributos min y max para agregar restricciones a las fechas:
Ejemplo
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
Inténtalo tú mismo »
Tipo de entrada Fecha y hora local
El <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
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Inténtalo tú mismo »
Tipo de entrada Correo electrónico
El <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 añaden ".com" al teclado para que coincida con la entrada del correo electrónico.
Ejemplo
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Inténtalo tú mismo »
Archivo de tipo de entrada
El <input type="file"> define un campo de selección de archivos y un botón "Examinar" para cargar archivos.
Ejemplo
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Inténtalo tú mismo »
Tipo de entrada oculto
El <input type="hidden"> define un campo de entrada oculto (no visible para el 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 función "Ver código fuente". ¡No utilice entradas ocultas como forma de seguridad!
Ejemplo
<form>
<label for="fname">Nombre de pila:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
Inténtalo tú mismo »
Tipo de entrada Mes
El <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
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Inténtalo tú mismo »
Número de tipo de entrada
El <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 puede ingresar un valor del 1 al 5:
Ejemplo
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
Inténtalo tú mismo »
Restricciones de entrada
Aquí hay una lista de algunas restricciones de entrada comunes:
| Atributo | Descripción |
|---|---|
| checked | Especifique que un campo de entrada debe preseleccionarse cuando se carga la página (por type="checkbox" o type="radio") |
| disabled | Especificar que un campo de entrada debe estar deshabilitado |
| max | Especificar el valor máximo para un campo de entrada |
| maxlength | Especificar la cantidad máxima de caracteres para un campo de entrada |
| min | Especificar el valor mínimo para un campo de entrada |
| pattern | Especifique una expresión regular para comparar el valor de entrada |
| readonly | Especifique que un campo de entrada sea de solo lectura (no se puede cambiar) |
| required | Especifique que un campo de entrada es obligatorio (debe completarse) |
| size | Especificar el ancho (en caracteres) de un campo de entrada |
| step | Especificar los intervalos numéricos legales para un campo de entrada |
| value | Especificar 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
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
Inténtalo tú mismo »
Rango de tipo de entrada
El <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 qué números se aceptan con los valores min, max y atributos step:
Ejemplo
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Inténtalo tú mismo »
Búsqueda de tipo de entrada
El <input type="search"> se utiliza para campos de búsqueda (un campo de búsqueda se comporta como un campo de texto normal).
Ejemplo
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Inténtalo tú mismo »
Tipo de entrada Tel
El <input type="tel"> se utiliza para campos de entrada que deben contener un número de teléfono.
Ejemplo
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Inténtalo tú mismo »
Input Type Time
El <input type="time"> permite al usuario seleccionar una hora (sin zona horaria).
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de hora en el campo de entrada.
Ejemplo
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Inténtalo tú mismo »
Tipo de entrada URL
El <input type="url"> se utiliza para campos de entrada que deben contener una dirección URL.
Dependiendo de la compatibilidad del navegador, el campo 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 la URL.
Ejemplo
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Inténtalo tú mismo »
Tipo de entrada Semana
El <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
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
Inténtalo tú mismo »
HTML Ejercicios
HTML Atributo de tipo de entrada
| Etiqueta | Descripción |
|---|---|
| <input type=""> | Especifique el tipo de entrada para mostrar |
