Formulario Simples

 O que é formulário?

É a área usada para coletar dados:

• nome
• e-mail
• senha
• pesquisa
• comentário
• login
• cadastro
• contato
• busca

Tudo isso geralmente usa a tag:

<form>

</form>

Estrutura básica:

<form>

  <input type="text">

  <button>Enviar</button>

</form>

Principais tags de formulário:

<form> | Container principal. | Agrupa os campos.

<form>

...

</form>

<input> | Campo de entrada.

<input type="text">

Pode mudar o tipo:

• text
• email
• password
• number
• date
• checkbox
• radio
• file
• submit

<textarea> | Caixa de texto grande. | Usado para mensagens.

<textarea></textarea>

<button> | Botão clicável.

<button>Enviar</button>

<label> | Nome do campo. | Ajuda acessibilidade e organização.

<label>Nome</label>

<input type="text">

<select> e <option> | Lista de escolhas.

<select>

  <option>Brasil</option>

  <option>Portugal</option>

</select>

Exemplo completo:

<form>

<label>Nome</label>

<input type="text">

<label>Email</label>

<input type="email">

<label>Mensagem</label>

<textarea></textarea>

<button>Enviar</button>

</form>

 CSS em formulários

input, textarea{

  width: 100%;

  padding: 10px;

}

Corpo do formulário mais completo:

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

    <!-- formulario-->

        <div>

            <label for="age">Idade:</label>

            <input type="text" name="age">

        </div>

        

    <!-- select-->

    <div>

     <label for="job">Selecione sua profissão:</label>

     <select name="job">

         <option value="deselvolvedor">Desenvolvedor</option>

         <option value="designer">Designer</option>

         <option value="devops">DevOps</option>

     </select>

    </div>

    <!-- 4 - Envio de formulario-->

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

    </form>

Explicando formulário por partes

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

→ <form> inicia o formulário.
→ action="register.php" = para onde os dados serão enviados.
→ method="post" = envia dados de forma oculta no corpo da requisição.

<label for="age">Idade:</label>

→ Texto identificando o campo.
→ for="age" conecta o label ao campo com id="age".

<input type="text" name="age">

→Campo para digitar texto.
→ type="text" = caixa comum.
→ name="age" = nome enviado ao servidor.

<label for="job">Selecione sua profissão:</label>

→  Texto explicando o campo de seleção.

<select name="job">

→   Cria lista de opções.

→   name="job" = nome enviado ao servidor.

<option value="desenvolvedor">Desenvolvedor</option>

→   Item da lista.

→   value="" = valor real enviado.

→    Texto entre tags = o que aparece para o usuário.

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

→   Botão de envio.

→  input botão

→   type="submit" envia o formulário.

→   value="Enviar" define o texto do botão.

</form>

→  Fecha o formulário.