O método POST

O primeiro passo para podermos criar novas anotações é permitir que o usuário preencha essas informações em algum lugar da nossa página. Para isso utilizaremos as tags <form> e <input>.

<form>
  <label for="titulo">Título</label>
  <input id="titulo" type="text" name="titulo" />

  <label for="detalhes">Detalhes</label>
  <textarea id="detalhes" name="detalhes"></textarea>

  <input type="submit" />
</form>

No código acima temos um formulário com 3 blocos de elementos. As tags <label> são utilizadas para adicionar um texto relacionado a cada <input>. Se quiser saber mais, consulte esta página. Uma característica útil dos labels é que ao ser clicado, o seu input recebe o foco da interação.

Ambas as tags de input de texto (<input> e <textarea>) possuem os atributos id e name. O id é utilizado pela página para associar o for do <label> com o input correto. O name é utilizado como a chave de um dicionário que é enviado para o servidor (veremos mais detalhes em breve).

Finalmente, o último <input> é o botão de submissão do formulário, que faz com que o navegador envie essas informações para o servidor. Agora, precisamos entender melhor como as informações são enviadas ao servidor.