Já sabemos como construir formulários com campos de entrada e rótulos. Agora, considere outros atributos úteis para elementos de entrada que ampliam sua funcionalidade e usabilidade.

Atributos Comuns para Elementos de Entrada

Placeholder

placeholder fornece uma dica ou texto de exemplo dentro do campo de entrada, orientando os usuários sobre o tipo de dado esperado. Útil para fornecer contexto ou instruções aos usuários antes de inserirem dados.

<input type="text" placeholder="Enter your email" />

Name

name especifica o nome do campo de entrada, utilizado para identificar os dados inseridos quando o formulário é enviado. Cada campo de entrada dentro de um formulário deve possuir um atributo name exclusivo.

<input type="text" name="username" />

Value

value define o valor inicial ou padrão do campo de entrada. Preenche o campo de entrada com um valor específico ao carregar a página.

<input type="tel" value="+1 (484) 298-9732" />

Obrigatório

required especifica que o campo de entrada deve ser preenchido antes que o formulário possa ser enviado. Impede o envio do formulário se o campo obrigatório estiver vazio.

<input type="password" required />

Desabilitado

disabled desabilita o campo de entrada, impedindo que os usuários interajam com ele ou insiram dados. Útil para exibir campos de entrada somente leitura ou inativos.

<input type="text" value="New York" disabled />

Somente leitura

readonly torna o campo de entrada somente leitura, permitindo que os usuários vejam o valor, mas não o modifiquem. Semelhante ao atributo disabled, mas ainda permite que o campo seja focado e selecionado.

<input type="text" value="USA" readonly />

Min e Max

min e max especificam os valores mínimo e máximo permitidos para campos de entrada numérica. Útil para impor restrições em entradas numéricas, como idade ou quantidade.

<input type="number" min="21" max="99" />

Exemplo: Considere um exemplo que inclui todos os atributos e elementos necessários para o formulário.

Tutorial em Vídeo