Atributos de formulario de entrada en HTML
Cómo funcionan los atributos de entrada en HTML
La funcionalidad de los atributos depende de los valores llevados por estos atributos. Los atributos y sus valores compatibles se describen aquí.
Tipo de atributo
Al igual que el elemento de entrada es la parte central de los formularios HTML, el atributo de tipo es el ingrediente clave del elemento de entrada. Define el tipo de entrada que tiene uno de los siguientes valores.
- texto: utilizado para describir un campo de texto
- número: utilizado para crear un campo que acepte valores numéricos
- correo electrónico: utilizado para ingresar una dirección de correo electrónico
- color: Defina el color de un campo de entrada
- caja: para crear una casilla de verificación
- radio: para crear un botón de radio
- Tel: crea un campo que acepta números de teléfono
- imagen: se usa para obtener el archivo de imagen del usuario
- oculto: Un campo que no se mostrará en la pantalla del usuario
- fecha: crea un campo que acepta la fecha
- mes: crea un campo que contiene mes y año para ser seleccionados
- entregar: un botón que enviaría los datos del formulario
- reiniciar: Esto crea un botón que restablece todos los datos de formulario
Los mencionados anteriormente son los valores más utilizados del atributo de tipo y el ejemplo declarado a continuación hace uso de pocos de ellos.
Ejemplo
El código escrito a continuación ejecuta algunos valores del tipo atributo.
Se utilizan cuatro tipos de entrada diferentes en el código anterior que usa el texto de los valores, el correo electrónico, el envío y el reinicio.
Producción
Atributo de valor
Siempre que se define un formulario HTML, se recomienda asignar un valor inicial a cada uno para el elemento. Para hacerlo, debe usar el atributo de valor. El tipo de entrada debe definirse para usar este atributo.
Ejemplo
El código proporcionado a continuación Atributo de valor de las prácticas en el tipo de entrada = Text y tipo de entrada = Enviar.
Producción
Atributo de solo lectura
Este atributo no permitiría escribir dentro del campo de entrada.
Ejemplo
El código HTML proporcionó prácticas el solo lectura atributo en un campo de entrada.
Producción
El campo de texto que se muestra en la salida no le permitirá escribir ni el clic del mouse tomaría ninguna acción.
Atributo discapacitado
El tipo de entrada que lleva este atributo mostraría solo el área cubierta por el campo de entrada. Sin embargo, no puede realizar ninguna acción en ese elemento de entrada.
Ejemplo
El desactivado El atributo del elemento de entrada se practica en el siguiente código
Producción
Nota: El atributo de solo lectura se envía con el formulario, mientras que el atributo deshabilitado permite el valor de envío.
Atributo de patrón
Este atributo acepta expresiones regulares para las cuales se verificará el valor de ese campo. Se usa con pocos tipos de entrada, como texto, correo electrónico, Tel, URL, contraseña y fecha.
Ejemplo
En el siguiente código, el patrón El atributo se usa en un campo de texto que aceptará solo alfabetos pequeños.
Producción
Para la verificación del atributo del patrón, intentamos ingresar a los alfabetos de capital. Sin embargo, un error solicitó pedir que coincida con el formato solicitado.
Atributo de marcador de posición
Este atributo agrega caracteres ficticios que ayudan al usuario a comprender el propósito de ese campo.
Ejemplo
El código mencionado a continuación aplica el marcador de posición campo de atributo para describir que el campo de texto está destinado a aceptar su nombre.
Producción
Se observa desde la salida que el campo de texto dirige al usuario que ingrese su nombre.
Atributo requerido
Los tipos de entrada que usan los atributos requeridos son obligatorios para ser llenados.
Ejemplo
El código escrito a continuación establece el atributo requerido para un campo de texto.
Producción
Como el campo es obligatorio que se llene, la sumisión no se realizará hasta que se escriba algún texto dentro del campo de texto.
Atributo de enfoque automático
Si la página web se vuelve a cargar, el campo de entrada se centrará en el que se utiliza el atributo de enfoque automático.
Ejemplo
El siguiente código establece el enfoque automático Atributo del elemento de entrada.
Producción
Como hemos usado el enfoque automático atributo en un campo de texto, por lo tanto, siempre que se cargue la página, el cursor seguirá marcando.
Atributo múltiple
Este atributo permite agregar múltiples valores (adjuntar múltiples archivos es el uso principal de este atributo).
Ejemplo
El código proporcionado a continuación toma el archivo Como tipo de entrada y múltiple El atributo se aplica en el tipo de entrada.
Producción
La salida muestra que se adjuntan tres archivos que describen el funcionamiento de múltiples atributos.
Atributo de altura y ancho
Este atributo se usa con el tipo de imagen y establece la altura y el ancho de la imagen.
Ejemplo
El tipo de entrada está configurado en imagen y el anchura altura Los atributos se aplican en él.
Producción
La imagen en la salida se ajustaría de acuerdo con el valor de ancho y altura.
Atributo Min/Max
Los valores mínimos/máximos para varios tipos de entrada son especificados por estos atributos. Los tipos de entrada pueden incluir texto, número, fecha, rango, mes, hora y semana.
Ejemplo
El código proporcionado a continuación usa el mínimo y máximo atributo donde el tipo de entrada está configurado en número.
Producción
Como se muestra en la salida, el campo Número no acepta 21 ya que el límite se estableció en 20.
Atributo MaxLength
El número de caracteres para un tipo de entrada se puede especificar utilizando el atributo MaxLength.
Ejemplo
El siguiente código limita el número de caracteres a 5 en un campo de texto.
Producción
La salida anterior contiene 5 caracteres en el campo de texto, el campo de texto no permitirá el sexto carácter debido a longitud máxima atributo.
Conclusión
El elemento de entrada tiene una extensa lista de atributos para crear un formulario HTML con funciones. Esta publicación informativa enumera los atributos del elemento de entrada de los formularios HTML. Los atributos compatibles con el elemento de entrada son, tipo, valor, deshabilitado, solo lectura, enfoque automático, múltiple, altura y ancho, maxlength, etc,. Además, cada atributo se practica utilizando un ejemplo que ayudará a comprender la funcionalidad.