CSS desativado

CSS desativado

Uma folha de estilo em cascata é uma parte importante da criação e criação de uma página da web. "Disabled" é um seletor no CSS e é usado nas tags para desativar os elementos do HTML. Este seletor é aplicado aos formulários HTML, incluindo os campos de texto, botões, caixas de seleção, etc. Neste artigo, veremos como o recurso desativado é aplicado aos diferentes elementos em HTML.

Campo de texto desativado

Um campo de texto é uma seção na qual o usuário insere sua entrada que deve ser armazenada no site. Este campo de texto é desenvolvido como um campo de texto ativado para obter o valor do usuário. Mas, em alguns casos, para restringir a entrada do usuário em relação a qualquer rótulo ou informações do usuário, podemos precisar desativar alguns campos de texto. Neste exemplo, veremos como o campo de texto pode ser desativado através de HTML e CSS.

Iniciamos o código com a seção da cabeça. O título é dado à página da web em que estamos trabalhando. Depois disso, usamos a tag de estilo para adicionar todas as propriedades de estilo ao conteúdo que criamos no corpo HTML. Além do campo de texto de desativação simples, também usamos alguns itens adicionais para elaborar facilmente o trabalho e a funcionalidade dos itens desativados e ativados.

Na tag de estilo, temos primeiro o campo de texto de entrada ativado. Criamos três campos de texto na parte html-dois são ativados enquanto o terceiro está desativado. O tipo de entrada para o campo é "texto". Isso significa que ele só aceitará um texto. Então, usamos as tags CSS para os campos de texto ativados.

1
Input [type = text]: ativado

Isso irá estilizar apenas os campos de texto que estão definidos para serem ativados. Aplicamos o cinza claro como a cor de fundo para os dois campos. Da mesma forma, após o campo de texto ativado, o CSS é declarado para o campo de texto desativado. Para discriminar o campo de texto desativado do que a cor, a cor do fundo é cinza escuro e a cor da fonte é definida como branca.

Para aplicar alguns efeitos em todos os campos, ativados ou desativados, usamos apenas a palavra "entrada". Ao fazer isso, os estilos são aplicados a todos os três campos de texto. O primeiro efeito é o margin-top. Esse recurso de "margem" é a área excedida da forma. Por exemplo, o campo de texto retangular tem a margem de 10 pixels da direção superior. Isso significa que na direção superior, o campo é de 10 pixels para cima.

1
2
3
entrada
Margin-top: 10px;

Da mesma forma, após a margem, a borda da forma também é aplicada com o tamanho da borda e cor que é definida como marrom. Para o tamanho do texto inserido no campo de texto, para tornar o texto facilmente legível, definimos o tamanho da fonte como 16 pixels.

1
2
3
4
5
borda: 1px marrom sólido;
Size da fonte: 16px;

Outro recurso usado no CSS é todo o conteúdo criado no corpo HTML para aparecer no centro da página da web. Simplesmente usamos a tag para o corpo. Isso ocorre porque o conteúdo é criado na seção corporal das tags html. Como todo o conteúdo está no tipo de texto, simplesmente usamos o alinhamento de texto ao centro.

1
2
3
4
5
Corpo
Alinhamento de texto: centro;

Ao longo do campo de texto, há um título ou um rótulo que é dado para demonstrar o objetivo do campo de texto, ou que os dados devem ser inseridos no campo de texto. Esta etiqueta também é estilizada através de CSS. O peso de uma fonte é a propriedade aplicada ao texto para torná -lo ousado, itálico, etc. Aqui, selecionamos o peso como ousado.

1
Intensidade da fonte: Negrito;

Agora, em direção à seção corporal de HTML, o título é dado usando o

marcação. Como os campos e botões de texto são a parte de um formulário, a tag é aplicada aqui. Declaramos uma única tag para o campo de texto ativado.

1
2
3


O rótulo é dado como "idade". O campo de texto é declarado através do tipo de entrada. Valor é a seção que contém o nome ou o espaço reservado para carregar qualquer palavra que seja exibida no campo de texto. O
A tag é para o intervalo, que muda para a próxima linha. Agora, o campo de texto desativado é declarado usando o rótulo "endereço". Depois de fornecer o texto de entrada, declaramos "desativados" para tornar o campo de texto desativado.

1

Depois disso, o corpo da forma está fechado. As tags HTML também estão fechadas.

Quando executamos o arquivo no navegador, você verá que a saída se parece com a imagem anexada. Todos os três rótulos junto com os campos de texto são exibidos. Dois deles estão ativados, enquanto o terceiro está desativado. Todo o estilo CSS que fizemos são aplicados ao conteúdo. O campo desativado está escuro para discriminar entre o habilitado e o desativado.

Agora, veremos como esse formulário funciona. Podemos inserir os valores nos dois primeiros campos à medida que estão habilitados. O nome e a idade são inseridos nos campos.

Agora, vemos o campo de texto desativado. Você verá que não pode ser editado como nos campos anteriores.

Área de texto desativada

Usaremos uma área de texto para torná -la desativada como no campo. Todos os códigos para a cabeça e o corpo do HTML são aplicados da mesma maneira. Um novo botão de recurso é estilizado no corpo. Isso inclui a cor, a altura e a largura do botão.

Dentro da seção corporal do HTML, uma área de texto é criada. Definimos as linhas e colunas para formar um retângulo especificado para o propósito de escrita. A palavra "desativada" é adicionada à tag para desativar o funcionamento da área de texto.

1

Além disso, adicionamos um botão à página da web; não será desativado. Depois disso, um formulário é fechado após a tag.

Quando a página da web é executada no navegador, uma área de texto é criada com a instrução padrão que foi fornecida quando usamos a etiqueta da área de texto dentro do corpo HTML. Isso não pode ser editado ou removido por causa dos deficientes que trabalham.

Conclusão

Desativado é um recurso usado para desativar alguns funcionamentos do conteúdo HTML. Falando sobre seu exemplo, é aplicado ao formulário. Vimos principalmente que, ao preencher qualquer formulário no site, alguns campos não podem ser editados de acordo com as necessidades de nossa elegibilidade. Isso é feito deixando esse campo desativado. Explicamos os dois elementos que podem ser desativados nas tags HTML e CSS, que são os campos de texto e a área de texto. Ambos os elementos fazem parte da tag de formulário, então a criação do campo de texto e a área de texto são feitos dentro da tag do formulário. Caso contrário, apenas o texto aparecerá na página da web.