Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Atributos para Elementos de Entrada | Tabelas e Formulários
Essenciais de HTML

book
Atributos para Elementos de Entrada

Já sabemos como construir formulários com entradas e rótulos. Agora, vamos considerar outros atributos úteis para elementos de entrada que melhoram sua funcionalidade e usabilidade.

Atributos Comuns para Elementos de Entrada

Placeholder

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

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

Name

name especifica o nome do campo de entrada, que é usado para identificar os dados de entrada quando o formulário é enviado. Cada campo de entrada dentro de um formulário deve ter um atributo de nome único.

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

Value

value define o valor inicial ou padrão do campo de entrada. Pré-preenche o campo de entrada com um valor específico quando a página é carregada.

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

Required

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.

hml
<input type="password" required />

Disabled

disabled desativa 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.

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

Readonly

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.

html
<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éricos. Útil para impor restrições em entradas numéricas, como idade ou quantidade.

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

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

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Attributes for Input Elements</title>
<meta charset="UTF-8" />
</head>
<body>
<form onsubmit="return false">
<label for="mail">Email:</label>
<input type="email" id="mail" name="mail" placeholder="Enter your email" required><br>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="phone-number">Phone number:</label>
<input type="tel" id="phone-number" name="phone-number" value="+1 (484) 298-9732"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<label for="city">City:</label>
<input type="text" id="city" name="city" value="New York" disabled><br>
<label for="country">Country:</label>
<input type="text" id="country" name="country" value="USA" readonly><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="21" max="99"><br>
<button type="submit">Send Form</button>
</form>
</body>
</html>

Tutorial em Vídeo

1. Qual atributo fornece uma dica ou exemplo de texto dentro de um campo de entrada, orientando os usuários sobre o tipo de entrada esperada?

2. Qual atributo especifica o nome do campo de entrada, que é usado para identificar os dados de entrada quando o formulário é enviado?

3. Qual atributo impede o envio do formulário se o campo obrigatório estiver vazio?

question mark

Qual atributo fornece uma dica ou exemplo de texto dentro de um campo de entrada, orientando os usuários sobre o tipo de entrada esperada?

Select the correct answer

question mark

Qual atributo especifica o nome do campo de entrada, que é usado para identificar os dados de entrada quando o formulário é enviado?

Select the correct answer

question mark

Qual atributo impede o envio do formulário se o campo obrigatório estiver vazio?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 7
We use cookies to make your experience better!
some-alt