COMO CRIAR FORMULÁRIOS COM HTML

Formulário é uma forma de capturar informações concedidas pelo usuário na sua página.

Tag Form

Para montar um formulário iniciamos com a tag form. Vejamos um exemplo:

<form method="post" action="">

    Aqui vem o formulário

</form>

Nessa tag temos dois atributos: method e action.

Atributo method

Este atributo é responsável por definir o método de envio de requisição. Temos quatro principais e muito usado hoje em dia: GET, POST, PUT, DELETE.

GET: envio de requisição padrão. Usado quando queremos usar o formulário para enviar os dados pelaURL e obter informações com esses dados.
POST: para registrar informações no sistema de alguma forma, seja no banco de dados, arquivos, array, seção, etc.
PUT: esse é para atualizar dados, fazer alterações em registros já cadastrados.
DELETE: como o próprio nome sugere, é para excluir registro.

Esses quatro acima é de boa prática o seu uso conforme a necessidade e o conceito de cada. Mas ainda hoje em dia muito programadores usamo o POST também para PUT e DELETE.

Atributo action

Esse atributo é responsável por informar o URL de destino onde será consumido as informações do formulário.

<form method="post" action="envio.php">

    Aqui vem o formulário

</form>

Tag input

A tag input é incluída dentro da tag form e possui vários atributos. Vejamos abaixo um exemplo:

<input type="text" placeholder="Digite o seu nome" name="name" id="name" />

Exemplo do campo:

Atributo type

O atributo type é responsável por especificar o tipo de campo. O valores para o type podem ser:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Quando não indicado esse atributo o seu valor padrão é text.

button

<input type="button" value="Exemplo de botão">

checkbox

<input type="checkbox" value="red" name="colors"> Vermelho<br>
<input type="checkbox" value="orange" name="colors"> Laranja<br>
<input type="checkbox" value="blue" name="colors"> Azul

Vermelho
Laranja
Azul

color

<input type="color" value="#ffffff" name="color">

Escolha a cor

date

<input type="date" value="Exemplo de botão" name="date">

datatime-local

<input type="datetime-local" value="" name="date_time">

email

<input type="email" name="email">

Seu E-mail

file

<input type="file" name="file">

hidden

<input type="hidden" value="1" name="id">

image

<input type="image" value="Exemplo de botão">

month

<input type="month" name="month">

number

<input type="number" name="number">

password

<input type="button" value="Exemplo de botão">

radio

<input type="radio" value="red" name="color"> Vermelho<br>
<input type="radio" value="orange" name="color"> Laranja<br>
<input type="radio" value="blue" name="color"> Azul

Vermelho
Laranja
Azul

range

<input type="range" min="5" max="20">

reset

<form>
<input type="text" placeholder="Digite seu nome"><br>
<input type="reset" value="Limpar formulário">
</form>

search

<input type="search" placeholder="Pesquise">

submit

<input type="submit" value="Enviar Mensagem">

tel

<input type="tel" placeholder="Seu telefone" name="phone">

text

<input type="text" name="text" placeholder="Seu nome">

time

<input type="time" name="time">

url

<input type="url" name="url" placeholder="Qual o seu site">

week

<input type="week" name="week">

Atributos

Os campos de formulário possuem alguns atributos interessantes, onde podemos personalizar o seu uso.

required

Quando adicionado esse atributo torna o campo de preenchimento obrigatório

<form>
   <input type="email" required>
   <button type="submit">Enviar</button>
</form>

placeholder

Permite incluir um texto sugestivo dentro do campo.

<input type="text" placeholder="Digite o seu nome">

min e max

Usado em campos numéricos para especificar o valor mínimo e máximo requerido.

<input type="number" min="5" max="10">

maxlenth

Especifica a quantida máxima de caracteres dentro do campo.

<input type="text" maxlength="5">

Fonte: w3school