Atributos HTML <Input>

Este artigo discute sobre os atributos de entrada HTML . Existem vários atributos HTML que podem ser aplicados ao elemento <input> . Este capítulo explica esses atributos em detalhes.

Atributo de valor

Quando um campo de entrada é acessado por meio de atributos de entrada HTML , seu valor é inserido da seguinte forma:

Os seguintes campos têm valores padrão (iniciais):

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fname">Tesla owner first name:</label><br>
<input type="text" id="fname" name="fname" value="Elon"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Musk">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


Atributo desativado

Nos atributos de entrada HTML, o atributo de entrada desabilitada significa que os campos de entrada devem ser desabilitados para que não possam ser preenchidos.

Quando um campo de entrada está desabilitado , ele é inútil e não pode ser clicado.

Os envios de formulários não enviarão o valor dos campos de entrada desabilitados!

Há um campo de entrada desabilitado:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fname">Tesla owner first name:</label><br>
<input type="text" id="fname" name="fname" value="ELon" is disabled here><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Musk">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O atributo desativado também pode ser aplicado aos botões aqui está um exemplo de como:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<p>User Name: <input type="text" name="uname"></p>
<p>
<input type="submit" value="Submit">
<input type="button" value="Check " disabled>
</p>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo somente leitura

Em atributos de entrada HTML , input readonly indica um campo de entrada somente leitura.

Ao contrário dos campos de entrada editáveis, os campos de entrada somente leitura não podem ser personalizados (embora os usuários possam destacá-los e copiar seu conteúdo).

Ao enviar um formulário, o valor de um campo de entrada somente leitura será enviado.

O seguinte campo de entrada é somente leitura:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fname">Tesla owner first name:</label><br>
<input type="text" id="fname" name="fname" value="Elon" is readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="musk">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo de tamanho

O atributo de tamanho de entrada nos atributos de entrada HTML indica a largura de um campo de entrada renderizado em caracteres. Define o tamanho em caracteres do campo de entrada.

O tamanho é definido como 20 por padrão.

É imperativo observar que o atributo tamanho funciona com os seguintes tipos de entrada: texto, pesquisa, tel, url, e-mail e senha.

Para definir a largura de um campo de entrada, siga estas etapas:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fname">Owner First Name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributos mínimo e máximo

Os atributos de entrada HTML input Min e Max indicam os valores mínimo e máximo para os campos de entrada.

Os tipos de entrada para os atributos min e max consistem em número, intervalo, data, data-hora-local, mês, hora e semana.

Você pode criar um intervalo de valores legais usando os atributos max e min em conjunto uns com os outros.

Você pode definir uma data máxima, uma data mínima e um intervalo de valores legais para conseguir isso:

Example

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo do atributo max e min no campo de texto:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<form>
<div>
<label for="choose">Which book you prefer a Ulysses or a lolita?</label>
<input type="text" id="choose" name="fav" required minlength="7" maxlength="7">
</div>
<div>
<button>Submit</button>
</div>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo comprimento máximo

O comprimento máximo de um campo de entrada é controlado pelo atributo input maxlength nos atributos de entrada HTML . Indica quantos caracteres são permitidos em um campo de entrada.

Maxlength define o número máximo de caracteres que o campo de entrada permitirá. Apesar disso, esse atributo não fornece feedback.

Você deve escrever código JavaScript se quiser alertar o usuário.

O comprimento máximo de um campo de entrada pode ser definido da seguinte forma:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fname">Owner first name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo Múltiplo

Há um atributo múltiplo de entrada que significa que um usuário tem permissão para inserir mais de um valor em um campo de entrada.

Vários atributos funcionam com e-mail e tipos de entrada de arquivo em formulários HTML.

Vários valores podem ser inseridos em um campo de upload de arquivo:

Example

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Vários atributos podem ser definidos para apenas o tipo que seria selecionado aqui está um exemplo:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<label for="picture">Choose your picture:</label>
<input type="file" id="picture" name="picture" accept="image/png, image/jpeg">
<input type="submit" value="submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo de espaço reservado

Em atributos de entrada HTML , os espaços reservados de entrada indicam uma breve descrição do valor esperado de um campo (um valor de amostra ou uma breve descrição de seu formato esperado).

Uma dica curta aparece antes que o usuário insira um valor no campo de entrada.

Os tipos de entrada suportados pelo atributo de espaço reservado incluem:

  1. Texto
  2. Procurar
  3. url
  4. Tel
  5. E-mail
  6. Senha

Há um texto de espaço reservado no campo de entrada:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><br><form><br><label for="phone">Enter a phone number:</label><br><br><input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br></form><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo padrão:

Uma expressão regular é necessária quando o atributo padrão de entrada é incluído nos atributos de entrada HTML, para que o valor do campo de entrada seja validado com base nela.

Os tipos de entrada suportados pelo atributo padrão incluem:

  1. Texto
  2. Data
  3. Procurar
  4. url
  5. Tel
  6. E-mail
  7. Senha

Você pode ajudar o usuário descrevendo o padrão por meio do atributo de título global.

Por favor, dê uma olhada em nosso tutorial de JavaScript para mais informações sobre expressões regulares.

Uma área de texto que pode consistir em apenas três letras sem números ou caracteres especiais (por exemplo, uma letra maiúscula):

Example

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O atributo padrão é útil em muitas áreas aqui está um exemplo de atributo padrão no email do tipo de entrada:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<div class="emailBox">
<label for="emailAddress">Your email address</label><br>
<input id="emailAddress" type="email" size="32" maxlength="32" required placeholder="[email protected]" pattern=".+@.+\.com" title="Please provide valid email address">
</div>
<input type="submit" value="Send">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo Necessário

Os atributos de entrada HTML, como entrada obrigatória , especificam que os campos de entrada devem ser preenchidos antes do envio.

Funciona com os seguintes tipos de entrada:

  1. Texto
  2. Selecionadores de data
  3. Procurar
  4. url
  5. Tel
  6. Número
  7. Caixa de seleção
  8. Arquivo
  9. Rádio
  10. E-mail
  11. Senha

O seguinte campo de entrada é obrigatório:

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo de foco automático

Quando a página é carregada, o atributo de foco automático de entrada garante que o campo de entrada ganhe foco proativamente.

Assim que a página for carregada, o campo de entrada “Primeiro nome do proprietário:” ganhará foco automaticamente:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fname">Owner first name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo completo do atributo autofocus em um formulário:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<body>
<h2>Total Marks</h2>
<form action="" accept-charset="ISO-8859-1">
<label for="id">ID:</label>
<input type="text" name="id"><br>
<label for="course">Course:</label>
<input type="text" name="course" autofocus><br>
<label for="grade">Grade:</label>
<input type="text" name="grade"><br>
<label for="marks">Marks:</label>
<input type="number" name="marks"><br><br>
<input type="submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo de Etapa

Em atributos de entrada HTML, o atributo de etapa de entrada identifica um intervalo de número válido para um campo de entrada.

Por exemplo, se step=”3″, os números legais podem ser -3, 0, 3, 6, etc.

Para gerar um intervalo de valores permitidos, emparelhe esse atributo com os atributos max e min.

Números, intervalos, datas, local de data e hora, meses, horas e semanas são todos suportados pelo atributo step.

Campo de entrada com intervalos de números legais:

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Informações Adicionais: Existem muitas maneiras de adicionar entrada ilegal ao JavaScript, e as restrições de entrada não são 100% confiáveis. Também é necessário que o receptor (o servidor) verifique a entrada para restringi-la com segurança!


Atributos de Altura e Largura

A altura e a largura de um elemento <input type=”image”> são determinadas por meio das propriedades de altura e largura de entrada .

Sugestões: Ao adicionar uma imagem a um <input> HTML, certifique-se de incluir os parâmetros de altura e largura. Se a altura e a largura da imagem forem predeterminadas, o espaço necessário será alocado quando o site for carregado.

Sem esses parâmetros, o navegador não consegue alocar espaço suficiente para a imagem, pois não tem certeza de seu tamanho.

O resultado será um ajuste no layout do site durante o carregamento (enquanto as imagens são carregadas).

Considere uma imagem como o botão enviar com características de altura e largura:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<form>
<label for="fname">owner first name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br><input type="image" src="img_submit.gif" alt="Submit" width="60" height="60"></form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo de preenchimento automático

A propriedade autocomplete indica se o preenchimento automático deve ser ativado ou desativado para um formulário ou campo de entrada.

Com o preenchimento automático, o navegador da Web pode antecipar o valor. Com base nos valores inseridos anteriormente nos atributos de entrada HTML, o navegador deve fornecer alternativas ao usuário quando ele começar a digitar em um campo.

A propriedade autocomplete é suportada pelos tipos form> e input> listados abaixo:

  1. Texto
  2. Selecionadores de data
  3. Procurar
  4. url
  5. Telefone
  6. Cor
  7. faixa
  8. E-mail
  9. Senha

Uma entrada HTML com preenchimento automático ativado para um campo de entrada e desativado para os outros:

Example

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" autocomplete="on">
<label for="fname">Owner first name:</label>
<input type="text" id="fname" name="fname"><br>
</form></body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Conselho: Em alguns navegadores, pode ser necessário ativar o recurso de preenchimento automático (consulte “Preferências” no menu do navegador).

Atributo de lista

O atributo da lista de entrada , ao se referir aos atributos de entrada HTML, designa um elemento <datalist> que possui opções predefinidas para um elemento <input>.

Valores predefinidos para um elemento <input> em um <datalist> :

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<body>
<form>
<input list="Tech companies">
<datalist id="Tech companies">
<option value="Tesla">
</option><option value="SpaceX">
</option><option value="Google">
</option><option value="Apple">
</option><option value="Microsoft">
</option></datalist>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Formulário HTML e elementos de entrada

Marcação Visão geral
<forma> Cria um formulário HTML de entrada do usuário.
<entrada> Especifica uma entrada de controle.

Dica: visite nossa referência de tags HTML para obter uma lista abrangente de todas as tags HTML possíveis .


HTML <Input> Atributos Vantagens

Os atributos de entrada HTML oferecem várias vantagens ao criar formulários da Web ou outros cenários de entrada do usuário:

  • Experiência do usuário aprimorada: os atributos de entrada HTML podem ajudar a orientar os usuários, fornecendo dicas úteis ou campos obrigatórios. Isso pode tornar a experiência do usuário mais intuitiva e melhorar as chances de os usuários enviarem o formulário com sucesso.
  • Flexibilidade: A variedade de tipos de entrada e atributos disponíveis com elementos de entrada HTML torna possível criar uma variedade de controles de formulário personalizados para atender a diferentes necessidades.
  • Acessibilidade: certos atributos, como o atributo “obrigatório”, podem tornar os formulários da Web mais acessíveis para usuários com deficiências, fornecendo orientações claras sobre como preencher o formulário.
  • Validação simplificada: os atributos de entrada HTML podem ser usados ​​para validar os dados do formulário antes de serem enviados, o que pode ajudar a reduzir erros e evitar que dados incompletos ou imprecisos sejam inseridos.
  • Segurança aprimorada: os atributos de entrada HTML podem ser usados ​​para evitar ataques mal-intencionados, como injeção de SQL ou script entre sites, validando os dados antes de serem enviados.

Se este artigo ajudou você a realizar seu desejo educacional de alguma forma, compartilhe isso com seus amigos também.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone