Em HTML, os controles (tais como button, input… ) de formulário geralmente possuem o atributo opcional disabled, que quando usado faz com que o usuário fique impossibilitado de usá-los. Isso significa que o usuário não pode alterar campos de entrada desabilitados (disabled) ou usar botões desabilitados.
O atributo disabled se aplica apenas aos elementos dentro do formulário e não ao formulário inteito. Sim, a tag <form> em si não possui um atributo disabled. Por isso, não é possível desabilitar diretamente um formulário HTML inteiro, incluindo todos os seus elementos filhos. Mas temos uma boa alternativa.
The disabled attribute can be used on the following elements:
| Elementos | Attributo |
|---|---|
| <button> | disabled |
| <fieldset> | disabled |
| <input> | disabled |
| <optgroup> | disabled |
| <option> | disabled |
| <select> | disabled |
| <textarea> | disabled |
Solução Alternativa: O Elemento <fieldset>
Felizmente, existe uma solução simples para contornar essa limitação: o uso do elemento <fieldset>. Se esse elemento tiver o atributo disabled, todos os controles de formulário descendentes também serão desabilitados. O elemento <fieldset> é normalmente usado para agrupar vários controles dentro de um formulário, mas é perfeitamente válido utilizá-lo sozinho em um formulário para desabilitar todos os seus elementos. Você pode, opcionalmente, adicionar um elemento <legend> para descrever seu grupo de formulário.
Exemplo de Uso
Aqui está um exemplo de como usar o <fieldset> para desabilitar todos os controles dentro de um formulário:
<form> <fieldset disabled> <!-- seus controles de formulário --> <button>Desabilitado quando o fieldset está desabilitado</button> </fieldset> </form>Provavelmente, você já tem algum estilo CSS que se aplica aos controles de formulário desabilitados. Esses estilos geralmente também funcionam dentro de um <fieldset> sem a necessidade de ajustes. Apenas certifique-se de usar os seletores corretos, como button:disabled em vez de button[disabled].
Ajustes de Estilo para o <fieldset>
Por padrão, a maioria dos navegadores aplica uma borda e alguns espaçamentos aos elementos <fieldset>. Isso faz sentido quando são usados para agrupar diferentes controles de formulário. No entanto, para este caso de uso, provavelmente não queremos esse estilo padrão. Você pode remover os espaçamentos e a borda com o CSS comum, como padding:0; margin:0; border-width:0.
Uma solução ainda melhor é definir display: contents, o que faz com que o <fieldset>—mas não seus descendentes—seja visualmente removido. Isso resolve os problemas de espaçamento e ajusta corretamente para margens colapsadas.
fieldset { display: contents; }Essa abordagem garante que seus formulários sejam desabilitados de forma eficaz, mantendo a flexibilidade para personalizar a aparência de acordo com suas necessidades.