Formulários HTML
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:
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva