Tipos de entrada HTML
En este capítulo se describen los diferentes tipos de <input>elementos HTML.
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">
Sugerencia: el valor predeterminado del typeatributo es "texto".
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">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
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">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
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
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 los datos de entrada.
El controlador de formulario se especifica en el action
atributo del formulario:
Ejemplo
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
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
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
Restablecimiento 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
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
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.
Radio de tipo de entrada
<input type="radio">define un botón de opción .
Los botones de opción le permiten al usuario seleccionar SOLO 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>
Así es como se mostrará el código HTML anterior en un navegador:
Casilla de verificación 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>
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('Hello World!')" value="Click Me!">
Así es como se mostrará el código HTML anterior en un navegador:
Tipo de entrada Color
se utiliza <input type="color">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>
Tipo de entrada Fecha
se utiliza <input type="date">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>
También puede usar los atributos miny maxpara 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>
Tipo de entrada Fecha y hora local
especifica <input type="datetime-local">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>
Tipo de entrada Correo electrónico
se utiliza <input type="email">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
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Archivo de tipo de entrada
Define un campo de selección de archivos <input type="file">
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>
Tipo de entrada oculto
define un campo de entrada oculto ( <input type="hidden">
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 función "Ver código fuente". ¡No utilice entradas ocultas como una forma de seguridad!
Ejemplo
<form>
<label for="fname">First name:</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>
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>
Número de tipo de entrada
define <input type="number">un campo de entrada
numérico .
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default
range is 0 to 100. However, you can set restrictions on what
numbers are accepted with the min, max, and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
Example
<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>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Exercises
HTML Input Type Attribute
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |