Os formulários são componentes importantes nos sites modernos, usados ​​para coletar dados de usuários, realizar pesquisas e etc.

Formulários são relativamente simples de criar do zero com tecnologias como HTML e CSS.

Vamos ver algumas práticas para a criação e design de formulários web que são fáceis de completar e acessíveis para todos os usuários e dispositivos.

Aprenda o uso adequado dos campos do formulário, incluindo os novos tipos de entrada do HTML5, e descubra como adicionar interatividade, como a validação de formulários, formulários de estilo com CSS e crie layouts sensíveis, adicione interatividade, como validação de formulário e formulários de design para usabilidade e acessibilidade.

CABEÇALHO DO FORMULÁRIO

<!-- cabeçalho do formulário -->
<h1>Nosso formulário</h1>

Criamos um título que descreve o propósito ou o conteúdo do formulário.

FORMULÁRIO

<form id="formulario" action="contato.html" method="post">
       
</form>

Criamos o formulários e passamos alguns atributos a ele.

1. O ( id ) ajuda você a segmentar o CSS para um formulário específico, além de facilitar uma busca via jQuery;
2. O ( method ) é o método de submissão do formulário ( get ) ou ( post );
3. O ( action ) é a ação URI para onde os dados estão sendo enviados.

CAMPO DO TIPO TEXTO

<form id="formulario" action="contato.html" method="post">
 
  <input type="text" name="nome" id="nome" />
 
</form>

Criamos um campo do tipo texto.

1. O ( type ) informa o tipo de campo;
2. O ( name ) é a etiquetas, ou seja, quando é enviado para o servidor;
3. O ( id ) é usado para associar cada largura de campo de entrada em um rótulo.

CAMPO DO TIPO TEXTO + LABEL

<form id="formulario" action="contato.html" method="post">
 
  <label for="nome">Seu nome</label><br />
  <input type="text" name="nome" id="nome" />
 
</form>

Acima do campo nome, adicionamos um ( label ) e atribuímos um ( for ) a ele.

O atributo ( for ), atribui ao leitor de tela qual rótulo vai largura, ou seja, qual entrada ele vai dar o foco ao clicar em determinado ( label ).

No nosso exemplo ele vai dar o foco no campo nome, pois o atributo ( for ) faz referência com ( id ) do campo.

CAMPO DO TIPO EMAIL

<form id="formulario" action="" method="post">
 
  <label for="email">Seu e-mail</label><br />
  <input type="email" name="email" id="email" />
 
  <input type="submit" name="enviar" />
 
</form>

Nesse passo adicionamos o campo de e-mail.

Perceba que no atributo ( type ) indicamos o email, isso vai facilitar aos usuários ao acessarem seu site em um dispositivo móvel. Além desse campo já ter uma validação padrão do próprio HTML5 que válida o email com @.

1
<input type="email" name="email" id="email" multiple />
Se você quiser passar mais de um e-mail nesse campo, basta incluir o ( multiple ) no campo, como mostrado acima.

CAMPO DO TIPO URL

<form id="formulario" action="" method="post">
 
  <label for="url">Seu site</label><br />
  <input type="url" name="url" id="url" />
 
  <input type="submit" name="enviar" />
 
</form>

Adicionamos agora mais um campo onde podemos enviar o link do nosso site.

Esse campo é do tipo URL, isso facilita para que os browsers identifiquem qual é tipo de campo que está sendo passado.

Igual o campo e-mail, esse campo tem uma validação padrão do HTML5 que verifica se o está sendo passado é um link.

CAMPO DO TIPO NÚMEROS

<form id="formulario" action="" method="post">
   
  <label for="numero">Didite ou escolhe os números</label><br />
  <input type="number" name="numero" id="numero" min="5" max="20" step="2" value="10" />
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

Inserimos acima o campos do tipo números, usado para inserir números positivos ou negativos, incluindo decimais.

Você pode atribuir um valor mínimo e máximo para este campo. Também podemos setar um valor padrão, no caso setamos o número 10 para o atributo ( value ).

Este campo também vem com uma validação padrão do HTML5, caso o número seja menor que 10 ou maior que 20. Você verá uma mensagem dizendo que os valores tem que está entre 10 e 20.

Você pode definir o intervalo entre os números que o campo deve aceitar com atributo ( step ) que no caso definimos com valor 2, ou seja, ao clicar nas setas ele vai pular de 2 em 2 números para mais ou para menos.

CAMPO DO TIPO DATA

<form id="formulario" action="" method="post">
   
  <label for="data">Selecione a data</label><br />
  <input type="date" name="data" id="data" min="2018-01-01" max="2018-12-31" />
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

Criamos o campo do tipo data, veja que podemos setar os valores nos atributos ( min ) e ( max ), no caso setamos de janeiro à dezembro de 2018.

CAMPO DO TIPO TEMPO

<form id="formulario" action="" method="post">
   
  <label for="tempo">Tempo</label><br />
  <input type="time" name="tempo" id="tempo" />
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

Criamos o campo do tipo tempo, esse campo aceita o atributo ( step ). Como o nome já diz, se usa para indicar o tempo.

CAMPO DO TIPO TELEFONE

<form id="formulario" action="" method="post">
   
  <label for="telefone">Telefone</label><br />
  <input type="tel" name="telefone" id="telefone" />
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

Criamos o campo do tipo telefone, esse campo quando acessado do celular ele abre a opção de número do teclado do dispositivo.

<form id="formulario" action="" method="post">
   
  <label for="telefone">Telefone</label><br />
  <input type="tel" name="telefone" id="telefone" />
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

FIELDSET

<fieldset>
  <legend>Qual é a sua cor preferida?</legend>
</fieldset>

O fieldset e a legenda são usados para agrupar botões ou caixas de seleção em conjunto e fornecer a pergunta que acompanha.

CAMPO DO TIPO RADIO BUTTON

<form id="formulario" action="" method="post">
   
  <fieldset>
    <legend>Qual é a sua cor preferida?</legend>
    <input type="radio" name="cores" id="vermelha" value="Vermelha" /> <label for="vermelha">Vermelha</label><br />
    <input type="radio" name="cores" id="azul" value="Azul" checked /> <label for="azul">Azul</label><br />
    <input type="radio" name="cores" id="verde" value="Verde" /> <label for="verde">Verde</label>
  </fieldset>
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

A entrada do botão de rádio permite ao usuário escolher apenas uma opção.

Se você não entende ainda o uso desse campo, se atente no atributo ( name ), pois todos devem está com mesmo nome, caso contrário não vai funcionar adequadamente. O atributo ( id ) podem ser diferentes sem problemas.

CAMPO DO TIPO CHECKBOX

<form id="formulario" action="" method="post">
   
  <fieldset>
    <legend>Qual animal você gosta?</legend>
    <input type="checkbox" name="cachorro" id="cachorro" value="Cachorro" /> <label for="cachorro">Cachorro</label><br />
    <input type="checkbox" name="gato" id="gato" value="Gato" /> <label for="gato">Gato</label><br />
    <input type="checkbox" name="cavalo" id="cavalo" value="Cavalo" /> <label for="cavalo">Cavalo</label>
  </fieldset>
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

A entrada do checkbox permite ao usuário escolher mais de uma opção.

CAMPO DO TIPO SELEÇÃO

<form id="formulario" action="" method="post">
   
  <label>Que tipo de comida você gosta?</label><br />
  <select id="cardapio" name="cardapio"> 
    <option value="">Selecione a comida</option>
    <option value="Italiana">Italiana</option>
    <option value="Pizza">Pizza</option>
    <option value="Gnocchi">Gnocchi</option>
    <option value="Espaguete">Espaguete</option>
    <option value="Lazanha">Lazanha</option>
  </select>
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

Com a entrada de seleção, você seleciona a opção desejada.

<select id="cardapio" name="cardapio" size="5" multiple> 
  <option value="">Selecione a comida</option>
</select>

Ele permite também ao usuário escolher mais de uma opção bastando para isso incluir o ( multiple ) no campo.

Em conjunto com o ( multiple ) é interessante usar o ( size ) para definirmos uma quantidade de opções que ficará disponíveis para o usuário.

<select id="cardapio" name="cardapio">
    <optgroup label="Comida Brasileira">
      <option value="">Selecione a comida</option>
      <option value="Italiana">Feijoada</option>
      <option value="Pizza">Moqueca Capixaba</option>
      <option value="Pizza">Carne de sol</option>
    </optgroup>
     
    <optgroup label="Comida Italiana">
      <option value="Gnocchi">Risotos de Milão</option>
      <option value="Espaguete">Pizza de Nápoles</option>
      <option value="Lazanha">Alcachofras Romanas</option>
    </optgroup>
</select>

Outra dica bem bacana que talvez você não conheça ou nunca usou, é um agrupamento das categorias com o ( optgroup ), e dentro dele você passa o nome da catagoria em um ( label ).

Isso é de extrema importância quando se quer separar as categorias para organizar melhor o conteúdo.

CAMPO DO TIPO ÁREA DE TEXTO

<form id="formulario" action="" method="post">
   
  <label>Deixe sua mensagem</label><br />
  <textarea id="texto" name="texto" rows="5">
    ...
  </textarea>
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

Nesse campo você pode definir o número de linhas e colunas com os atributos ( rows ) e ( cols ).

CAMPO DO TIPO COLOR

<form id="formulario" action="" method="post">
   
  <label for="cor">Cores</label><br />
  <input type="color" name="cor" id="cor" />
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

O tipo de entrada de cor permite ao usuário selecionar uma cor.

CAMPO DO TIPO UPALOD DE ARQUIVOS

<form id="formulario" action="" method="post">
   
  <label for="arquivo">Uploade de arquivos</label><br />
  <input type="file" name="arquivo" id="arquivo" />
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

O tipo de entrada do arquivo permite que o usuário faça o upload de um arquivos.

<input type="file" name="arquivo" id="arquivo" multiple />

O atributo ( multiple ) permite que o usuário carregue mais de um arquivo ao mesmo tempo.

<input type="file" name="arquivo" id="arquivo" accept="image/*" />

O atributo ( accept ) especifica quais tipos de arquivos são permitidos. Você especifica um JPG, GIF, PNG e etc.

CAMPO DO TIPO SENHA

<form id="formulario" action="" method="post">
   
  <label for="senha">Digite a senha</label><br />
  <input type="password" name="senha" id="senha" />
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

O tipo de entrada de senha mascara os caracteres que o usuário inseriu no campo.

CAMPO DO TIPO OCULTO

<form id="formulario" action="" method="post">
   
  <label for="oculto">Campo oculto</label><br />
  <input type="hidden" name="oculto" id="oculto" />
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

O tipo de entrada oculta contém dados que são passados para o servidor, mas não são mostrados ao usuário.

CAMPO DO TIPO INTERVALO

<form id="formulario" action="" method="post">
   
  <label for="range">Campo range</label><br />
  <input type="range" name="range" id="range" min="10" max="50" step="2" />
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

O tipo de entrada do intervalo permite ao usuário escolher entre um intervalo de valores em um controle deslizante.

Podemos definir valores nos atributos ( min, max e step ).

CAMPO DO TIPO PESQUISA

<form id="formulario" action="" method="post">
   
  <label for="search">Campo de pesquissa</label><br />
  <input type="search" name="search" id="search" />
 
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

O tipo de entrada de pesquisa permite ao usuário inserir um termo de pesquisa.

BOTÃO ENVIAR

<form id="formulario" action="" method="post">
   
  <input type="submit" name="enviar" value="Enviar" />
 
</form>

O tipo de botão ( submit ) envia os dados ao servidor.

BOTÃO LIMPAR

<form id="formulario" action="" method="post">
   
  <input type="reset" name="limpar" id="limpar" value="Limpar" />
 
</form>

O tipo de botão ( reset ) é um botão que limpa todos os campos do formulário.

BOTÃO DO TIPO BUTTON

<form id="formulario" action="" method="post">
   
  <input type="button" name="nao_envia" id="nao_envia" value="Não envia" />
 
</form>

O tipo de entrada do ( type="button" ) é um botão que não tem nenhuma ação associada a ele.

BOTÃO DO TIPO SUBMETER

<form id="formulario" action="" method="post">
   
  <button type="submit" name="envia_dados">Enviar dados</button>
 
</form>

O tipo de botão com ( type=”submit” ) envia os dados.

BOTÃO DO TIPO BUTTON

<form id="formulario" action="" method="post">
   
  <button type="button" name="nao_envia">Não envia</button>
 
</form>

O tipo de botão ( type="button" ) não tem nenhuma ação associada a ele.

BOTÃO DO TIPO IMAGE

<form id="formulario" action="" method="post">
   
  <input type="image" src="imagem.jpg" alt="Imagem" width="50" height="30" />
 
</form>

O tipo de entrada do botão ( type="image" ) exibe uma imagem, mas funciona como um botão para ( submit ) e envia os dados do formulário.

ATÉ O PRÓXIMO POST

Sentiu falta de alguma coisa óbvia? Comente, dei sua opinião, ajude a divulgar o Blog.

Inscreva-se no Youtube: https://www.youtube.com/htmlecsspro

Curta nossa Fanpage: https://www.facebook.com/htmlecsspro

Entre para o nosso Grupo: https://www.facebook.com/groups/htmlecsspro