Exemplos sobre Form[1]

Um form (formulário) é usado para coletar informações do usuário através de perguntas.
Esta informação coletada pode ser enviada para um servidor.
Onde um programa pode processar a informação de um usuário, ou até a informação combinada de vários usuários.

Como é esta informação?

A informação enviada neste exemplo terá a forma

atributo1=valor1 & atributo2=valor2 & atributo3=valor3 & ...

Uma lista de vários atributos, cada um com um valor.

Um exemplo simples do código de um form pode ser visto abaixo:
####Código

<form action="https://www.w3schools.com/action_page.php" target="_blank">
  <label for="fname">Nome:</label><br>
  <input type="text" id="fnameid" name="fname" value="Joao"><br>
  <label for="lname">Sobrenome:</label><br>
  <input type="text" id="lnameid" name="lname" value="Silva"><br><br>
  <input type="submit" value="Enviar">
</form>

Explicação:

-form: tag para delimitar o formulário, os inputs que estiverem dentro desta tag pertencem a este formulário

Resultado:







Ao ser enviado podemos ver uma página que mostrará uma lista de chave e valor das informações:

fname=Joao&lname=Silva

onde o atributo fname tem o valor Joao e o atributo lname tem o valor Silva.

Perceba também que estes valores são passados pela URL (no endereço do site), possibilitando guardar a URL se quiser reenviar as mesmas informações oportunamente.

Tipos de input dentro do form

Dentro do form podemos ter vários tipos de elementos para a tag input.
Aqui vamos listar o text, checkbox e radiobutton.
Uma lista maior pode ser encontrada aqui.

Para escolher o tipo de input temos que escrever o valor do atributo type na tag input.

Cada input deve ter o atributo name que será o nome do atributo deste input.

Text

O tipo text é um textfield onde o usuário pode colocar qualquer palavra.

Temos a possibilidade de ligar o autocomplete

<input type="text" id="fname" name="fname" value="">

Temos a possibilidade de (des)ligar o autocomplete

<input type="text" id="fname" name="fname" value="" autocomplete="off">

Checkbox

São caixas de seleção, onde podemos selecionar quantas quisermos:

<form action="https://www.w3schools.com/action_page.php" target="_blank">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> Eu tenho uma moto</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> Eu tenho um carro</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> Eu tenho um bote</label><br>
  <input type="submit" value="Enviar">
</form>



Radiobutton

São caixas de escolha, onde podemos escolher apenas uma dentre as opções:

<hr>
<p>Escolha a sua linguagem preferida:</p>
<form action="https://www.w3schools.com/action_page.php" target="_blank">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="java" name="fav_language" value="Java">
  <label for="java">Java</label><br>
  <input type="submit" value="Enviar">
</form>
<hr>

Escolha a sua linguagem preferida:




Métodos GET e POST

Ao acessar a internet o computador e o servidor se comunicam através de requisições, que são mensagens enviadas na forma de protocolos.

O método que o form por padrão é o GET. Este método tem as seguintes características:

GET

POST

Exemplo de uso de POST 

<form action="https://www.w3schools.com/action_page.php" target="_blank" method="post">
  <label for="login">Login:</label><br>
  <input type="text" id="login" name="login"><br>
  <label for="pass">Password:</label><br>
  <p style="color:red">Não coloque seu password aqui<br>
  Essa informação aparecerá na tela seguinte
  </p>
  <input type="password" id="pass" name="pass"><br><br>
  <input type="submit" value="Enviar">
</form>



Não coloque seu password aqui
Essa informação aparecerá na tela seguinte



Perceba que as informações enviada não aparecem na URL da tela de resultado

Javascript para verificação 

<hr>
<form action="https://www.w3schools.com/action_page.php" target="_blank" method="post">
  <label for="login" id="lab-login-sc">Login:</label><br>
  <input type="text" id="txt-login-sc" name="login" onclick="checkLoginAlert()"><br>
  <label for="login" id="wrn-login-sc"></label><br>
  <p style="color:red">Não coloque seu password aqui<br>
  Essa informação aparecerá na tela seguinte
  </p>
  <label for="pass"      id="lab-pass-sc">Password:</label><br>
  <input type="password" id="txt-pass-sc" name="pass" onclick="checkPassAlert()"><br>
  <label for="login"     id="wrn-pass-sc"></label><br>
  <input type="submit" value="Enviar">
</form>
<hr>
<script>
var wrn_login = document.getElementById("wrn-login-sc");
var txt_login = document.getElementById("txt-login-sc");
txt_login.addEventListener("keyup", () => {checkLogin()})
function checkLoginAlert(){
  alert("O seu login deve conter 6 ou mais characteres");
}
function checkLogin(){
  if(txt_login.value.length<6){
    wrn_login.textContent = "O seu login deve conter 6 ou mais characteres";
    wrn_login.style.color = "red";
  }else{
    wrn_login.textContent = "Login ok";
    wrn_login.style.color = "green";
  }
}
var wrn_pass = document.getElementById("wrn-pass-sc");
var txt_pass = document.getElementById("txt-pass-sc");
txt_pass.addEventListener("keyup", () => {checkPass()})
function checkPassAlert(){
  alert("Sua senha deve conter a palavra HTML");
}
function checkPass(){
  if(!txt_pass.value.toLowerCase().includes("html")){
    wrn_pass.textContent = "Sua senha deve incluir a palavra HTML";
    wrn_pass.style.color = "red";
  }else{
    wrn_pass.textContent = "Senha ok";
    wrn_pass.style.color = "green";
  }
}
</script>



Não coloque seu password aqui
Essa informação aparecerá na tela seguinte




.

  1. Retirados de w3schools ↩︎