Los 5 atributos de elementos de entrada más útiles que debe conocer

Al construir un sitio web, lo que debe priorizar es la experiencia del usuario. Atributos de elementos de entrada Si está interesado en el desarrollo web, debe estar familiarizado con el término atributos de elementos de entrada.

En este blog, vamos a discutir precisamente eso. Le explicaré sobre la etiqueta de entrada y 5 debe conocer los atributos de entrada que se utilizan para el desarrollo web.

Etiqueta de entrada

El elemento HTML de entrada es una etiqueta útil para crear formularios interactivos basados ​​en web para obtener datos del usuario. Según el dispositivo y el agente de usuario, hay disponible una amplia variedad de widgets de control de datos de entrada.

La etiqueta de entrada es muy poderosa y compleja para una gran cantidad de combinaciones de tipos y atributos de entrada.

Tomemos un ejemplo de una etiqueta de entrada. Aquí tomamos una etiqueta de entrada para ingresar el nombre en la que el usuario puede completar un mínimo de 4 caracteres de su nombre y un máximo de 8 caracteres.

La imagen que se muestra a continuación muestra cómo se mostrará el código HTML en un editor.

La siguiente imagen muestra cómo se mostrará la salida anterior en un navegador.

Entonces esta es la forma en que puede aceptar los datos del usuario. Hay muchos tipos de etiquetas de entrada. Algunos de ellos son texto, botón, casilla de verificación, radio, fecha y hora local, rango, búsqueda. Debe tener en cuenta que el valor predeterminado del atributo de tipo es "texto".

Es importante notar que el comportamiento de un <input> cambia significativamente dependiendo del valor de su atributo de tipo; como resultado, los diversos tipos se describen en sus propias páginas de referencia individuales. Si no se proporciona esta propiedad, el tipo de texto se utilizará como valor predeterminado.

Atributos de entrada

El elemento <Input> es muy poderoso debido a sus atributos. El atributo de tipo es muy importante a partir de esto. Dado que cada elemento <input>, independientemente del tipo, se basa en la interfaz HTMLInputElement, esto se debe a que ambos comparten casi exactamente el mismo conjunto de atributos. Sin embargo, en realidad, tiene un efecto sobre un tipo específico de subconjunto de tipo de entrada. Además, algunos atributos impactan en un tipo de entrada pero pueden diferir con los diferentes atributos.

Aquí hemos enumerado algunos atributos esenciales del tipo de entrada que un desarrollador debe conocer muy bien:

• Longitud mínima
• Longitud máxima
• Desactivado
• Enfoque automático
• Marcador de posición

minilongitud

Este atributo solo funciona con el tipo de texto, búsqueda, teléfono, URL, correo electrónico o contraseña en el elemento de entrada. El atributo minlength especifica el carácter mínimo que se debe ingresar en el cuadro de entrada, como unidades de código UTF-16.

Debe ser un valor entero no negativo menor o igual que el valor especificado en maxlength. Si no se da un valor a la longitud mínima o se especifica un valor no válido, entonces la entrada no tiene una longitud mínima. El envío del formulario fallará si hay menos caracteres ingresados ​​en el cuadro de entrada que la longitud mínima.

La siguiente imagen muestra cómo se mostrará el código HTML en un editor.

La siguiente imagen muestra cómo se mostrará la salida anterior en un navegador.

Longitud máxima

Este atributo también solo funciona con el tipo de texto, búsqueda, teléfono, URL, correo electrónico o contraseña en el elemento de entrada como minilongitud. El atributo maxlength especifica el carácter máximo que se ingresará en el cuadro de entrada, como las unidades de código UTF-16.

Debe ser un valor entero no negativo mayor o igual que el valor especificado en minlength. Si no se proporciona un valor a la longitud máxima o se especifica un valor no válido, la entrada no tiene una longitud máxima.

De manera predeterminada, los navegadores evitarán que el usuario ingrese la cantidad de caracteres en el cuadro de entrada si es mayor que la longitud máxima especificada.

La siguiente imagen muestra cómo se mostrará el código HTML en un editor.

La siguiente imagen muestra cómo se mostrará la salida anterior en un navegador.

Desactivado

Este es un atributo booleano. Este atributo indica que el usuario no debe interactuar con la entrada.

Las entradas deshabilitadas se muestran específicamente en un color más tenue de usar alguna otra forma de indicación de que no está disponible para su uso. El atributo deshabilitado no recibe el evento de clic y el valor del formulario deshabilitado no se enviará con el envío del formulario.

La siguiente imagen muestra cómo se mostrará el código HTML en un editor.

La siguiente imagen muestra cómo se mostrará la salida anterior en un navegador.

Enfoque automático

Este también es un atributo booleano como el atributo deshabilitado. Esto indica que el cuadro de entrada se enfoca cuando la página completa el proceso de carga. O cuando se muestra el elemento de entrada que contiene el atributo de enfoque automático.

No más de un elemento ha obtenido el atributo de enfoque automático. Si se coloca con más de un elemento, el primero con el atributo se enfocará ya que las entradas ocultas no se pueden enfocar. Entonces, el atributo de enfoque automático se puede usar con los tipos de entrada ocultos.

La siguiente imagen muestra cómo se mostrará el código HTML en un editor.

La siguiente imagen muestra cómo se mostrará la salida anterior en un navegador.

Marcador de posición

El marcador de posición es un atributo de cadena. Es un atributo que proporciona una idea de los datos que deben ingresarse en el campo de entrada.

Debe ser una palabra o una frase corta que insinúe el tipo de datos que se ingresarán en el campo de entrada en lugar de una explicación. Entonces, por ejemplo, si se espera que un campo capture el nombre de un usuario y su etiqueta es "Nombre", un marcador de posición adecuado podría ser "por ejemplo, Bruce".

La siguiente imagen muestra cómo se mostrará el código HTML en un editor.

La siguiente imagen muestra cómo se mostrará la salida anterior en un navegador.

Terminando

En este blog, le presenté algunos atributos de elementos de entrada que debe conocer, especialmente si es un desarrollador web. Con estos atributos, puede controlar el elemento de entrada de diferentes maneras en un formulario HTML o una página web.

Aunque hay muchos atributos nuevos que se agregan día a día, incluso en HTML, estos son algunos de los atributos que debe conocer.

¡Espero que este blog te haya sido útil! ¿Necesita una mano en los servicios de desarrollo web o diseño web? ¡Siéntete libre de contactarnos!

Editor: Amrutha