Como bloquear input em HTML?

Bloqueando a entrada de dados em formulários HTML: readonly vs. disabled

Controlar a entrada de dados em formulários HTML é crucial para criar uma experiência de usuário eficiente e segura. Muitas vezes, precisamos impedir que o usuário altere certos campos, seja para exibir informações apenas para leitura, ou para desabilitar completamente um elemento do formulário. Para isso, o HTML oferece dois atributos: readonly e disabled. Embora ambos impeçam a edição direta do campo, eles se comportam de maneira diferente e sua escolha depende do contexto.

readonly (Somente leitura):

Este atributo torna o campo inalterável pelo usuário. No entanto, o valor do campo é ainda enviado ao servidor quando o formulário é submetido. Isso é ideal para situações em que você precisa exibir um valor preenchido previamente, permitindo que o usuário visualize a informação, mas evitando que a altere acidentalmente. Um bom exemplo seria um campo de "Data de Nascimento" que já foi preenchida pelo próprio usuário em uma etapa anterior do processo e que agora só deve ser visualizada.

Exemplo:

<form>
  <label for="dataNascimento">Data de Nascimento:</label>
  <input type="date" id="dataNascimento" name="dataNascimento" value="2000-01-01" readonly>
  <button type="submit">Enviar</button>
</form>

Neste exemplo, o usuário não pode modificar a data, mas o valor "2000-01-01" será enviado ao servidor.

disabled (Desabilitado):

Este atributo desabilita completamente o elemento. O usuário não pode interagir com ele de forma alguma, e o valor do campo não é enviado ao servidor quando o formulário é submetido. Utilize disabled quando o campo não deve ser considerado no processamento do formulário, ou quando precisa ser temporariamente ocultado até que alguma condição seja atendida, por exemplo, via JavaScript. Um exemplo seria um campo de "Confirmação de senha" que só é ativado após o preenchimento do campo "Senha".

Exemplo:

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" disabled>
  <button type="submit">Enviar</button>
</form>

Neste exemplo, o campo "Nome" está desabilitado e seu valor não será enviado. Visualmente, o campo geralmente aparece com uma aparência "cinza" ou desativada.

Considerações importantes:

• Estilo: Embora funcionalmente diferentes, readonly e disabled podem apresentar estilos visuais semelhantes em alguns navegadores. Para garantir uma apresentação consistente, é recomendado adicionar estilos CSS para diferenciar visualmente os campos.
• JavaScript: Ambos os atributos podem ser manipulados dinamicamente com JavaScript, permitindo que você altere o estado de um campo com base em ações do usuário ou eventos específicos. Por exemplo, você pode usar JavaScript para habilitar um campo após a validação de outro.
• Acessibilidade: Ao utilizar disabled, certifique-se de que a desabilitação seja clara para usuários com deficiência, utilizando rótulos e mensagens alternativas apropriadas.

Em resumo, a escolha entre readonly e disabled depende da sua necessidade específica. Se você precisa apenas impedir que o usuário altere o valor, mas deseja que ele seja enviado ao servidor, utilize readonly. Se precisa desabilitar completamente o campo, impedindo sua interação e envio, utilize disabled. A compreensão dessas diferenças é crucial para o desenvolvimento de formulários robustos e eficazes.