Tipos de entrada HTML

Este capítulo describe los tipos de entrada del elemento <input>.

Tipo de entrada: texto

<input type="text"> Define paraEntrada de textoEl campo de entrada de una sola línea:

Ejemplo

<form>
 Nombre:<br>
<input type="text" name="firstname">
<br>
 Apellido:<br>
<input type="text" name="lastname">
</form>

Prueba personalmente

El código HTML anterior se verá así en el navegador:}

Nombre:


Apellido:

Tipo de entrada: contraseña

<input type="password"> definirCampo de contraseña:

Ejemplo

<form>
 Nombre de usuario:<br>
<input type="text" name="username">
<br>
 Contraseña de usuario:<br>
<input type="password" name="psw">
</form>

Prueba personalmente

El código HTML anterior se verá así en el navegador:}

Nombre de usuario:


Contraseña de usuario:

Nota:Los caracteres del campo de contraseña de password serán procesados como máscara (se mostrarán como asteriscos o círculos sólidos).

Tipo de entrada: submit

<input type="submit"> definirEnviarLos datos del formulario aPrograma de procesamiento de formulariosdel botón.

El programa de procesamiento de formularios (form-handler) es generalmente una página web del servidor que contiene scripts para procesar datos de entrada.

En la propiedad action del formulario se especifica el procesador de formulario (form-handler):

Ejemplo

<form action="action_page.php">
Nombre:<br>
<input type="text" name="nombre" value="Mickey">
<br>
Apellido:<br>
<input type="text" name="apellido" value="Ratón">
<br><br>
<input type="submit" value="Enviar">
</form>

Prueba personalmente

El código HTML anterior se verá así en el navegador:}

Nombre:


Apellido:


Si omite la propiedad value del botón de envío, este obtendrá el texto predeterminado:

Ejemplo

<form action="action_page.php">
Nombre:<br>
<input type="text" name="nombre" value="Mickey">
<br>
Apellido:<br>
<input type="text" name="apellido" value="Ratón">
<br><br>
<input type="submit">
</form>

Prueba personalmente

Tipo de entrada: botón de opción

<input type="radio"> definir botón de opción.

Los botones de opción permiten que el usuario seleccione SÓLO UNA de las opciones limitadas:

Ejemplo

<form>
<input type="radio" name="sexo" value="masculino" checked>Masculino
<br>
<input type="radio" name="sexo" value="femenino">Femenino
</form>

Prueba personalmente

El código HTML anterior se verá así en el navegador:}

Masculino

Femenino

Tipo de entrada: casilla de verificación

<input type="checkbox"> definir casilla de verificación.

Las casillas de verificación permiten que el usuario seleccione CERO o MÁS opciones de un número limitado de opciones.

Ejemplo

<form>
<input type="checkbox" name="vehicle" value="Bicicleta">Tengo una bicicleta
<br>
<input type="checkbox" name="vehicle" value="Coche">Tengo un coche 
</form>

Prueba personalmente

El código HTML anterior se verá así en el navegador:}

Tengo una bicicleta

Tengo un coche

Tipo de entrada: botón

<input type="button"> definirbotón。

Ejemplo

<input type="button" onclick="alert('¡Hola Mundo!')" value="¡Haz clic aquí!">

Prueba personalmente

El código HTML anterior se verá así en el navegador:}

Tipos de entrada de HTML5

HTML5 ha añadido varios nuevos tipos de entrada:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Nota:Los tipos de entrada antiguos de web no son compatibles y se consideran como tipo de entrada text.

Tipo de entrada: number

<input type="number"> Usado para campos de entrada que deben contener un valor numérico.

Puede imponer limitaciones a los números.

Las restricciones se pueden aplicar a los campos de entrada según el soporte del navegador.

Ejemplo

<form>
  Cantidad (entre 1 y 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Prueba personalmente

Restricciones de entrada

Aquí se enumeran algunas restricciones de entrada comunes (algunas de las cuales son nuevas en HTML5):

Atributo Descripción
disabled Define si el campo de entrada debe estar deshabilitado.
max Define el valor máximo del campo de entrada.
maxlength Define el número máximo de caracteres del campo de entrada.
min Define el valor mínimo del campo de entrada.
pattern Define la expresión regular que verifica el valor de entrada.
readonly Define el campo de entrada como de solo lectura (no se puede modificar).
required Define si el campo de entrada es obligatorio (debe llenarse).
size Define el ancho del campo de entrada (en caracteres).
step Define el intervalo numérico válido para el campo de entrada.
value Define el valor predeterminado del campo de entrada.

Aprenderá más sobre las restricciones de entrada en el siguiente capítulo.

Ejemplo

<form>
  Cantidad:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Prueba personalmente

Tipo de entrada: date

<input type="date"> Usado para campos de entrada que deben contener una fecha.

De acuerdo con la compatibilidad del navegador, el selector de fecha aparecerá en el campo de entrada.

Ejemplo

<form>
  Cumpleaños:
  <input type="date" name="bday">
</form>

Prueba personalmente

Puede agregar restricciones a la entrada:

Ejemplo

<form>
  Ingrese una fecha antes del 01-01-1980:
  <input type="date" name="bday" max="1979-12-31"><br>
  Ingrese una fecha después del 2000-01-01:
  Ingrese una fecha después del 2000-01-01:<br>
</form>

Prueba personalmente

Tipo de entrada: color

<input type="color"> Se utiliza para campos de entrada que deben contener colores.

De acuerdo con la compatibilidad del navegador, el selector de color aparecerá en el campo de entrada.

Ejemplo

<form>
  Seleccione su color favorito:
  <input type="color" name="favcolor">
</form>

Prueba personalmente

Tipo de entrada: range

<input type="range"> Se utiliza para campos de entrada que deben contener valores dentro de un rango determinado.

De acuerdo con la compatibilidad del navegador, el campo de entrada puede mostrarse como control deslizante.

Ejemplo

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Prueba personalmente

Puede usar las siguientes propiedades para establecer limitaciones: min, max, step, value.

Tipo de entrada: month

<input type="month"> Permite que el usuario seleccione mes y año.

De acuerdo con la compatibilidad del navegador, el selector de fecha aparecerá en el campo de entrada.

Ejemplo

<form>
  Fecha de cumpleaños (mes y año):
  <input type="month" name="bdaymonth">
</form>

Prueba personalmente

Tipo de entrada: week

<input type="week"> Permite que el usuario seleccione la semana y el año.

De acuerdo con la compatibilidad del navegador, el selector de fecha aparecerá en el campo de entrada.

Ejemplo

<form>
  Seleccione una semana:
  <input type="week" name="week_year">
</form>

Prueba personalmente

Tipo de entrada: time

<input type="time"> Permite que el usuario seleccione hora (sin zona horaria).

De acuerdo con la compatibilidad del navegador, el selector de hora aparecerá en el campo de entrada.

Ejemplo

<form>
  Seleccione una hora:
  <input type="time" name="usr_time">
</form>

Prueba personalmente

Tipo de entrada: datetime

<input type="datetime"> Permite que el usuario seleccione fecha y hora (con zona horaria).

De acuerdo con la compatibilidad del navegador, el selector de fecha aparecerá en el campo de entrada.

Ejemplo

<form>
  Fecha (fecha y hora):
  <input type="datetime" name="bdaytime">
</form>

Prueba personalmente

Tipo de entrada: datetime-local

<input type="datetime-local"> Permite que el usuario seleccione fecha y hora (sin zona horaria).

De acuerdo con la compatibilidad del navegador, el selector de fecha aparecerá en el campo de entrada.

Ejemplo

<form>
  Fecha (fecha y hora):
  <input type="datetime-local" name="bdaytime">
</form>

Prueba personalmente

Tipo de entrada: email

<input type="email"> Se utiliza para campos de entrada que deben contener una dirección de correo electrónico.

De acuerdo con el soporte del navegador, puede validarse automáticamente la dirección de correo electrónico al enviar.

Algunos smartphones reconocen el tipo de email y agregan ".com" al teclado para coincidir con la entrada de correo electrónico.

Ejemplo

<form>
  Correo electrónico:
  <input type="email" name="email">
</form>

Prueba personalmente

Tipo de entrada: search

<input type="search"> Se utiliza para campos de búsqueda (los campos de búsqueda se comportan de manera similar a los campos de texto normales).

Ejemplo

<form>
  Buscar Google:
  <input type="search" name="googlesearch">
</form>

Prueba personalmente

Tipo de entrada: tel

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

Actualmente solo Safari 8 admite el tipo tel.

Ejemplo

<form>
  Teléfono:
  <input type="tel" name="usrtel">
</form>

Prueba personalmente

Tipo de entrada: url

<input type="url"> Se utiliza para campos de entrada que deben contener una dirección URL.

De acuerdo con el soporte del navegador, puede validarse automáticamente el campo de url al enviar.

Algunos smartphones reconocen el tipo de url y agregan ".com" al teclado para coincidir con la entrada de url.

Ejemplo

<form>
  Añade tu página de inicio:
  <input type="url" name="homepage">
</form>

Prueba personalmente