HTML
Elementos de control de entrada
Buscar..
Introducción
Un componente clave de los sistemas web interactivos, las etiquetas de entrada son elementos HTML diseñados para tomar una forma específica de entrada de los usuarios. Diferentes tipos de elementos de entrada pueden regular los datos ingresados para que se ajusten a un formato específico y brinden seguridad a la entrada de contraseña.
Sintaxis
<input type="" name="" value="">
Parámetros
Parámetro | Detalles |
---|---|
clase | Indica la clase de la entrada |
carné de identidad | Indica el ID de la entrada |
tipo | Identifica el tipo de control de entrada a visualizar. Los valores aceptables están hidden , text , tel , url , email , password , date , time , number , range , color , checkbox , radio , file , submit , image , reset y button . El valor predeterminado es text si no se especifica, si el valor no es válido o si el navegador no admite el tipo especificado. |
nombre | Indica el nombre de la entrada. |
discapacitado | Valor booleano que indica que la entrada debe estar deshabilitada. Los controles deshabilitados no pueden editarse, no se envían al enviar el formulario y no pueden recibir el foco. |
comprobado | Cuando el valor del atributo de tipo es radio o casilla de verificación, la presencia de este atributo booleano indica que el control está seleccionado de forma predeterminada; De lo contrario se ignora. |
múltiple | HTML5 indica que se pueden pasar varios archivos o valores (se aplica solo a las entradas de tipo de file y email ) |
marcador de posición | HTML5 Una sugerencia para el usuario de lo que se puede ingresar en el control. El texto del marcador de posición no debe contener retornos de carro o saltos de línea |
autocompletar | HTML5 Indica si el navegador puede completar automáticamente el valor del control. |
solo lectura | Valor booleano que indica que la entrada no es editable. Los controles de solo lectura aún se envían en el envío del formulario, pero no recibirán el foco. HTML5: este atributo se ignora cuando el valor del atributo de type se establece en hidden , range , color , checkbox , radio , file o button . |
necesario | HTML5 Indica que un valor debe estar presente o que el elemento debe verificarse para que se envíe el formulario |
alt | Un texto alternativo para las imágenes, en caso de que no se muestren. |
enfoque automático | El elemento <input> debe obtener el foco cuando se carga la página. |
valor | Especifica el valor del elemento <input> . |
paso | El atributo de step especifica los intervalos de números legales. Funciona con los siguientes tipos de entrada: number , range , date , datetime-local , month , time y week . |
Observaciones
Al igual que con otros elementos de HTML5 void, <input>
se cierra automáticamente y puede escribirse <input />
. HTML5 no requiere esta barra.
Los siguientes son tipos de entrada válidos en HTML:
Los siguientes son tipos de entrada recientemente introducidos como parte del estándar HTML 5. Algunos de estos tipos no son compatibles con todos los navegadores web. En el caso de que un tipo no sea compatible, el elemento de entrada se establecerá de forma predeterminada en el tipo de text
.
Para comprobar qué navegadores admiten qué tipos, puede ir a caniuse.com .
Casilla de verificación y botones de radio
Visión general
Las casillas de verificación y los botones de opción se escriben con la etiqueta HTML <input>
, y su comportamiento se define en la especificación HTML .
La casilla de verificación o el botón de opción más simple es un elemento <input>
con un atributo de type
de checkbox
de checkbox
o radio
, respectivamente:
<input type="checkbox">
<input type="radio">
Se utiliza un único elemento de casilla de verificación independiente para una única opción binaria, como una pregunta de sí o no. Las casillas de verificación son independientes, lo que significa que el usuario puede seleccionar tantas opciones como desee en un grupo de casillas de verificación. En otras palabras, marcar una casilla de verificación no desactiva las otras casillas de verificación en el grupo de casillas de verificación.
Los botones de radio generalmente vienen en grupos (si no están agrupados con otro botón de radio, probablemente querías usar una casilla de verificación) identificados usando el mismo atributo de name
en todos los botones dentro de ese grupo. La selección de los botones de opción se excluyen mutuamente , lo que significa que el usuario solo puede seleccionar una opción de un grupo de botones de opción. Cuando se marca un botón de opción, cualquier otro botón de opción con el mismo name
que se verificó previamente se desmarca.
Ejemplo:
<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">
Cuando se ve, los botones de radio aparecen como un círculo (sin marcar) o un círculo relleno (marcado). Las casillas de verificación aparecen como un cuadrado (sin marcar) o como un cuadrado relleno (marcado). Dependiendo del navegador y del sistema operativo, el cuadrado a veces tiene esquinas redondeadas.
Atributos
Las casillas de verificación y los botones de radio tienen una serie de atributos para controlar su comportamiento:
value
Al igual que cualquier otro elemento de entrada, el atributo de value
especifica el valor de cadena para asociar con el botón en caso de envío de formulario. Sin embargo, casillas de verificación y botones de radio son especiales ya que cuando se omite el valor, el valor predeterminado es on
cuando se presentó, en lugar de enviar un valor en blanco. El atributo de value
no se refleja en la apariencia del botón.
checked
El atributo checked
especifica el estado inicial de una casilla de verificación o botón de radio. Este es un atributo booleano y se puede omitir.
Cada una de estas son formas válidas y equivalentes de definir un botón de opción marcado:
<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">
La ausencia del atributo checked
es la única sintaxis válida para un botón sin marcar:
<input type="radio">
<input type="checkbox">
Al restablecer un <form>
, las casillas de verificación y los botones de radio vuelven al estado de su atributo checked
.
Accesibilidad
Etiquetas
Para dar contexto a los botones y mostrar a los usuarios para qué sirve cada botón, cada uno de ellos debe tener una etiqueta. Esto se puede hacer usando un elemento <label>
para envolver el botón. Además, esto hace que la etiqueta sea cliqueable, por lo que selecciona el botón correspondiente.
Ejemplo:
<label>
<input type="radio" name="color" value="#F00">
Red
</label>
o con un elemento <label>
con un atributo for
establecido en el atributo id
del botón:
<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>
Grupos de botones
Como cada botón de opción afecta a los otros del grupo, es común proporcionar una etiqueta o contexto para todo el grupo de botones de opción.
Para proporcionar una etiqueta para todo el grupo, los botones de <fieldset>
deben incluirse en un elemento <fieldset>
con un elemento <legend>
dentro de él.
Ejemplo:
<fieldset>
<legend>Theme color:</legend>
<p>
<input type="radio" name="color" id="red" value="#F00">
<label for="red">Red</label>
</p>
<p>
<input type="radio" name="color" id="green" value="#0F0">
<label for="green">Green</label>
</p>
<p>
<input type="radio" name="color" id="blue" value="#00F">
<label for="blue">Blue</label>
</p>
</fieldset>
Las casillas de verificación también se pueden agrupar de manera similar, con un conjunto de campos y una leyenda que identifican el grupo de casillas de verificación relacionadas. Sin embargo, tenga en cuenta que las casillas de verificación no deben compartir el mismo nombre porque no se excluyen mutuamente. Al hacer esto, el formulario enviará múltiples valores para la misma clave y no todos los idiomas del lado del servidor lo manejarán de la misma manera (comportamiento indefinido). Cada casilla de verificación debe tener un nombre único o usar un conjunto de corchetes ( []
) para indicar que el formulario debe enviar una matriz de valores para esa clave. El método que elija dependerá de cómo planea manejar los datos del formulario del lado del cliente o del lado del servidor. También debe mantener la leyenda corta, ya que algunas combinaciones de navegadores y lectores de pantalla leen la leyenda antes de cada campo de entrada en el campo.
Oculto
<input type="hidden" name="inputName" value="inputValue">
Una entrada oculta no será visible para el usuario, pero su valor se enviará al servidor cuando se envíe el formulario.
Contraseña
<input type="password" name="password">
El elemento de entrada con un atributo de tipo cuyo valor es password
crea un campo de texto de una sola línea similar al type=text
entrada type=text
, excepto que el texto no se muestra cuando el usuario lo ingresa.
<input type="password" name="password" placeholder="Password">
El texto del marcador de posición se muestra en texto sin formato y se sobrescribe automáticamente cuando un usuario comienza a escribir.
Nota: Algunos navegadores y sistemas modifican el comportamiento predeterminado del campo de contraseña para mostrar también el carácter escrito más recientemente por un breve período de tiempo, como por ejemplo:
Enviar
<input type="submit" value="Submit">
Una entrada de envío crea un botón que envía el formulario que contiene cuando se hace clic.
También puede usar el elemento <button>
si necesita un botón de envío que se pueda diseñar más fácilmente o que contenga otros elementos:
<button type="submit">
<img src="submit-icon.jpg" /> Submit
</button>
Expediente
<input type="file" name="fileSubmission">
Las entradas de archivo permiten a los usuarios seleccionar un archivo de su sistema de archivos local para usar con la página actual. Si se usan junto con un elemento de form
, se pueden usar para permitir a los usuarios cargar archivos en un servidor (para obtener más información, consulte Carga de archivos ).
El siguiente ejemplo les permite a los usuarios usar la entrada del file
para seleccionar un archivo de su sistema de archivos y cargar ese archivo en un script en el servidor llamado upload_file.php
.
<form action="upload_file.php" method="post" enctype="multipart/form-data">
Select file to upload:
<input type="file" name="fileSubmission" id="fileSubmission">
<input type="submit" value="Upload your file" name="submit">
</form>
Múltiples archivos
Agregando el atributo multiple
el usuario podrá seleccionar más de un archivo:
<input type="file" name="fileSubmission" id="fileSubmission" multiple>
Aceptar archivos
El atributo Aceptar especifica los tipos de archivos que el usuario puede seleccionar. Por ejemplo, .png
, .gif
, .jpeg
.
<input type="file" name="fileSubmission" accept="image/x-png,image/gif,image/jpeg" />
Validación de entrada
La validación de entrada HTML se realiza automáticamente por el navegador en función de atributos especiales en el elemento de entrada. Podría reemplazar parcial o completamente la validación de entrada de JavaScript. Este tipo de validación puede ser evitada por el usuario a través de solicitudes HTTP especialmente diseñadas, por lo que no reemplaza la validación de entrada del lado del servidor. La validación solo se produce cuando se intenta enviar el formulario, por lo que todas las entradas restringidas deben estar dentro de un formulario para que se produzca la validación (a menos que esté utilizando JavaScript). Tenga en cuenta que las entradas que están deshabilitadas o de solo lectura no activarán la validación.
Algunos tipos de entrada más nuevos (como email
, url
, tel
, date
y muchos más) se validan automáticamente y no requieren sus propias restricciones de validación.
Necesario
Use el atributo required
para indicar que se debe completar un campo para pasar la validación.
<input required>
Longitud mínima / máxima
Utilice los minlength
y maxlength
para indicar los requisitos de longitud. La mayoría de los navegadores evitarán que el usuario escriba más de un máximo de caracteres en el cuadro, lo que evitará que su entrada sea inválida incluso antes de intentar el envío.
<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">
Especificando un rango
Use los atributos min
y max
para restringir el rango de números que un usuario puede ingresar en una entrada de number
de tipo o range
Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />
Emparejar un patrón
Para obtener más control, use el atributo de pattern
para especificar cualquier expresión regular que deba coincidir para pasar la validación. También puede especificar un title
, que se incluye en el mensaje de validación si el campo no pasa.
<input pattern="\d*" title="Numbers only, please.">
Este es el mensaje que se muestra en Google Chrome versión 51 cuando intenta enviar el formulario con un valor no válido dentro de este campo:
No todos los navegadores muestran un mensaje para patrones no válidos, aunque hay soporte completo entre los navegadores modernos más usados.
Verifique el soporte más reciente en CanIUse e implemente en consecuencia.
Aceptar tipo de archivo
Para los campos de entrada de tipo de file
, es posible aceptar solo ciertos tipos de archivos, como videos, imágenes, audios, extensiones de archivo específicas o ciertos tipos de medios . Por ejemplo:
<input type="file" accept="image/*" title="Only images are allowed">
Se pueden especificar varios valores con una coma, por ejemplo:
<input type="file" accept="image/*,.rar,application/zip">
Nota: al agregar el atributo novalidate
al elemento de form
o formnovalidate
atributo formnovalidate
en el botón de envío, se evita la validación de los elementos de formulario. Por ejemplo:
<form>
<input type="text" name="name" required>
<input type="email" name="email" required>
<input pattern="\d*" name="number" required>
<input type="submit" value="Publish"> <!-- form will be validated -->
<input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>
El formulario tiene campos que son necesarios para "publicar" el borrador pero no son necesarios para "guardar" el borrador.
Reiniciar
<input type="reset" value="Reset">
Una entrada de tipo reset
crea un botón que, al hacer clic, restablece todas las entradas en la forma en que se encuentra en su estado predeterminado.
- El texto en un campo de entrada se restablecerá en blanco o su valor predeterminado (especificado mediante el atributo de
value
). - Cualquier opción (s) en un menú de selección se deseleccionará a menos que tengan el atributo
selected
. - Todas las casillas de verificación y casillas de radio se deseleccionarán a menos que tengan el atributo
checked
.
Nota: Un botón de reinicio debe estar dentro o adjuntado a (a través del atributo de form
) un elemento <form>
para que tenga algún efecto. El botón solo restablecerá los elementos dentro de este formulario.
Número
<input type="number" value="0" name="quantity">
El elemento de entrada con un atributo de tipo cuyo valor es number
representa un control preciso para establecer el valor del elemento en una cadena que representa un número.
Tenga en cuenta que este campo no garantiza tener un número correcto. Simplemente permite todos los símbolos que podrían usarse en cualquier número real, por ejemplo, el usuario podrá ingresar valores como e1e-,0
.
Tel
<input type="tel" value="+8400000000">
El elemento de entrada con un atributo de tipo cuyo valor es tel
representa un control de edición de texto sin formato de una línea para ingresar un número de teléfono.
<input type="email">
se usa para los campos de entrada que deben contener una dirección de correo electrónico.
<form>
<label>E-mail: <label>
<input type="email" name="email">
</form>
La dirección de correo electrónico se puede validar automáticamente cuando se envía, según la compatibilidad del navegador.
Botón
<input type="button" value="Button Text">
Los botones se pueden utilizar para desencadenar acciones en la página, sin enviar el formulario. También puede usar el elemento <button>
si necesita un botón que se pueda diseñar más fácilmente o que contenga otros elementos:
<button type="button">Button Text</button>
Los botones se utilizan normalmente con un evento "onclick":
<input type="button" onclick="alert('hello world!')" value="Click Me">
o
<button type="button" onclick="alert('hello world!')">Click Me</button>
Atributos
[name]
El name
del botón, que se envía con los datos del formulario.
[type]
El type
de botón.
Los valores posibles son:
submit
: el botón envía los datos del formulario al servidor. Este es el valor predeterminado si no se especifica el atributo, o si el atributo se cambia dinámicamente a un valor vacío o no válido.
reset
: el botón restablece todos los controles a sus valores iniciales.
button
: El botón no tiene un comportamiento por defecto. Puede tener scripts del lado del cliente asociados con los eventos del elemento, que se activan cuando ocurren los eventos.
menu
: el botón abre un menú emergente definido a través de su elemento designado.
[value]
El valor inicial del botón.
Atributos extra para botones de envío
Atributo | Descripción |
---|---|
form | Especifica el ID del formulario al que pertenece el botón. Si no se especifica ninguno, pertenecerá a su elemento de formulario ancestro (si existe). |
formaction | Especifica dónde enviar los datos del formulario. cuando se envía el formulario utilizando este botón. |
formenctype | Especifica cómo se deben codificar los datos de formulario. al enviarlo al servidor mediante este botón. Solo se puede utilizar con formmethod="post" . |
formmethod | Especifica el método HTTP a utilizar (POST o GET) al enviar datos de formulario utilizando este botón. |
formnovalidate | Especifica que los datos de formulario no deben validarse en el envío. |
formtarget | Especifica dónde mostrar la respuesta que se recibe. Después de enviar el formulario utilizando este botón. |
Color
<input type="color" name="favcolor" value="#ff0000">
En los navegadores compatibles, el elemento de entrada con un atributo de tipo cuyo valor es color
crea un control similar a un botón, con un color igual al valor del atributo de color
(el valor predeterminado es negro si el valor no se especifica o es un formato hexadecimal no válido).
Al hacer clic en este botón, se abre el widget de color del sistema operativo, que permite al usuario seleccionar un color.
El respaldo para los navegadores que no admiten este tipo de entrada es un type=text
entrada normal type=text
.
Url
<input type="url" name="Homepage">
Esto se utiliza para los campos de entrada que deben contener una dirección URL.
Dependiendo de la compatibilidad del navegador, el campo url
puede validarse 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.
Fecha
<input type="date" />
Aparecerá un selector de fecha en la pantalla para que usted elija una fecha. Esto no es compatible con Firefox o Internet Explorer.
DateTime-Local
<input type="datetime-local" />
Dependiendo de la compatibilidad con el navegador, aparecerá un selector de fecha y hora en la pantalla para que elijas una fecha y una hora.
Imagen
<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>
Una imagen. Debe usar el atributo src para definir el origen de la imagen y el atributo alt para definir un texto alternativo. Puede utilizar los atributos de altura y anchura para definir el tamaño de la imagen en píxeles.
Distancia
<input type="range" min="" max="" step="" />
Un control para ingresar un número cuyo valor exacto no es importante.
Atributo | Descripción | Valor por defecto |
---|---|---|
min | Valor mínimo por rango | 0 |
max | Valor máximo por rango | 100 |
paso | Cantidad a aumentar en cada incremento. | 1 |
Mes
<input type="month" />
Dependiendo de la compatibilidad con el navegador, se mostrará un control para elegir el mes.
Hora
<input type="time" />
La entrada de time
marca este elemento como aceptando una cadena que representa un tiempo. El formato está definido en RFC 3339 y debe ser un tiempo parcial como
19:04:39
08:20:39.04
Actualmente, todas las versiones de Edge, Chrome, Opera y Chrome para Android admiten el tipo = "tiempo". Las versiones más recientes de Android Browser, específicamente 4.4 y versiones superiores lo admiten. Safari para iOS ofrece soporte parcial, no admite los atributos mínimo, máximo y paso.
Semana
<input type="week" />
Dependiendo de la compatibilidad con el navegador, se mostrará un control para ingresar un número de año-semana y un número de semana sin zona horaria.
Texto
El tipo de entrada más básico y la entrada predeterminada si no se especifica ningún type
. Este tipo de entrada define un campo de texto de una sola línea con saltos de línea eliminados automáticamente del valor de entrada. Todos los demás personajes pueden ser ingresados en esto. <input>
elementos <input>
se utilizan dentro de un elemento <form>
para declarar controles de entrada que permiten a los usuarios ingresar datos.
Sintaxis
<input type="text">
o (sin especificar un type
, usando el atributo predeterminado):
<input>
El ancho predeterminado de una entrada de campo de texto es de 20 caracteres. Esto se puede cambiar especificando un valor para el atributo de size
como este:
<input type="text" size="50">
El atributo de size
es claramente diferente a establecer un ancho con CSS. El uso de un ancho define un valor específico (en número de píxeles, porcentaje del elemento principal, etc.) que la entrada siempre debe ser amplia. El uso del size
calcula la cantidad de ancho para asignar en función de la fuente que se utiliza y el ancho de los caracteres normalmente.
Nota: El uso del atributo de size
no limita intrínsecamente el número de caracteres que se pueden ingresar en el cuadro, solo la anchura del cuadro. Para limitar la longitud, ver Validación de entrada .
Un campo de entrada solo permite una línea de texto. Si necesita una entrada de texto de varias líneas para una cantidad sustancial de texto, use un elemento <textarea>
lugar.
Buscar
La búsqueda de tipo de entrada se utiliza para la búsqueda textual. Agregará un símbolo de lupa junto al espacio para texto en la mayoría de los navegadores
<input type="search" name="googlesearch">
DateTime (Global)
El elemento de entrada con un atributo de tipo cuyo valor es " datetime " representa un control para establecer el valor del elemento en una cadena que representa una fecha y hora global (con información de zona horaria).
<fieldset>
<p><label>Meeting time: <input type=datetime name="meeting.start"></label>
</fieldset>
Atributos permitidos:
- atributos globales
- nombre
- discapacitado
- formar
- tipo
- autocompletar
- enfoque automático
- lista
- mínimo máximo
- paso (flotar)
- solo lectura
- valor requerido