A tag de formulário em HTML
Neste artigo, vamos aprender a tag form em HTML, esta é uma tag usada para cercar campos de entrada, ajudando as pessoas através de operações de entrada, enviar dados para o servidor.
A maioria dos sites tem as funcionalidades de cadastro, login, contato, pedido, pagamento de carrinho… todas essas funções devem utilizar a tag form.
1. Para que serve a tag de formulário em HTML?
A tag de formulário cria um formulário HTML para o usuário inserir e, em seguida, envia os dados para o servidor criando uma ação de envio de formulário. Dentro do formulário pode conter os seguintes elementos:
- <entrada>
- <textarea>
- <botão>
Dependendo de cada interface, você escolhe a placa apropriada. Com HTML5, há muitas tags de entrada fornecidas, como vemos no exemplo abaixo, mas todas elas serão elementos de tag filho da tag de formulário (a estrutura da tag de formulário abrangerá toda a estrutura de entrada).
Sintaxe para escrever a tag do formulário:
<form method="" action=""></form>Em que :
- ação – o caminho para o qual o formulário deve enviar os dados.
- method – método para enviar dados incluindo: POST, GET.
A tag form em html ainda possui os atributos básicos como style, id, class. No entanto, o id ou class é usado principalmente para estilizar a tag do formulário, se houver, os dois atributos mais importantes do formulário são action e method .
Resumindo : se você precisar enviar dados do lado do cliente para o servidor, é necessário usar a tag de formulário em combinação com as tags de entrada para inserir os dados, através dos métodos POST ou GET.
2. Como usar a tag de formulário em HTML
Exemplo: Usando a tag de formulário para criar uma interface de entrada de dados:
<!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>Document</title> </head> <body> <form method="GET" action=""> <div> <label for="inputvanban">text</label> <input id="inputvanban" name="vanban" type="text" placeholder="nhap van ban vao" required /> </div> <div> input text regex <input type="text" name="email" placeholder="nhap email vao" pattern="([a-z0-9_.-]+)@([da-z.-]+).([az.]{2,6})" required /> </div> <div> input number <input type="number" /> </div> <div> input link <input type="url" autofocus /> </div> <div> input email <input type="email" required /> </div> <div> input range <input type="range" min="0" max="100" /> </div> <div> input date <input name="ngaythang" type="date" min="2022-03-06"/> </div> <div> input date <input type="week"/> </div> <div> input month <input type="month"/> </div> <div> input time <input type="time"/> </div> <div> input date time <input type="datetime-local"/> </div> <div> input date time <input type="color"/> </div> <h4>Nhap lua chon radio</h4> <input id="opt1" name="monhoc" type="radio" value="html"/> <label for="opt1">html</label> <input id="opt2" name="monhoc" type="radio" value="css"/> <label for="opt2">css</label> <input id="opt3" name="monhoc" type="radio" value="js"/> <label for="opt1">js</label> <h4>Check box</h4> <input type="checkbox" value="fb" name="channel" /> <label for="opt1">facebook</label> <input type="checkbox" value="inst" name="channel" /> <label for="opt1">insta</label> <input type="checkbox" value="utb" name="channel" /> <label for="opt1">youtube</label> <input type="checkbox" value="twt" name="channel" /> <label for="opt1">twitter</label> <textarea name="vanbannhieudong">sdfsdfsdfsdfsdf sdfsdfsdfsdff </textarea> <input type="submit" value="gửi dữ liệu" /> </form> <script> document.addEventListener("keyup", function(e){ var data = e.target.value; console.log(data); }); document.querySelector('input[type=range]').addEventListener("change",function(e){ var data = e.target.value; console.log(data); }); </script> </body> </html> Bài viết liên quan:
Dịch vụ thiết kế Wesbite
