Elementos de formulário HTML - Sintaxe e exemplo de elementos de formulário HTML

Introdução aos elementos de formulário HTML

Nas Tecnologias de Desenvolvimento Web (especialmente para o front-end), “HTML” é a linguagem de marcação básica ou primária que usamos para exibir as páginas da Web (a página que vemos em um site). Às vezes, em uma página HTML, juntamente com a outra exibição de conteúdo, também precisamos receber algumas entradas do usuário (especialmente em sites dinâmicos). E para levar as entradas do usuário em uma página HTML, precisamos usar vários elementos de formulário para criar esses formulários corretamente e, com a ajuda desses formulários, pegamos as entradas do usuário de maneira correta e colocamos essas entradas (dados) em nossos Bancos de dados no back-end. Agora, como sabemos que os códigos HTML são escritos sob vários elementos de tag (), basicamente "Elementos de formulário HTML" são aqueles elementos usados ​​dentro de uma tag "". E esses elementos, juntamente com outros atributos padrão e exclusivos, também fornecem uma forma e uma estrutura que permitem que os usuários saibam o que fazer com o formulário e como proceder de maneira estrutural.

Explicar os elementos do formulário HTML (incluindo sintaxe e exemplos com saída)

Como existem vários elementos de formulário HTML para criar um formulário e dar ao formulário uma aparência adequada de forma estruturada; abaixo estão alguns deles explicados um por um.

Sim. Não.	Tag	Significados / descrições
1 1		Para definir um formulário HTML para entradas do usuário
2		Para definir o controle de entrada
3		Para especificar uma lista de opções predefinidas
4		Para definir elementos relacionados ao grupo
5		Para definir uma entrada segura
6		Para definir um rótulo de entrada
7		Para definir uma legenda para o fieldset
8		Para definir um grupo de opções semelhantes
9		Para definir uma opção para o menu suspenso
10		Para definir um resultado
11		Para definir uma lista de lista suspensa
12		Para definir uma área de entrada multilinha

Nota: A maioria dos elementos de tag HTML discutidos aqui são para HTML5, que é a versão mais recente da linguagem HTML. O elemento tag não é mais suportado em HTML5; foi realmente usado para a versão anterior do HTML.

Sintaxe e Exemplo

Algumas sintaxes e exemplos de elementos de formulário HTML com saídas são discutidos abaixo:

1. "" elemento

Esse elemento também pode conter muitos outros elementos, incluindo o abaixo:

Exemplo para um elemento "" com o botão de entrada e envio:

Sintaxe:


Your Name:



Códigos:



Your name:




Resultado:

2. "" elemento

Este elemento é um elemento embutido e pertence ao grupo de elementos do formulário.

Sintaxe:


Input name:
Input age:



Códigos:



Input name:
Input age:




Resultado:

3. "" elemento

Geralmente, especifica uma lista predefinida de entradas para o elemento em que os usuários podem escolher qualquer opção da lista predefinida.

Sintaxe:







Códigos:











Resultado:

4. "" elemento

Esse elemento é basicamente usado para agrupar elementos relacionados em formulários e desenha uma caixa em torno dos elementos semelhantes.

Sintaxe:


Celebrity:
Name:
Phone:
Age:


Códigos:




Celebrity:
Name:
Phone:
Age:



Resultado:

5. "" elemento

Esse elemento pode ser localizado fora do formulário, mas ainda assim, pode fazer parte do formulário. Normalmente, esse elemento é usado para especificar um ou mais formulários. Esse elemento foi recentemente usado na versão HTML5 para gerar uma chave de criptografia para transmitir dados criptografados por um formulário em um site baseado em HTML.

Sintaxe:

Códigos:



Username:



O campo keygen abaixo mencionado está fora do formulário, mas ainda faz parte do formulário acima.

Criptografia:

Resultado:

6. "" elemento

Esse elemento basicamente fornece um nome para o formulário de entrada para que os usuários entendam quais dados de entrada devem ser. Ele atua como um indicador para os usuários.

Sintaxe:

…

Códigos:


Example of HTML label tag


Boy
Girl



Resultado:

7. "" elemento

Esse elemento realmente define uma legenda para um elemento. É uma espécie de elemento de suporte para outro elemento, uma parte do elemento de grupo.

Sintaxe:


Celebrity:
Name:
Phone:
Age:


Códigos:


Example of HTML legend tag


Celebrity:
Name:
Phone:
Age:



Resultado:

8. "" elemento

Este elemento é um elemento relacionado ao grupo que é usado para opções em uma lista suspensa em um formulário HTML. Ajuda os usuários a lidar com uma longa lista facilmente.

Sintaxe:


Ninja 300
Ninja 450

Pulsar 200
Pulsar 150


Códigos:



Example of HTML legend tag


Ninja 300
Ninja 450

Pulsar 200
Pulsar 150



Resultado:

9. "" elemento

Este elemento é usado para representar uma opção de uma lista suspensa no elemento; a lista suspensa deve conter pelo menos uma opção.

Sintaxe:

…

Códigos:



Example of HTML option tag


Bikes
Cars
Buses



Resultado:

10. "" elemento

Este elemento é basicamente usado para mostrar a saída de um cálculo (por exemplo, em um cálculo com script).

Sintaxe:

…

Códigos:



Example of HTML output Tag

+
=



Resultado:

11. "" elemento

Este elemento é usado para fazer uma seleção de uma lista em um formulário.

Sintaxe:


Bike
Car
Bus


Códigos:



Example of HTML select Tag


Bike
Car
Bus



Resultado:

12. "" elemento

Este elemento é usado para definir entradas de texto com várias linhas (por exemplo, para endereço).

Sintaxe:




Coloque seu comentário:
Coloque aqui…

Códigos:


Example of HTML textarea Tag



Coloque seu comentário:
Coloque aqui…

Resultado:

Conclusão

Existem tantos elementos de formulário HTML disponíveis; Neste artigo, discutimos alguns dos elementos básicos ou nativos do formulário HTML. Os elementos de formulário HTML nos ajudam a criar formulários HTML adequados e funcionais. O ponto a ser observado é que a maioria dos elementos do formulário HTML precisa de alguns atributos para serem incluídos junto com eles. Alguns dos elementos dependem um do outro, que devem ser codificados juntos. Os elementos que já estão obsoletos podem não ser exibidos por todos os navegadores.

Artigos recomendados

Este foi um guia para elementos de formulário HTML. Aqui discutimos a introdução e os elementos do formulário com sintaxe e código de exemplo. Você também pode consultar nossos outros artigos sugeridos para saber mais -

1. Versões do Html
2. Vantagens do HTML
3. Carreira em HTML
4. Blocos HTML
5. Curso grátis de HTML
6. Quadros HTML
7. Definir uma cor de plano de fundo em HTML com exemplo