Como desativar os campos de formulário usando CSS

Um formulário HTML é um componente de um documento HTML freqüentemente usado para obter a entrada do usuário. Os formulários HTML consistem em componentes, como campos de entrada, campos de login, listas de verificação, botões de rádio, um botão de envio, menus e muitos outros. No entanto, em alguns cenários, os usuários desejam desativar ou ocultar o campo de entrada para cumprir o pré -requisito, como verificar uma caixa. No CSS, os eventos podem ser desativados utilizando o “desabilitado" e "Ponteiro-eventos”Propriedades.

Este artigo explicará os métodos para desativar o campo de formulário usando CSS.

Como desativar os campos de formulário usando CSS?

Para desativar qualquer campo de formulário em HTML, os usuários podem utilizar a propriedade CSS ou o “desabilitado”Atributo. Para esse fim, listamos os métodos para desativar os campos do formulário:

• Método 1: Como desativar os campos de formulário usando CSS “Evento de ponteiro" Propriedade?
• Método 2: Como desativar o campo de formulário usando “desabilitado”Atributo?

Método 1: Como desativar os campos de formulário usando a propriedade "ponteiro-evento" CSS?

Para desativar o campo de formulário usando a propriedade CSS, crie um formulário usando as instruções fornecidas.

• Primeiro, adicione um “”Elemento para criar um formulário.
• Em seguida, use o “”Elemento para incorporar o rótulo no formulário e o“”O elemento será usado para especificar campos de formulário.
• O "para”Atributo anexou o rótulo com o campo de entrada através de“eu ia”.
• O tipo de entrada como “texto”É usado para definir o campo de texto no formulário.
• O tipo de entrada “enviar”É utilizado para adicionar um botão ao formulário.

Por exemplo, criamos três campos de texto diferentes e três botões:

Digite seu primeiro nome




Digite seu sobrenome




Entre na sua idade

Desative o campo de formulário através do CSS
Agora, desative o campo de formulário usando a propriedade CSS. Por exemplo, desativaremos o campo de formulário cujo tipo de entrada é “número”. Para esse fim, acesse o campo de formulário através de “entrada [tipo = número]”E defina o valor do CSS“Ponteiro-eventos"Propriedade como"nenhum" como se segue:

entrada [tipo = número]
Ponteiro-eventos: nenhum;

Da saída abaixo, você pode ver que o “Entre na sua idade”O campo está completamente desativado:

Vamos seguir em direção à próxima seção para desativar o campo de formulário através do atributo html “desabilitado”.

Método 2: Como desativar o campo de formulário usando o atributo “desativado”?

Para desativar o campo de formulário usando o “desabilitado”Atributo, siga as instruções dadas:

• Adicione o elemento com o “contente”Nome da classe para criar um formulário:
• Ajuste o campo de formulário de acordo com a instrução discutida na primeira seção:
• Aplicar o "desabilitado”Atributo ao campo de formulário que você deseja desativar. Por exemplo, iremos desativar o “Próximo" botão:

Digite seu primeiro nome




Digite seu sobrenome




Entre na sua idade

Saída

Aplique CSS a .classe de conteúdo
““.contente”A classe é utilizada para acessar o formulário. No ".Classe ”, defina a propriedade“preenchimento”Para adicionar espaço em torno de campos de formulário:

.contente
preenchimento: 10px;

Elemento de entrada de estilo em que "type = submeter"

input [type = submit]
Largura: 100px;
preenchimento: 5px;
Background-Color: RGB (200, 158, 224);
Radio de fronteira: 5px;

O código acima acessará o elemento de entrada em que o tipo é igual para enviar. Aplique o estilo em campos selecionados, utilizando as propriedades abaixo mencionadas:

• ““largura”É usado para definir a largura dos campos selecionados.
• ““preenchimento”É usado para definir espaço em torno dos elementos selecionados.
• O "cor de fundo”A propriedade é utilizada para definir o fundo.
• ““Radio de fronteira”Propriedade define as bordas dos elementos selecionados.

Elemento de estilo “desativado”

Entrada: desativado
Shadow de caixa: 1px 1px 1px 1px RGB (230, 229, 229);
fronteira: 1px Solid #999999;
Background-Color: #ddd1d1;
Cor: #666666;

Estilo o elemento em que o “desabilitado”O atributo é aplicado usando as múltiplas propriedades:

• ““Sombra da caixa”Define uma sombra ao redor do elemento.
• ““fronteira”A propriedade é usada para definir a borda ao redor do elemento desativado.

Saída

Fornecemos os métodos para desativar o campo de formulário usando CSS.

Conclusão

Para desativar campos de formulário usando CSS, os usuários podem usar a propriedade CSS “Ponteiro-eventos”Ou o atributo html“desabilitado”. Para desativar o campo de formulário, crie um formulário e defina a propriedade CSS “Pointer-Events” como “nenhum”Em um tipo de entrada específico para desativá -lo. No entanto, os usuários podem usar diretamente o atributo "desativado" em um campo de formulário específico para desativá -lo. Este post explicou o método para desativar o campo de formulário usando CSS.