Em HTML, controles de formulário, como inputs, podem estar em diferentes estágios ou condições como um estado focused, estado readonly ou estado disabled. O primeiro estado seria considerado o estado default. O estado padrão de um campo de entrada de endereço de email é um campo em branco. É assim que o campo de entrada de email aparece quando é renderizado pela primeira vez na página.

<input type="email" name="email" id="email" />

Quando o usuário clica em um controle de formulário ou o seleciona com a tecla tab do teclado, isso significa que ele está no estado focused. Quando um input está no estado focused, a maioria dos navegadores mostrará uma borda azul destacada ao redor do input. Mas você pode escolher adicionar estilos adicionais em CSS. Clique em qualquer parte do espaço em branco na janela de visualização e depois pressione a tecla tab para ver o estado de foco. Para ver as pré-visualizações, você precisará ativar o editor interativo.

<input type="email" name="email" id="email" />

Outro estado do formulário é o estado disabled. Este estado mostra aos usuários que um input não pode ser focado ou ativado. Ative o editor interativo e tente clicar no campo de entrada de email e você notará que ele não receberá mais foco.

<input disabled type="email" name="email" id="email" />

Semelhante ao estado focused, você pode optar por adicionar estilos adicionais para o estado disabled usando CSS. Outro tipo de estado de formulário é o estado readonly. É quando um controle de formulário, como um input, não é editável pelo usuário. Here is an example of setting an email input to read-only. O atributo value é usado para definir o valor exibido dentro do campo de entrada. Ative o editor interativo e tente editar o valor atual de example@email.com na janela de visualização e você perceberá que não é possível.

<input
  readonly
  type="email"
  name="email"
  id="email"
  value="example@email.com"
/>

Uma diferença chave entre o estado disabled e o estado readonly é que readonly pode receber foco enquanto o estado disabled não pode. Entender os diferentes estados do formulário é importante porque eles garantem uma experiência do usuário fluida ao fornecer feedback claro e orientação durante o tratamento de erros.