HTML significa HyperText Markup Language. Ele é usado para projetar páginas da web usando uma linguagem de marcação. É uma combinação de hipertexto e linguagem de marcação. O HTML usa tags e elementos predefinidos que informam ao navegador como exibir corretamente o conteúdo na tela. E a forma é um deles. Portanto, neste artigo, aprenderemos o que é exatamente o formulário HTML, quais são os elementos dos formulários e como podemos usar o formulário HTML em nossa página da web. 

O que é HTML <form>?

<form> é um elemento HTML para coletar dados de entrada contendo controles interativos. Ele fornece facilidades para inserir texto, número, valores, e-mail, senha e campos de controle, como caixas de seleção, botões de opção, botões de envio, etc. ou em outras palavras, o formulário é um contêiner que contém elementos de entrada, como texto, e-mail, número , botões de opção, caixas de seleção, botões de envio, etc. Os formulários geralmente são usados ​​quando você deseja coletar dados do usuário. Por exemplo, um usuário deseja comprar uma mala online, então ele / ela deve primeiro inserir seu endereço de entrega no formulário de endereço e, em seguida, adicionar seus detalhes de pagamento no formulário de pagamento para fazer um pedido.

Sintaxe:

<form>

elements of form...

</form>

Elementos de HTML <form>

Estes são os seguintes elementos HTML <form>:

  • <label>: define o rótulo para os elementos <form>.
  • <input>: É usado para obter dados de entrada do formulário em vários tipos, como texto, senha, e-mail, etc, alterando seu tipo.
  • <button>: define um botão clicável para controlar outros elementos ou executar uma funcionalidade.
  • <select>: É usado para criar uma lista suspensa.
  • <textarea>: É usado para obter conteúdo de texto longo de entrada.
  • <fieldset>: É usado para desenhar uma caixa ao redor de outros elementos do formulário e agrupar os dados relacionados.
  • <legend>: Define a legenda para os elementos fieldset.
  • <datalist>: É usado para especificar opções de lista predefinidas para controles de entrada.
  • <saída>: Exibe a saída dos cálculos realizados.
  • <option>: É usado para definir a opção na lista suspensa.
  • <optgroup>: É usado para definir opções relacionadas ao grupo em uma lista suspensa.

Caixa de texto em formato HTML

Em um formulário HTML, usamos a tag <input> atribuindo o valor do atributo type ao texto para inserir uma entrada de linha única. É a tag mais comumente usada. Para definir o atributo type, veja a sintaxe abaixo. 

Sintaxe:

<input type="text">

Aqui podemos alterar o tipo de texto do valor para a senha para obter a senha de entrada 

Exemplo:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
  <form>
    Username : <input type="text"><br><br>
    Password : <input type="password"><br><br>
    <input type="button" value="Submit">
  </form>
</body>
</html>

Saída:

No exemplo acima, podemos ver a diferença entre digitar texto e digitar senha. O nome de usuário ficará visível, mas a senha não estará visível. 

Botão de rádio em um formulário HTML

Para criar um botão de rádio, usamos a tag <input> seguida por tipo de rádio para fornecer aos usuários a escolha de um número limitado de opções.

 Sintaxe:

<input type="radio" name="radio_button_name">

Nota: O botão de opção deve ter compartilhado o mesmo nome para ser tratado como um grupo. 

Exemplo:

Neste exemplo, criaremos um botão de opção para escolher seu gênero. 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Select your gender</h2>
  <form>
    Male<input type="radio" name="gender">
    Female<input type="radio" name="gender">
  </form>
</body>
</html>

Saída:

Caixa de seleção em um formulário HTML

Para criar uma caixa de seleção em um formulário HTML, usamos a tag <input> seguida pela caixa de seleção do tipo de entrada. É uma caixa quadrada que deve ser marcada para ativar isso. Ele costumava escolher mais opções por vez. 

Sintaxe:

<input type="checkbox">

Exemplo:

Neste exemplo, usamos caixas de seleção para selecionar o idioma. 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Choose Language</h2>
  <form>
     <input type="checkbox">Hindi<br>
    <input type="checkbox">English<br>
    <input type="checkbox">Sanskrit<br>
   </form>
</body>
</html>

Saída:

Combobox em um formulário HTML

O Combobox é usado para criar um menu suspenso em seu formulário que contém várias opções. Portanto, para criar um Combobox em formato HTML, usamos a tag <select> com a tag <option>. Também é conhecido como menu suspenso. 

Sintaxe:

<select>
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
</select>

Exemplo:

Neste exemplo, criaremos um menu suspenso para selecionar Nacionalidade. 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Select Your Nationality</h2>
  <form>
   <select>
    <option>Indian</option>
    <option>Nepali</option>
     <option>Others</option>
   </select>
  </form>
</body>
</html>

Saída:

Botão Enviar em um formulário HTML

No formulário HTML, o botão de envio é usado para enviar os detalhes do formulário para o manipulador de formulários. Um manipulador de formulários é um arquivo no servidor com um script usado para processar dados de entrada.  

Sintaxe:

 <input type="button" value="submit">

Exemplo: 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
  <form>
    Username: <input type="text"><br><br>
    Password: <input type="password"><br><br>
    <input type="button" value="submit">
  </form>
</body>
</html>

Saída:
 

TextArea em um formulário HTML

No formulário HTML, uma área de texto é usada para adicionar comentários ou resenhas ou endereços no formulário. Ou em outras palavras, a área de texto é um controle de entrada de texto de várias linhas. Ele contém um número ilimitado de caracteres, e o texto é renderizado em uma fonte de largura fixa e o tamanho da área de texto é fornecido pelos atributos <rows> e <cols>. Para criar uma área de texto no formulário, use a tag <textarea>.

Sintaxe:

<textarea> content </textarea>

Exemplo:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
  <form>
    <textarea rows = "3" cols = "40">
      GeeksforGeeks is a online portal
    </textarea>
  </form>
</body>
</html>

Saída:

Crie um formulário HTML para inserir os detalhes básicos de um aluno

Neste exemplo, iremos obter resultados como Saudação, Nome, Sobrenome, Email, Telefone, Sexo, Data de Nascimento e Endereço. 

Para criar este formulário, precisamos usar a tag <legend> para definir a legenda, a tag <select> para Saudação, a tag <option> para definir os elementos de Saudação, a tag <input> para Nome, Sobrenome, Email, Telefone, Data de nascimento alterando o atributo de tipo de tag <input>, <textarea> para inserir o endereço, botão de rádio para gênero. Depois de definir todas essas coisas, usaremos um <button> para enviar os dados do formulário. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GfG</title>
  <style>
  </style>
</head>
 
<body>
  <form>
    <fieldset>
      <legend>Personal Details</legend>
      <legend for="salutation">Salutation</legend>
      <select name="salutation">
        <option>--None--</option>
        <option>Mr.</option>
        <option>Ms.</option>
        <option>Mrs.</option>
        <option>Dr.</option>
        <option>Prof.</option>
      </select><br><br>
      <label for="first_name">First name:</label>
      <input type="text" id="first_name" name="fname"><br><br>
      <label for="last_name">Last name:</label>
      <input type="text" id="last_name" name="lname"><br><br>
      <label for="gender">Gender : </label>
      <input type="radio" name="gender"> Male
        <input type="radio" name="gender"> Female
      <br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <label for="dob">Date of Birth:</label>
      <input type="date" id="birthday" name="dob"><br><br>
      <legend for="address">Address : </legend>
      <textarea name="address" cols="30" rows="3"></textarea>
      <br><br>
      <input type="submit" value="Submit">
     </fieldset>
  </form>
</body>
</html>

Saída: