56. Tipos de input HTML

Estos son los diferentes tipos de input que podremos encontrar:

<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 atributo de tipo es “text“.

input type text

<input type=”text”> define un campo de entrada de texto de una sola línea.

Ejm

<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>

input type password

<input type=”password”> define un campo de contraseña. Los caracteres en un campo de contraseña están enmascarados (se muestran como asteriscos o círculos).

input type submit

<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 atributo de acción del formulario.

input type reset

<input type=”reset”> define un botón de reinicio que restablecerá todos los valores del formulario a sus valores predeterminados.

Ejm

<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>

input type radio

<input type=”radio”> define un botón de radio. Los botones de opción le permiten al usuario seleccionar SOLO UNA de un número limitado de opciones.

input type checkbox

<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.

input type button

<input type=”button”> define un botón.

Ejm

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

input type color

<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.

Ejm

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

input type date

<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.

Ejm

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

También puede usar los atributos min y max para agregar restricciones a las fechas.

Ejm

<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>

input type datetime-local

<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.

Ejm

<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

input type email

<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.

Ejm

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

input type file

<input type=”file”> define un campo de selección de archivos y un botón “Examinar” para cargar archivos.

Ejm

<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

input type hidden

<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 función “Ver código fuente”. ¡No utilice entradas ocultas como una forma de seguridad!

Ejm

<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>

input type month

<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.

Ejm

<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>

input type number

<input type=”number”> define un campo de entrada numérico. También puede 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.

Ejm

<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Restricciones

Aquí hay una lista de algunas restricciones de entrada comunes:

Atributo	Descripción
checked	Especifica que se debe preseleccionar un campo de entrada cuando se 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 se requiere 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

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.

<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

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, puedes establecer restricciones sobre qué números se aceptan con los atributos min, max y step.

<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

El <input type=”search”> se utiliza para los campos de búsqueda (un campo de búsqueda se comporta como un campo de texto normal).

Ejm

<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

input type tel

<input type=”tel”> se utiliza para campos de entrada que deben contener un número de teléfono.

Ejm

<!DOCTYPE html>
<html>
<body>

<h2>Telephone Field</h2>

<p>The <strong>input type="tel"</strong> is used for input fields that 
contain a telephone number:</p>

<form action="/action_page.php">
<label for="phone">Enter a phone number:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" 
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
<small>Format: 123-45-678</small><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>

input type time

<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.

Ejm

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>

input type url

<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.

input type week

<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.

Ejm

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>