Tipos de entrada em html

Os formulários HTML são usados ​​para obter informações do usuário e, para fazê -lo, um formulário usa tags de entrada diferentes. Em palavras simples, as formas HTML são incompletas sem marcação. O As tags podem ser usadas dentro da tag do formulário para declarar os controles de entrada que permitem que um usuário insira os dados de várias maneiras, como a coleta de dados usando campos de texto, listas suspensas, etc.

Esta redação apresenta uma visão geral completa dos seguintes tipos de entrada:

1. Texto
2. Enviar
3. E-mail
4. Senha
5. Botão
6. Rádio
7. Caixa de seleção
8. Arquivo
9. Cor
10. Data
11. Tempo
12. DateTime-Local
13. Semana
14. Mês
15. Tel

Este artigo apresentará um guia completo para todos os tipos de entrada acima mencionados, então, vamos começar!

Tipo de texto

O tipo de texto determina um campo de texto de linha única.

Exemplo
O snippet abaixo dado cria um campo de entrada de tipo de texto dentro de uma tag de formulário:

Nome

O snippet de código acima gerará a saída algo assim:

A saída verifica se o campo de entrada leva dados do tipo de texto.

Tipo Enviar

O botão de envio do tipo envia os dados do formulário para o URL especificado na tag.

Exemplo
O trecho abaixo mostra como o tipo de envio funciona:

Nome

Enviar

O código acima especifica um URL de um arquivo html na tag de formulário, além disso, ele cria um botão e um campo de texto. Clicar no botão Enviar enviará os dados inseridos no campo de texto para o formas.html página.

Antes de clicar no botão, estamos no formattributes.html Página, então, a saída do snippet de código acima será assim:

Clicar no botão exibirá os dados dignos do usuário no formas.html página:

É assim que o botão Enviar funciona em HTML.

Digite email

É usado para receber o endereço de e -mail do usuário e se alguém inserir dados irrelevantes, o tipo de email não enviaria esses dados:

E-mail

Enviar

A seguir, será a saída deste código:

Digite a senha

O tipo de senha é usado para determinar um campo de senha:

Senha

A peça de código acima produz a seguinte saída:

Botão de tipo

É usado para criar um botão clicável:

A linha de código acima mostra inicialmente a seguinte saída:

Rádio do tipo

É usado para criar um botão de rádio que permita ao usuário escolher uma opção de várias opções:

Front-end


Processo interno

O código acima fornecerá a seguinte saída:

Digite a caixa de seleção

O tipo de caixa de seleção é usado para criar uma caixa de seleção que permita ao usuário selecionar uma única ou várias opções:

Eu sou um desenvolvedor de front -end


Eu sou um desenvolvedor de back -end

O snippet acima mencionado mostra a seguinte saída:

A saída autentica o funcionamento da caixa de seleção.

Tipo de arquivo

Para anexar um arquivo em um site, o tipo de entrada do arquivo pode ser usado:

Escolha um arquivo:

Inicialmente, ele exibe "nenhum arquivo escolhido":

Quando um usuário seleciona um arquivo, o nome do arquivo será exibido adjacente ao "escolher arquivo" opção:

Tipo de cor

Este tipo de entrada é usado para criar um seletor de cores. O valor por padrão é preto, no entanto, um usuário pode escolher uma cor usando valores de cores RGB:

Escolha uma cor

A parte do código acima fornece a seguinte saída:

Clicar na cor será exibido permitirá que um usuário escolha uma cor de sua escolha:

Tipo de data

É usado para criar um campo de tipo de data que permita ao usuário escolher uma data:

Escolha uma data

A seguir, será a saída para o trecho de código acima:

Um usuário pode escolher uma data da seguinte maneira:

Tipo de tempo

É usado para criar um campo de tipo de tempo que permita ao usuário escolher um horário. O tipo de entrada de tempo pode ser implementado da mesma maneira que o tipo de data:

Escolha um tempo

Inicialmente, as linhas de código acima fornecerão a seguinte saída:

Um usuário pode escolher um tempo de sua escolha:

DateTime-Local

Pode ser usado para especificar a data e a hora simultaneamente:

Escolha uma data e hora

A saída do snippet de código acima ficará assim:

Um usuário pode escolher a data e a hora simultaneamente, como mostrado abaixo:

Semana

É usado para selecionar uma semana, o snippet abaixo fornecerá uma melhor compreensão:

Escolha uma semana

O snippet abaixo-dado mostra a saída das linhas acima do código:

Mês

É usado para selecionar um mês, o snippet de código abaixo descreve o funcionamento do tipo de entrada do mês:

Escolha um mês

A saída do snippet acima do ritmo ficará assim:

TIP TEL

É usado para pegar um número de telefone do usuário. Podemos especificar um padrão específico que deve ser seguido. O trecho abaixo mostra o funcionamento do tipo de entrada Tel:

Digite seu número de telefone:

Se alguém entrar em um padrão irrelevante, uma mensagem de aviso será exibida para inserir o formato solicitado:

A saída verifica que o “Tel” O tipo de entrada está funcionando corretamente.

Conclusão

A tag fornece controles de entrada para aceitar os dados do usuário de várias maneiras. Em HTML, diferentes tipos de entrada podem ser usados ​​para receber a entrada do usuário, por exemplo, texto, email, senha, botão, envio e muito mais. Todos esses tipos de entrada apresentam funcionalidades diferentes. Este artigo fornece uma visão geral abrangente de alguns tipos de entrada mais usados ​​e considerados vários exemplos para melhor compreensão.