in

Tipos de entrada HTML


Este capítulo describe los diferentes tipos de HTML <input> elemento.


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

Propina: El valor predeterminado de la type el atributo es «texto».


Tipo de entrada de texto

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

Ejemplo


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


Inténtalo tú mismo »

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
sumisión
formar datos a un manejador de formularios.

El gestor de formularios suele ser una página de servidor con un script para procesar datos de entrada.

El controlador de formulario se especifica en el formulario action
atributo:

Ejemplo



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 enviar, el botón obtendrá un texto predeterminado:

Ejemplo



Inténtalo tú mismo »


Reinicio 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




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 boton de radio.

Los botones de opción permiten al usuario seleccionar SÓLO UNA de un número limitado de opciones:

Ejemplo

Elija su idioma web favorito:


HTML



JavaScript

Inténtalo tú mismo »

Así es como se mostrará el código HTML anterior en un navegador:







Casilla de verificación del tipo de entrada

<input type="checkbox"> define un caja.

Las casillas de verificación permiten al usuario seleccionar CERO o MÁS opciones de un número limitado de opciones.

Ejemplo






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

Inténtalo tú mismo »

Así es como se mostrará el código HTML anterior en un navegador:


Tipo de entrada Color

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



Inténtalo tú mismo »


Tipo de entrada Fecha

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



Inténtalo tú mismo »

También puede utilizar el min y max atributos para agregar restricciones a las fechas:

Ejemplo




Inténtalo tú mismo »


Tipo de entrada Fecha y hora local

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



Inténtalo tú mismo »


Tipo de entrada Correo electrónico

los <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 agregan «.com» al teclado para que coincida con la entrada del correo electrónico.

Ejemplo




Inténtalo tú mismo »


Archivo de tipo de entrada

los <input type="file">
define un campo de selección de archivos y un botón «Examinar» para cargar archivos.

Ejemplo




Inténtalo tú mismo »


Tipo de entrada oculto

los <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 funcionalidad «Ver código fuente». ¡No utilice entradas ocultas como forma de seguridad!

Ejemplo





Inténtalo tú mismo »


Tipo de entrada Mes

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



Inténtalo tú mismo »


Número de tipo de entrada

los <input type="number"> define un
numérico
campo de entrada.

También puede establecer restricciones sobre los números que se aceptan.

El siguiente ejemplo muestra un campo de entrada numérico, donde puede introducir un valor de 1 a 5:

Ejemplo



Inténtalo tú mismo »


Restricciones de entrada

A continuación, se muestra una lista de algunas restricciones de entrada comunes:

Atributo Descripción
comprobado Especifica que se debe preseleccionar un campo de entrada cuando se carga la página (para type = «checkbox» o type = «radio»)
discapacitado Especifica que un campo de entrada debe estar deshabilitado.
max Especifica el valor máximo para un campo de entrada.
longitud máxima Especifica el número máximo de caracteres para un campo de entrada.
min Especifica el valor mínimo para un campo de entrada.
patrón Especifica una expresión regular para comparar el valor de entrada
solo lectura Especifica que un campo de entrada es de solo lectura (no se puede cambiar)
requerido Especifica que se requiere un campo de entrada (debe completarse)
Talla Especifica el ancho (en caracteres) de un campo de entrada.
paso Especifica los intervalos de números legales para un campo de entrada
valor Especifica 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



Inténtalo tú mismo »


Rango de tipo de entrada

los <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 los números que se aceptan con el min, max, y step atributos:

Ejemplo




Inténtalo tú mismo »


Búsqueda de tipo de entrada

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

Ejemplo




Inténtalo tú mismo »


Tipo de entrada Tel

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

Ejemplo




Inténtalo tú mismo »


Tipo de entrada Hora

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

Ejemplo




Inténtalo tú mismo »


Tipo de entrada URL

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

Ejemplo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Gestión de identidades y accesos (IAM) | Oracle

thisr

esta palabra clave en Java – javatpoint