Cómo deshabilitar los campos de formulario usando CSS

Un formulario HTML es un componente de un documento HTML que se usa con frecuencia para obtener la entrada del usuario. Los formularios HTML consisten en componentes, como campos de entrada, campos de inicio de sesión, listas de verificación, botones de radio, un botón de envío, menús y muchos más. Sin embargo, en algunos escenarios, los usuarios desean deshabilitar u ocultar el campo de entrada para cumplir con el requisito previo, como verificar una caja. En CSS, los eventos se pueden deshabilitar utilizando el "desactivado" y "eventos de puntero" propiedades.

Este artículo explicará los métodos para deshabilitar el campo Formulario utilizando CSS.

Cómo deshabilitar los campos de formulario usando CSS?

Para deshabilitar cualquier campo de formulario en HTML, los usuarios pueden utilizar la propiedad CSS o la "desactivado" atributo. Para este propósito, hemos enumerado los métodos para deshabilitar los campos de formulario:

• Método 1: Cómo deshabilitar los campos de formulario utilizando CSS "puta" Propiedad?
• Método 2: Cómo deshabilitar el campo Formulario usando "desactivado" Atributo?

Método 1: Cómo deshabilitar los campos de formulario utilizando la propiedad CSS "Pointer-Event"?

Para deshabilitar el campo Formulario utilizando la propiedad CSS, cree un formulario utilizando las instrucciones dadas.

• Primero, agregue un "Elemento para crear un formulario.
• A continuación, usa el ""Elemento para incrustar la etiqueta en la forma, y ​​el"El elemento se utilizará para especificar los campos de formulario.
• El "para"El atributo adjunta la etiqueta con el campo de entrada a través de"identificación".
• El tipo de entrada como "texto"Se usa para establecer el campo de texto en el formulario.
• El tipo de entrada "entregar"Se utiliza para agregar un botón al formulario.

Por ejemplo, hemos creado tres campos de texto y tres botones diferentes:

Ponga su primer nombre




Ingrese su apellido




Introduzca su edad

Desactivar el campo de formulario a través de CSS
Ahora, deshabilite el campo de formulario utilizando la propiedad CSS. Por ejemplo, deshabilitaremos el campo de formulario cuyo tipo de entrada es "número". Para este propósito, acceda al campo Formulario a través de "Entrada [Tipo = Número]"Y establezca el valor del CSS"eventos de puntero"Propiedad como"ninguno" de la siguiente manera:

entrada [type = number]
Pointer-Events: Ninguno;

De la siguiente salida, puede ver que el "Introduzca su edadEl campo está completamente deshabilitado:

Avancemos hacia la siguiente sección para deshabilitar el campo Formulario a través del atributo HTML "desactivado".

Método 2: Cómo deshabilitar el campo Formulario utilizando el atributo "deshabilitado"?

Para deshabilitar el campo de formulario usando el "desactivado"Atributo, revise la instrucción dada:

• Agregue el elemento con el "contenido"Nombre de clase para crear un formulario:
• Ajuste el campo Formulario de acuerdo con la instrucción discutida en la primera sección:
• Aplica el "desactivado"Atributo al campo Formulario que desea deshabilitar. Por ejemplo, deshabilitaremos el "Próximo" botón:

Ponga su primer nombre




Ingrese su apellido




Introduzca su edad

Producción

Aplicar CSS a .clase de contenido
".contenidoLa clase se utiliza para acceder al formulario. En el ".Clase de contenido ", configure la propiedad"relleno"Para agregar espacio alrededor de los campos de formulario:

.contenido
relleno: 10px;

Elemento de entrada de estilo donde "type = enviar"

Entrada [type = enviar]
Ancho: 100px;
relleno: 5px;
Color de fondo: RGB (200, 158, 224);
Border-Radius: 5px;

El código anterior accederá al elemento de entrada donde el tipo es igual a enviar. Aplicar el estilo en los campos seleccionados utilizando las propiedades mencionadas a continuación:

• "ancho"Se usa para establecer el ancho de los campos seleccionados.
• "relleno"Se usa para establecer espacio alrededor de los elementos seleccionados.
• El "color de fondoLa propiedad se utiliza para establecer el fondo.
• "radio fronterizoLa propiedad establece los bordes de los elementos seleccionados.

Elemento de estilo "Desactivado"

Entrada: discapacitado
Shadow de caja: 1PX 1PX 1PX 1PX RGB (230, 229, 229);
borde: 1px sólido #9999999;
Color de fondo: #DDD1D1;
Color: #666666;

Estilizar el elemento en el que el "desactivadoEl atributo se aplica mediante el uso de múltiples propiedades:

• "sombra de la caja"Establece una sombra alrededor del elemento.
• "bordeLa propiedad se utiliza para establecer el borde alrededor del elemento deshabilitado.

Producción

Hemos proporcionado los métodos para deshabilitar el campo de formulario utilizando CSS.

Conclusión

Para deshabilitar los campos de formulario utilizando CSS, los usuarios pueden usar la propiedad CSS "eventos de puntero"O el atributo HTML"desactivado". Para deshabilitar el campo de formulario, cree un formulario, luego establezca la propiedad CSS "Pointer-Events" como "ninguno"En un tipo de entrada específico para deshabilitarlo. Sin embargo, los usuarios pueden usar directamente el atributo "deshabilitado" en un campo de formulario específico para deshabilitarlo. Esta publicación explicó el método para deshabilitar el campo de formulario usando CSS.