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 en 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: password

<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 'password' se procesarán 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, el botón 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 al usuario seleccionar SÓLO UNA de un número limitado de opciones:

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: cuadro de selección

<input type="checkbox"> definir cuadro de selección.

Los cuadros de selección permiten al usuario seleccionar 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 agregado 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 soportados se considerarán como tipo de entrada text.

Tipo de entrada: number

<input type="number"> Para los campos de entrada que deben contener valores numéricos.

Puede limitar los números.

De acuerdo con el soporte del navegador, las restricciones se pueden aplicar a los campos de entrada.

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 para el 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 completarse).
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"> Para los campos de entrada que deben contener una fecha.

Según el soporte 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.

Según el soporte 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 específico.

Según el soporte del navegador, el campo de entrada puede mostrarse como控件 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 al usuario seleccionar mes y año.

Según el soporte del navegador, el selector de fecha aparecerá en el campo de entrada.

Ejemplo

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

Prueba personalmente

Tipo de entrada: week

<input type="week"> Permite al usuario seleccionar semana y año.

Según el soporte 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 al usuario seleccionar hora (sin zona horaria).

Según el soporte 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 al usuario seleccionar fecha y hora (con zona horaria).

Según el soporte 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 al usuario seleccionar fecha y hora (sin zona horaria).

Según el soporte 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.

Según el soporte del navegador, se puede verificar 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.

Según el soporte del navegador, se puede verificar 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