Tag HTML <form>

Nosso tópico neste post são exemplos de formulários de tags . Na esperança de fornecer aos alunos o que eles precisam aprender.

Em HTML, a tag <form> é usada para criar um formulário interativo em uma página da Web que permite aos usuários inserir dados e enviá-los ao servidor para processamento posterior. A tag <form> é normalmente usada em conjunto com outros elementos relacionados ao formulário, como input, label e tags de botão para criar um formulário completo.

O seguinte formulário HTML tem vários campos de entrada e um único botão de envio:

Example: 

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

Aqui está um formulário HTML com caixas de seleção:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
<input type="checkbox" name="lang1" value="python">
<label for="lang1"> I am a python developer</label>
<br>
<input type="checkbox" name="lang2" value="java">
<label for="lang2"> I am a java developer</label>
<br>
<input type="checkbox" name="lang3" value="flutter" checked>
<label for="lang3"> I am a flutter developer</label>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O formulário HTML a seguir possui botões de opção:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<body>
<form action="/action-page.php" method="get">
<input type="radio" id="paypal" name="Payment Methond" value="paypal">
<label for="paypal">Paypal</label>
<br>
<input type="radio" id="mastercard" name="Master Card" value="mastercard" checked>
<label for="mastercard">Master Card</label>
<br>
<input type="radio" id="visa" name="visa" value="visa">
<label for="visa">Visa</label><br><br>
<input type="radio" id="cod" name="cod" value="cod">
<label for="cod">Cash on Delivery</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo da tag <form> com algum CSS aplicado a ela:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<style>
form {
width: 50%;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
}
input[type="checkbox"] {
margin-right: 10px;
}
label {
font-weight: bold;
}
input[type="submit"] {
background-color: maroon;
color: white;
padding: 12px 20px;
border-radius: 10px;
border: none;
cursor: pointer;
margin-top: 20px;
}
input[type="submit"]:hover {
background-color: maroon;
}
</style>
</head>
<body>
<form action="/action_page.php" method="get">
<input type="checkbox" name="lang1" value="python">
<label for="lang1"> I am a python developer</label>
<br>
<input type="checkbox" name="lang2" value="java">
<label for="lang2"> I am a java developer</label>
<br>
<input type="checkbox" name="lang3" value="flutter" checked>
<label for="lang3"> I am a flutter developer</label>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Índice-

Uso de formulário de marcação

Usando o formulário Tag <form>, você pode criar um formulário HTML que permite aos usuários inserir informações.

O elemento <form> pode ser composto por um ou mais dos seguintes elementos de formulário:

Aqui estão alguns usos comuns da tag <form> :

  • O uso mais comum da tag <form> é criar um formulário que permite aos usuários inserir dados como nome, e-mail, número de telefone e mensagem. Os dados enviados pelo usuário podem ser processados ​​pelo servidor ou enviados para um endereço de e-mail específico.
  • Os formulários podem ser usados ​​para criar páginas de registro de usuários que permitem aos usuários criar uma conta em seu site. Isso geralmente envolve a coleta de informações como nome do usuário, endereço de e-mail e senha.
  • Os formulários podem ser usados ​​para coletar feedback ou realizar pesquisas dos visitantes do site. Essa pode ser uma ótima maneira de coletar informações sobre a experiência do usuário e melhorar seu site.
  • Um formulário de contato pode ser criado usando a tag <form> que permite aos visitantes enviar uma mensagem ou entrar em contato com o proprietário do site. O formulário geralmente inclui campos para o nome do usuário, endereço de e-mail, mensagem e outras informações relevantes.
  • Os formulários são amplamente usados ​​em sites de comércio eletrônico para coletar informações como endereços de cobrança e entrega, informações de pagamento e detalhes do pedido.
  • Os formulários de pesquisa são comumente usados ​​em sites para permitir que os usuários pesquisem conteúdo específico dentro do site. O formulário geralmente inclui um campo de pesquisa e um botão de envio.

Compatibilidade do navegador

Elemento
<forma> Sim Sim Sim Sim Sim

Atributos

Atributo Valor Visão geral
Ação URL Ao enviar um formulário, indica para onde deve enviar os dados.
autocompletar ligado
desligado		 Os conjuntos, seja o preenchimento automático do formulário, devem ser ativados ou desativados para um formulário.
aceitar conjunto de caracteres conjunto de caracteres Fornece detalhes sobre a codificação de caracteres usada no envio do formulário.
nome texto Define o nome do formulário.
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 Fornece instruções para codificar os dados do formulário (somente para method=”post”) antes de serem enviados ao servidor.
método obter
postagem		 Este método define como devem ser enviados os dados do formulário via HTTP.
rele licença
de ajuda externa next nofollow noopener noreferrer opener pesquisa anterior







 Descreve a relação entre um recurso vinculado e o documento atual.
alvo _blank
_self
_parent
_top		 Indica onde mostrará a resposta após o envio do formulário.
novalidar novalidar Instrui o formulário a não ser validado após o envio.

Atributos

Global

O formulário Tag <form> também é compatível com os Atributos Globais do HTML .

Evento

O formulário de tag <form> também é compatível com os atributos de evento do HTML .<!–

Anúncio

–><!–

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

–>

CSS predefinido

A maioria dos navegadores de internet mostra o formulário Tag com os seguintes valores padrão:

form {
display: block;
margin-top: 0em;
}

Vantagens da tag de formulário HTML

A tag HTML <form> tem várias vantagens para criar páginas da web interativas:

  • A tag <form> permite especificar o tipo de dado que deve ser inserido em cada campo, como texto, números ou endereços de e-mail. Isso ajuda a garantir que os usuários insiram dados válidos, o que pode ajudar a reduzir erros e melhorar a experiência geral do usuário.
  • Ao usar a tag <form> para criar formulários, você pode melhorar a acessibilidade do seu site para usuários que dependem de tecnologias assistivas, como leitores de tela. Isso ocorre porque a tag <form> fornece uma estrutura clara para os elementos do formulário, facilitando a navegação e a compreensão do conteúdo pelos usuários.
  • Os formulários criados com a tag <form> podem ser usados ​​para coletar dados dos visitantes do site, o que pode ser útil para diversas finalidades, como feedback do usuário, pesquisas ou transações de comércio eletrônico.
  • A tag <form> permite que você especifique o método usado para enviar dados de formulário ao servidor, como HTTP POST ou GET, o que pode ajudar a garantir que dados confidenciais sejam transmitidos com segurança.
  • A tag <form> pode ser personalizada usando CSS para criar formulários visualmente atraentes e fáceis de usar que correspondem ao design geral do seu site.
  • A tag <form> é suportada por todos os principais navegadores da web, tornando-a uma ferramenta confiável e amplamente usada para criar páginas da web interativas.
Se este artigo foi informativo o suficiente para atender aos seus desejos educacionais, deixe sua reação abaixo para apreciar nossos esforços ou sugerir melhorias para a melhoria deste 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.