Tag HTML <entrada>

Neste post, falaremos sobre exemplos de entrada de tags . Com um sonho de que os ajudaria a aprender.

A tag HTML <input> é um elemento de formulário fundamental usado para coletar a entrada do usuário em uma página da web. A tag <input> pode ser usada para criar uma ampla variedade de campos de entrada, como entrada de texto, caixa de seleção, botões de opção, entrada de e-mail, entrada de data, entrada de senha e muito mais.

Existem quatro campos de entrada, três campos de texto e um botão de envio neste formulário HTML :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<form action="/action-page.php">
<label for="id">Student ID</label>
<input type="text" id="id" name="id"><br><br>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="qualification">Qualifications</label>
<input type="text" id="qualification" name="qualification"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo da tag <input> no formulário com alguns atributos:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<body>
<form action="submit-form.php" method="post">
<label for="name">Name:</label>
<br>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<br>
<input type="password" id="password" name="password" required>
<label for="newsletter">Sign up for our newsletter</label>
<br>
<input type="checkbox" id="newsletter" name="newsletter" value="yes">
<label for="age">Age:</label>
<br>
<input type="number" id="age" name="age" min="18" max="120" required>
<label for="volume">Volume:</label>
<br>
<input type="range" id="volume" name="volume" min="0" max="100" value="50" step="10">
<input type="submit" value="Submit">
<br>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Índice-

Lista de Atributos

A seguir estão os atributos da tag <input> :

Atributo Valor Visão geral
formação URL

Essa URL será usada para processar o controle de entrada quando o formulário for enviado (para os tipos “ enviar ” e “ imagem ”).
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain

Ao enviar dados de formulário para o servidor, isso determina como os dados devem ser codificados (para tipos = “enviar” e “imagem”).
método de formulário obter
postagem

Especifique como usar métodos HTTP para enviar dados para a URL de ação (para type=”submit” e type=”image”)
formnovalidate formnovalidate

Indica que a tag <input> não validará esses elementos de formulário após o envio.
formtarget _blank
_self
_parent
_top
nome do quadro

Fornece instruções sobre onde exibir a resposta obtida após o envio do formulário (somente para os tipos “enviar” e “imagem”).
aceitar file_extension
áudio/*
vídeo/*
imagem/*
media_type

Define um filtro para os tipos de arquivos que o usuário pode selecionar na caixa de diálogo para entrada de arquivo (somente para type=”arquivo”)
alternativo texto

Forneça texto alternativo para imagens (apenas para o tipo “imagem”).
autocompletar ligado
desligado

Indica que um elemento <input> precisa ter o preenchimento automático ativado.
auto-foco auto-foco

Declara que um elemento <input> deve obter foco imediatamente quando a página for carregada.
verificado verificado

Indica que o elemento <input> deve ser verificado quando a página carregar (para type=” checkbox ” ou type=” radio ”)
nome texto

A tag input define o nome de um elemento <input> .
padrão regexp

Fornece um padrão com o qual o valor de um elemento <input> é comparado.
espaço reservado texto

Crie uma dica rápida que explique o possível valor de um elemento <input> .
somente leitura somente leitura

Declara que um campo de entrada é somente leitura.
min número
data

Fornece um valor mínimo para um elemento <input> .
comprimento mínimo número

Um elemento que identifica o número mínimo de caracteres necessários em um Tag <input> .
múltiplo múltiplo

Permite que o usuário insira vários valores em uma tag <input> .
obrigatório obrigatório

Certifique-se de que todos os campos de entrada foram preenchidos antes de enviar o formulário.
tamanho número

Esta propriedade define a largura de um elemento <input> em caracteres.
origem URL

Forneça a URL da imagem a ser exibida como um botão de envio (somente para type=” image ”)
etapa número
 qualquer

Define a distância entre números legais em um campo de entrada.
tipo botão
caixa de seleção
cor
data
data hora local e-
mail
arquivo imagem
oculta número do mês senha alcance do rádio redefinir pesquisa enviar tel texto hora url semana

Para exibir o elemento <input> , indique o tipo.
valor texto

Um valor é atribuído a um elemento de entrada.
largura píxeis

Fornece a largura de um elemento <input> (somente para type=” image ”)
dirname nome de entrada .dir

Ele declara que o texto deve ser enviado na direção desejada.
altura píxeis

Indica a altura de uma tag <input> (somente para type=”image”)
lista datalist_id

Acesso a um elemento <datalist> que consiste em valores predefinidos para um elemento <input> .
máximo número
data

Determine o valor máximo para um elemento <input> .
comprimento máximo número

Limita o número máximo de caracteres que você pode colocar em um elemento <input> .
desabilitado desabilitado

Declare que um elemento <input> deve ser desabilitado.
forma form_id

Indica a qual formulário o elemento <input> se refere.

Uso de entrada de marca

A tag input <input> designa um campo de entrada que permite ao usuário inserir informações.

A Tag input <input> é um dos principais elementos essenciais em um formulário.

O elemento Tag input <input> possui vários tipos de apresentação baseados no atributo type.

A seguir está uma lista dos diferentes tipos de entrada:

  1. <tipo de entrada=”texto”> (valor padrão)
  2. <tipo de entrada=”pesquisar”>
  3. <tipo de entrada=”tempo”>
  4. <tipo de entrada=”data”>
  5. <tipo de entrada=”data-hora-local”>
  6. <tipo de entrada=”mês”>
  7. <tipo de entrada=”semana”>
  8. <tipo de entrada=”cor”>
  9. <tipo de entrada=”imagem”>
  10. <tipo de entrada=”e-mail”>
  11. <tipo de entrada=”arquivo”>
  12. <tipo de entrada=”número”>
  13. <tipo de entrada=”tel”>
  14. <tipo de entrada=”url”>
  15. <tipo de entrada=”senha”>
  16. <tipo de entrada=”enviar”>
  17. <tipo de entrada=”oculto”>
  18. <tipo de entrada=”botão”>
  19. <tipo de entrada=”caixa de seleção”>
  20. <tipo de entrada=”rádio”>
  21. <tipo de entrada=”intervalo”>
  22. <tipo de entrada=”reiniciar”>

Dica: Confira o atributo type que mostra exemplos de cada tipo de entrada !
Conselho: certifique-se de usar a tag <label> para especificar rótulos para:
  • <tipo de entrada=”texto”>
  • <tipo de entrada=”caixa de seleção”>
  • <tipo de entrada=”rádio”>
  • <tipo de entrada=”arquivo”>
    e
  • <tipo de entrada=”senha”>

Atributos

Global

A tag input <input> também pode manipular os atributos globais em HTML.

Evento

A entrada do Tag <input> também é capaz de aceitar os Atributos do Evento em HTML.

Compatibilidade do navegador

Elemento
<entrada> Sim Sim Sim Sim Sim

Recursos-chave da tag HTML <input>

Aqui estão alguns dos principais recursos da tag <input> :

  • A tag <input> pode ser usada para criar vários tipos de campos de entrada, como entrada de texto, caixa de seleção, botões de opção, entrada de e-mail, entrada de data, entrada de senha, upload de arquivo e muito mais.
  • A tag <input> fornece recursos de acessibilidade, como a capacidade de associar um rótulo a um campo de entrada e a capacidade de indicar quando um campo de entrada é necessário.
  • A tag <input> permite a interatividade em uma página da Web, permitindo que os usuários insiram dados, selecionem opções e enviem formulários.
  • A tag <input> fornece vários atributos, como obrigatório e padrão, que podem ser usados ​​para validar a entrada do usuário e garantir que os dados inseridos estejam no formato correto.
  • A tag <input> pode ser personalizada usando vários atributos, permitindo criar campos de entrada otimizados para diferentes tipos de dados e interações do usuário.
Se este artigo foi informativo o suficiente para atender aos seus desejos educacionais, deixe sua reação abaixo como uma fonte de apreciação ou para fornecer feedback para trazer melhorias para este site.
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
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.