Formulários HTML

Formulários HTML5 não são tão ruins quanto dizem. Possuem boas funções que fazem o uso de códigos .js serem mais úteis para casos mais especiais.

MDN - Documentação completa sobre formulários.

O básico

O propósito de um formulário é enviar dados. Para isso ele faz uso dos métodos GET e POST, que enviam dados utilizando um key-value pair (par chave-valor), que são fornecidos pelos atributos name e value dos elementos do formulário.

1. GET: Envia uma requisição ao browser utilizando os key-value pair como parâmetros visíveis na URL. Normalmente é utilizado para um formulário de pesquisa. Não deve ser utilizado para transmissão de dados sensíveis.

2. POST: Envia dados por "debaixo dos panos" ao servidor. Os dados transmitidos não são visíveis na URL. É utilizado para transmitir dados, de forma geral, como um cadastro em um site, finalização de compra, etc.

Exemplo de URL com parâmetros gerados por um formulário do tipo GET:

domain.com/form?name=value

# exemplo
domain.com/form?user_name=Pedro&user_job=frontend-developer

A ? separa a URL dos parâmetros. O & separa os pares key-value. Ambos são gerados automaticamente pelo browser.

Principais elementos de um formulário

• <form>
• <input>
• <textarea>
• <button>
• <label>
• <fieldset>
• <legend>
• <select>
• <option>
• <optgroup>

<form>

Paired tag. Delimita a área de um formulario. Contém todas as outras tags citadas.

Atributos principais:

• method
• action

<input>

• Atributos - MDN

Self-closing tag. Cria a maioria dos elementos interativos de um formulário, como campos de texto, email, telefone, senha, etc.

<input type="text">
<input type="password">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="image">

<!-- HTML5 -->
<input type="number">
<input type="email">
<input type="tel">
<input type="time">
<input type="url">
<input type="date">
<input type="color">

<!-- para ver todos os types, ver link acima -->

Atributos principais:

• type
• name
• value
• placeholder
• title
• pattern

<textarea>

Paired tag. Cria uma área de texto de mais de uma linha.

<button>

Paired tag. Cria um botão, normalmente para enviar ou resetar o formulário.

<button type="submit">Submit form</form>
<button type="reset">Reset form</form>

<label>

Paired tag. Cria uma etiqueta que pode referenciar um elemento do formulário utilizando o atributo id desse elemento. Exemplo:

<label for="id-do-elemento"></label>
<input type="text" id="id-do-elemento">

Atributo principal:

• for

<fieldset>

Paired tag. Serve para dividir logicamente/semanticamente as seções de um formulário.

<legend>

Paired tag. Serve para dar um título ou legenda a uma determinada seção do formulário. Normalmente vem após o elemento <fieldset>. Não precisa referenciar.

<select>

Paired tag. Delimita a área de um menu dropdown. Deve ser populada com elementos <option>.

Atributo principal:

• name

<option>

Paired tag. Cria os elementos selecionáveis de um menu dropdown. Só precisa do atributo value, pois o name é definido no elemento <select>

Atributo principal:

• value

<optgroup>

Paired tag, com opção de fechamento opcional. Serve para ajudar a organizar a disposição de itens dentro de um menu dropdown. Cria texto visível dentro do menu, mas não pode ser selecionado.

O texto deve ser inserido com o atributo label.

Atributo principal:

• label

Principais atributos

Para mais informações, ver a documentação MDN sobre atributos.

• id
• name
• value
• type
• required
• disabled
• readonly
• placeholder
• checked
• autofocus
• autosave
• pattern
• title
• accept
• max
• maxlength
• step

Exemplo de formulário

<!-- form start-->
<form action="index.html" method="POST">
  <h1>Sign Up!</h1>

  <!-- fieldset 1 -->
  <fieldset>
    <legend><span class="number">1</span> Your basic info</legend>

    <!-- Name field -->
    <label for="name">Name</label>
    <input type="text" id="name" name="user_name" placeholder="Your name">

    <!-- Email field -->
    <label for="mail">Email</label>
    <input type="email" id="mail" name="user_email" placeholder="Your Email">

    <!-- Password field -->
    <label for="password">Password</label>
    <input type="password" id="password" name="user_password" placeholder="Your password" title="At least 8 carachters"pattern="\d{8,50}">
      <p style="font-size: 80%;">*at least 8 characters long</p>

    <!-- Age radio buttons -->
    <label>Age</label>

    <input type="radio" id="under_13" value="under_13" name="user_age">
    <label for="under_13" class="light">Under 13</label><br>

    <input type="radio" id="over_13" value="over_13" name="user_age">
    <label for="over_13" class="light">13 or more</label><br>

  </fieldset>

  <!-- fieldset 2 -->
  <fieldset>
    <legend><span class="number">2</span> More about you</legend>

    <label for="bio">Biography</label>
    <textarea id="bio" name="user_bio" placeholder="Your bio..."></textarea>

    <!-- job role dropdown -->
    <label for="job">Your Job Role</label>
    <select id="job" name="user_job">
      <optgroup label="Web">
        <option value="fontend_developer">Frontend Developer</option>
        <option value="ruby_developer">Ruby Developer</option>
        <option value="php_developer">PHP Developer</option>
        <option value="wordpress_developer">Wordpress Developer</option>
      </optgroup>
      <optgroup label="Mobile">
        <option value="ios_developer">iOS Developer</option>
        <option value="android_developer">Android Developer</option>
      </optgroup>
    </select>

    <!-- Interests checkbox -->
    <label for="interests">Your Interests</label>
    <input type="checkbox" id="interests_coding" name="user_interest" value="coding">
    <label for="interests_coding" class="light">Coding</label>
    <br>

    <input type="checkbox" id="interests_space" name="user_interest" value="space">
    <label for="interests_space" class="light">Space</label>
    <br>

    <input type="checkbox" id="interests_trains" name="user_interest" value="trains">
    <label for="interests_trains" class="light">Trains</label>
    <br>

  </fieldset>

  <!-- Submit buttons -->
  <button type="submit">Sign Up!</button>
  <!-- <input type="submit"> também é válido -->
  <button type="reset">Reset form</button>
</form>