Formulários HTML

Este artigo explora os fundamentos dos formulários HTML, como eles são criados e algumas práticas recomendadas para criar formulários eficazes e fáceis de usar.

Os formulários HTML são usados ​​para coletar informações dos usuários. Geralmente é um servidor que recebe a entrada do usuário para processamento.

Os formulários HTML reúnem a entrada do usuário do site e a publicam em aplicativos de back-end, como CGI, script ASP ou script PHP. Dependendo das regras e da lógica especificadas dentro do aplicativo, o aplicativo de back-end processará os dados transmitidos.

Uma variedade de elementos de formulários estão disponíveis, incluindo campos de texto, campos de área de texto, menus suspensos, botões de opção e caixas de seleção, etc.

Exemplo

Índice-

Elemento HTML <form>:

Conforme mostrado abaixo, você pode criar um formulário HTML usando o elemento <form>

<form>
This is a form element
</form>

Um <formulário> Html pode conter campos de texto, caixas de seleção, botões de opção e botões de envio, entre outros elementos de entrada.

Existem muitos elementos diferentes que compõem os formulários HTML .

Elemento HTML <entrada>:

Existem muitos tipos de elementos HTML, mas o mais comumente usado é o elemento <input> .

Com base no atributo type , os formulários HTML podem exibir elementos <input> de várias maneiras.

Alguns exemplos destes podem ser vistos abaixo:

Tipo Visão geral
<tipo de entrada=”texto”> Campo de entrada de texto com uma linha
<tipo de entrada=”rádio”> Contém um botão de opção (para escolher entre várias opções)
<tipo de entrada=”senha”> Um campo de senha é especificado (os caracteres são mascarados)
<tipo de entrada=”caixa de seleção”> Fornece uma caixa de seleção para selecionar entre zero e muitas opções
<tipo de entrada=”enviar”> Botão Enviar (para oferecer o formulário)
<tipo de entrada=”botão”> Ele exibe um botão clicável

Aqui está um capítulo que cobre todos os diferentes tipos de entrada HTML .

Campos de texto

O uso de <input type="text"> caracteriza um campo de entrada de texto de linha única.
Aqui está um formulário com campos de entrada de texto:

Example: 

1
2
3
4
<!DOCTYPE html>
<html><body><br><br><br><form><br><label for="fname">First name:</label><br><br><input type="text" id="fname" name="fname"><br><br><label for="lname">Lastname:</label><br><br><input type="text" id="lname" name="lname"><br></form><br><br>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um navegador retratará o código HTML acima da seguinte maneira:

Primeiro nome:

Sobrenome:

Importante: Observe que o formulário em si não é visível. Você também deve estar ciente de que a largura padrão de um campo de entrada é de 20 caracteres.

O elemento <rótulo>

Você pode ver como o exemplo acima utiliza um elemento <label> .

Para muitos elementos de formulário, a tag <label> representa um rótulo. Se o usuário focar no elemento <input>, o leitor de tela lerá o <label> em voz alta.

Quando o visitante clica no texto dentro do elemento <label> , ele alterna o botão de opção/caixa de seleção, o que é útil para visitantes que têm dificuldade de clicar em regiões muito pequenas (como botões de opção).

É essencial vincular os elementos <label> e <input> com o atributo for da tag label.

Senha

O uso de <input type="password"> caracteriza uma entrada de senha de linha única.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>Input Type Password</title>
</head>
<body>
<form>
User ID : <input type="text" name="ID">
<br>
Password: <input type="password" name="password">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Botões do rádio

Um botão de opção é definido pelo <input type=”radio”> .

Há um número limitado de seleções que podem ser obtidas quando o usuário seleciona um botão de opção.
Um exemplo de um formulário com botões de opção é o seguinte em relação aos formulários HTML :

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Veja como um navegador retratará a sobrecarga do código HTML de uma maneira mais fácil de usar:

Caixas de seleção

Uma caixa de seleção é definida por <input type=”checkbox”> .

Se falamos de formulários HTML , as caixas de seleção permitem que os usuários escolham ZERO ou MAIS opções de um número limitado.
Aqui está um formulário baseado em caixa de seleção:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Truck"><label for="vehicle1"> I have a Tesla Truck</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="bike">
<label for="vehicle2">
I have a Suzuki AEM Carbon Fiber Hayabusa</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="car">
<label for="vehicle3"> I have a Ferrari 250 GTO</label>
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

É assim que o código HTML acima será exibido em um navegador:

O botão Enviar

Em formulários Html, campos de formulário com <input type=”submit”> representam um botão para apresentar informações de formulário a um manipulador de formulário.

Os dados de entrada são processados ​​por um script no arquivo manipulador de formulários no servidor .

Um atributo na ação do formulário define o manipulador do formulário.
Botão enviar em um formulário:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname" value="Colin"><br>
<label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" value="Smith"><br><br><input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Um navegador mostrará o código HTML acima da seguinte forma:

Primeiro nome:

Sobrenome:

CSS em formulários

CSS também pode ser aplicado aos campos de entrada do formulário aqui está um exemplo:

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
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text], input[type=submit] {
width: 80%;
padding: 10px;
margin: 4px 0;
border: 1px solid blue;
background-color: #bbbcfd;
color: rgb(233, 10, 10);
}
</style>
</head>
<body>
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname" value="Colin"><br>
<br><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" value="Smith"><br><br><input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Atributo de nome para <input>

Os formulários HTML requerem um atributo de nome para cada campo de entrada.

É impossível enviar o valor de um campo de entrada se o atributo name for esquecido.
Neste exemplo, o campo de entrada “Nome” não será enviado:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="Colin"><br><br><input type="submit" value="Submit">
</form>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Importância dos Formulários HTML

Os formulários HTML desempenham um papel crucial na funcionalidade de sites e aplicativos da web contemporâneos. Eles oferecem um meio para os usuários fornecerem informações, interagirem com páginas da Web e enviarem informações aos servidores para processamento. A seguir estão algumas das principais razões pelas quais os formulários HTML são essenciais:

  • Entrada do usuário: os formulários HTML permitem que os usuários forneçam uma ampla variedade de dados, desde texto e números básicos até tipos de dados mais intrincados, como arquivos, datas e horários. Essa entrada é vital para vários aplicativos da Web, como compras on-line, mídia social e serviços bancários.
  • Interação: os formulários fornecem aos usuários um meio de interagir com as páginas da Web, permitindo que eles pesquisem informações, enviem comentários e executem outras ações que aprimoram sua experiência geral no site.
  • Coleta de dados: os formulários HTML permitem que os proprietários de sites coletem dados do usuário, incluindo endereços de e-mail, informações de contato e preferências. Esses dados podem ser utilizados para fins de marketing, para aprimorar a experiência do usuário e personalizar o conteúdo para usuários individuais.
  • Processamento de dados: os servidores podem processar os dados enviados pelos usuários por meio de formulários HTML, que podem ser utilizados para diversos fins, incluindo envio de e-mails, atualização de bancos de dados e geração de relatórios.
  • Acessibilidade: os formulários HTML podem ser projetados para serem acessíveis a todos os usuários, incluindo aqueles com deficiências, como deficiências visuais ou mobilidade limitada. Isso garante que todos os usuários possam interagir com as páginas da Web e fornecer informações, independentemente de suas habilidades.
Se este artigo atendeu às suas necessidades educacionais de alguma forma, deixe sua reação abaixo como uma fonte de agradecimento ou sugestão 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.