CSS discapacitado

CSS discapacitado

Una hoja de estilo en cascada es una parte importante de la creación y el diseño de una página web. "Discapaced" es un selector en CSS y se usa en las etiquetas para deshabilitar los elementos de HTML. Este selector se aplica a los formularios HTML, incluidos los campos de texto, los botones, las casillas de verificación, etc. En este artículo, veremos cómo se aplica la función de discapacitado a los diferentes elementos en HTML.

Campo de texto deshabilitado

Un campo de texto es una sección en la que el usuario ingresa su entrada que se almacenará en el sitio web. Este campo de texto se desarrolla como un campo de texto habilitado para obtener el valor del usuario. Pero en algunos casos, para restringir la entrada del usuario con respecto a cualquier etiqueta o información del usuario, es posible que necesitemos deshabilitar algunos campos de texto. En este ejemplo, veremos cómo el campo de texto se puede deshabilitar a través de HTML y CSS.

Comenzamos el código con la sección principal. El título se da a la página web en la que estamos trabajando. Después de eso, usamos la etiqueta de estilo para agregar todas las propiedades de estilo al contenido que creamos en el cuerpo HTML. Además del campo de texto sin discapacitado simple, también usamos algunos elementos adicionales para elaborar fácilmente el trabajo y la funcionalidad de los elementos deshabilitados y habilitados.

En la etiqueta de estilo, primero tenemos el campo de texto de entrada habilitado. Creamos tres campos de texto en la porción HTML dos están habilitados mientras el tercero está deshabilitado. El tipo de entrada para el campo es "texto". Significa que solo aceptará un texto. Entonces, usamos las etiquetas CSS para los campos de texto habilitados.

1
Entrada [type = text]: habilitado

Esto peinará solo aquellos campos de texto que están configurados para estar habilitados. Aplicamos el gris claro como color de fondo a ambos campos. Del mismo modo, después del campo de texto habilitado, el CSS se declara para el campo de texto deshabilitado. Para discriminar el campo de texto deshabilitado desde el habilitado, el color de fondo es de color gris oscuro y el color de fuente está configurado en blanco.

Para aplicar algunos efectos en todos los campos, ya sea habilitado o deshabilitado, usamos solo la palabra "entrada". Al hacer esto, los estilos se aplican a los tres campos de texto. El primer efecto es el margen-top. Esta característica de "margen" es el área excedida de la forma. Por ejemplo, el campo de texto rectangular tiene el margen de 10 píxeles desde la dirección superior. Significa que en la dirección superior, el campo es de 10 píxeles hacia arriba.

1
2
3
aporte
margen-top: 10px;

Del mismo modo, después del margen, el borde de la forma también se aplica con el tamaño del borde y el color que se establece como marrón. Para el tamaño de texto que se ingresa en el campo de texto, para que el texto sea fácilmente legible, establecemos el tamaño de la fuente en 16 píxeles.

1
2
3
4
5
borde: 1px marrón sólido;
tamaño de fuente: 16px;

Otra característica que se usa en CSS es todo el contenido que se crea en el cuerpo HTML para aparecer en el centro de la página web. Simplemente usamos la etiqueta para el cuerpo. Esto se debe a que el contenido se crea en la sección del cuerpo de las etiquetas HTML. Dado que todo el contenido está en el tipo de texto, simplemente usamos la alineación de texto al centro.

1
2
3
4
5
Cuerpo
Text-Align: Center;

A lo largo del campo de texto, hay un encabezado o una etiqueta que se da para demostrar el propósito del campo de texto, o que los datos se ingresarán en el campo de texto. Esta etiqueta también está diseñada a través de CSS. El peso de una fuente es la propiedad que se aplica al texto para hacerlo audaz, en cursiva, etc. Aquí, seleccionamos el peso como audaz.

1
Font-Weight: Bold;

Ahora, dirigiéndose hacia la sección del cuerpo de HTML, el encabezado se da al usar el

etiqueta. Dado que los campos y los botones de texto son parte de un formulario, la etiqueta se aplica aquí. Declaramos una sola etiqueta para el campo de texto habilitado.

1
2
3


La etiqueta se da como "edad". El campo de texto se declara a través del tipo de entrada. El valor es la sección que contiene el nombre o el marcador de posición para llevar cualquier palabra que se muestre en el campo de texto. El
La etiqueta es para el descanso, que cambia a la siguiente línea. Ahora, el campo de texto deshabilitado se declara utilizando la etiqueta "Dirección". Después de proporcionar el texto de entrada, declaramos "deshabilitado" para que el campo de texto se deshabilite.

1

Después de eso, el cuerpo de la forma está cerrado. Las etiquetas HTML también están cerradas.

Cuando ejecutamos el archivo en el navegador, verá que la salida se parece a la imagen adjunta. Se muestran las tres etiquetas junto con los campos de texto. Dos de ellos están habilitados, mientras que el tercero está deshabilitado. Todo el estilo CSS que hicimos se aplica al contenido. El campo deshabilitado está oscuro para discriminar entre el habilitado y el desactivado.

Ahora veremos cómo funciona este formulario. Podemos ingresar los valores a los dos primeros campos a medida que están habilitados. El nombre y la edad se ingresan en los campos.

Ahora vemos el campo de texto deshabilitado. Verá que no se puede editar como en los campos anteriores.

Área de texto deshabilitada

Usaremos un área de texto para que se desactive como en el campo. Todos los códigos para la cabeza y el cuerpo del HTML se aplican de la misma manera. Se diseña un nuevo botón de característica en el cuerpo. Esto incluye el color, la altura y el ancho del botón.

Dentro de la sección del cuerpo del HTML, se crea un área de texto. Definimos las filas y columnas para formar un rectángulo especificado para el propósito de escritura. La palabra "deshabilitado" se agrega a la etiqueta para deshabilitar el funcionamiento del área de texto.

1

Además de esto, agregamos un botón a la página web; no será deshabilitado. Después de eso, un formulario está cerrado después de la etiqueta.

Cuando la página web se ejecuta en el navegador, se crea un área de texto con la declaración predeterminada que se proporcionó cuando utilizamos la etiqueta del área de texto dentro del cuerpo HTML. Esto no se puede editar o eliminar debido al trabajo discapacitado.

Conclusión

Desactivado es una característica que se utiliza para deshabilitar algunos trabajos de los contenidos HTML. Hablando de su ejemplo, se aplica al formulario. Hemos visto principalmente que al llenar cualquier formulario en el sitio web, algunos campos no se pueden editar de acuerdo con las necesidades de nuestra elegibilidad. Esto se hace haciendo que ese campo se discapee. Explicamos los dos elementos que se pueden deshabilitar en las etiquetas HTML y CSS que son los campos de texto y el área de texto. Ambos elementos son parte de la etiqueta de formulario, por lo que la creación del campo de texto y el área de texto se realizan dentro de la etiqueta de formulario. De lo contrario, solo aparecerá el texto en la página web.