Curso de HTML – Aula 7: Criando formulários elaborados

Esta é a sétima aula do Curso de Desenvolvimento Web com HTML e caso ainda não tenha lido os artigos anteriores a este, segue os links:

Curso de Desenvolvimento Web com HTML

Aprendemos na última aula do nosso curso de desenvolvimento web a criar um formulário na linguagem HTML.  Nesta aula, daremos continuidade no assunto e aprenderemos a fazer um formulário mais elaborado, adicionando novos elementos para oferecer mais interatividade na nossa página web.

Observação: Para todos os exemplos desta aula, utilizaremos o código abaixo que contem a estrutura básica para a criação de um formulário em uma página web.

<html>
<head>
     <title>Formulário elaborado</title>
</head>
<body>
     <form action="gravar.php" method="get">

     </form>
</body>
</html>

 

O elemento ComboBox – tag <select>

O primeiro elemento que tornará o nosso formulário mais interativo é o ComboBox, que permite ao usuário escolher um item de uma lista pré-definida, ou seja, você oferece para seu usuário algumas opções e ele escolhe uma.

Para criar uma lista em um ComboBox é necessário a utilização da tag <select> e, para cada item dessa lista, é necessário uma tag <option>. O texto de cada item da lista que será exibido para o usuário deve ser especificado entre as tags <option> e </option>. Porém, o valor que será armazenado no banco de dados deve ser informado no atributo value. Vamos a um exemplo para entendermos melhor como funciona o código.

<p>Escolaridade:
<select name="escolaridade">
     <option value="em"> Ensino Médio </option>
     <option value="nt"> Nível Técnico </option>
     <option value="ns"> Nível Superior </option>
</select>
</p>

 

Curso HTML - formulários elaborados

Explicando cada linha do código

  • Na primeira linha temos a tag <p> apenas para criarmos o rótulo “Escolaridade:” na frente do ComboBox;
  • Na segunda linha estamos informando ao navegador que vamos criar uma lista de itens que será identificada por “escolaridade” através do atributo name;
  • Na terceira linha estamos criando o primeiro item que compõe a nossa lista. Para isso, abrimos a tag <option>, definimos um valor para esse item através do atributo value, colocamos o texto que irá aparecer para o usuário e, por fim, fechamos com a tag </option>;
  • As duas linhas seguintes seguem o mesmo princípio da anterior. E, podemos acrescentar quantas linhas forem necessárias para preencher a nossa lista de opções no ComboBox;
  • Na sexta linha estamos finalizando a nossa lista de itens e na última, o parágrafo criado no rótulo “Escolaridade:”.

 

O elemento Área de Texto – tag <textarea>

A tag <textarea> exibe uma Área de Texto na qual o usuário poderá inserir um texto qualquer. A diferença desta tag em relação à tag <input type=“text”> é que a <textarea> permite a inserção de textos longos e com quebras de linha.

Neste elemento é necessário especificar os atributos cols e rows, que são utilizados para definir o número de caracteres nas colunas e o número de linhas. Outro detalhe importante é que não existe neste elemento o atributo value. Dessa forma, caso seja necessário definir um texto inicial, ele deve estar entre as tags <textarea> e </textarea>. Vejamos agora um exemplo para a criação de uma Área de Texto.

<p>Observações:<textarea name="obs" cols="20" rows="5"></textarea></p>

 

Curso HTML - formulários elaborados

O elemento “Botão Radio” – tag <input type=”radio”>

Este elemento é utilizado quando precisamos oferecer múltiplas escolhas para o usuário e ele só pode escolher uma única opção. Para que o navegador saiba as opções que fazem parte do mesmo grupo, e permita que só uma seja selecionada, basta definir o mesmo nome no atributo name de cada tag <input type=”radio”.




Além do atributo name, é preciso também o value para definirmos o valor associado à opção escolhida pelo usuário e o checked, em apenas uma tag <input type=”radio” do grupo, pois essa opção será a default, ou seja, caso o usuário não escolha nenhuma opção, essa marcada com checked será o valor padrão.

Veja abaixo um exemplo para a criação de um grupo de Botões Radio.

<input type="radio" name="cargo" value="1" checked /> Gerência
<input type="radio" name="cargo" value="2" /> Financeiro
<input type="radio" name="cargo" value="3" /> Recepção
<input type="radio" name="cargo" value="4" /> Administrativo

 

Curso HTML - formulários elaborados

Observação: Todos os atributos name do grupo devem conter o mesmo nome. Em contrapartida, no atributo value, os valores precisam diferentes, pois são eles que serão gravados posteriormente no banco de dados da aplicação.

 

O elemento “Botão de Checagem” – tag <input type=”checkbox “>

Este elemento também é utilizado para oferecer múltiplas opções para o usuário, mas com a diferença que no Botão de Checagem é possível escolher várias opções dentro de um grupo. Para tanto, cada opção deve possuir um atributo name independente.

O atributos value funciona da mesma forma que no elemento “Botão Radio”. Já o atributo checked é opcional.

Veja abaixo um exemplo para a criação de um grupo de Botões de Checagem.

    <input type="checkbox" name="area1" value="com" /> Computação
    <input type="checkbox" name="area2" value="eng" /> Engenharia
    <input type="checkbox" name="area3" value="bio" /> Biologia
    <input type="checkbox" name="area4" value="psi" /> Psicologia

 

Curso de HTML - Exercício de formulário

O Botão Reset – tag <input type=”reset”>

O Botão Reset é utilizado para “limpar” todas as alterações realizadas no formulário e voltar os campos para os valores default, ou seja, os valores iniciais especificados nos atributos value de cada um dos elementos.

Veja abaixo um exemplo para a criação de um Botão Reset.

<input type ="reset" value="Limpar" />

 

As tags <label>, <fieldset> e <legend>

As tags <label>, <fieldset> e <legend> são utilizadas exclusivamente nos formulários e diferem um pouco das tags que estudamos até o momento. Basicamente, elas funcionam como marcações e rótulos para os elementos que criamos em nossos formulários.

No primeiro exemplo dessa aula nós utilizamos o texto “Escolaridade” em uma tag <p> para criar o rótulo do ComboBox. Na prática isso funciona, mas seria mais correto substituir a tag <p> pela <label> que foi criada justamente para essa finalidade. Veja abaixo como ficaria o primeiro exemplo modificado com a tag <label>.

<label>Escolaridade:
<select name="escolaridade">
     <option value="em"> Ensino Médio </option>
     <option value="nt"> Nível Técnico </option>
     <option value="ns"> Nível Superior </option>
</select>
</label>

 

As tags <fieldset> e <legend> trabalham em conjunto e servem para criarmos uma divisão dos elementos dentro do nosso formulário. Imagine, por exemplo, que você precise criar um formulário de cadastro com diversos campos para o usuário preencher. Em situações como  essa é muito provável que você consiga separar os campos por categorias, podendo ser, por exemplo, dados pessoais e dados profissionais. Vamos a um exemplo bem simples para compreendermos essa ideia.

<p>Dados pessoais</p>
    <label>Nome:<input type="text" name="nome" /></label><br />
    <label>Idade:<input type="text" name="idade" /></label><br />

<p>Dados profissionais</p>
     <label>Escolaridade:
     <select name="escolaridade">
          <option value="em"> Ensino Médio </option>
          <option value="nt"> Nível Técnico </option>
          <option value="ns"> Nível Superior </option>
      </select>
      </label>
      <br />
      <label>Área de atuação
           <input type="radio" name="cargo" value="1" checked> Gerência
           <input type="radio" name="cargo" value="2" > Financeiro
           <input type="radio" name="cargo" value="3" > Recepção
     </label>

 

Curso HTML - formulários elaborados

Se observarmos com muita atenção, percebemos que no exemplo acima temos uma separação entre os dados pessoais e profissionais. Entretanto, existe uma forma muito mais correta e elegante de fazer essa separação com as tags <fieldset> e <legend>.

A tag <fieldset> é utilizada para criar uma seção, separando um conjunto de elementos do formulário com uma linha ao redor. Já a tag <legend> é utilizada para criar a legenda de cada seção, neste caso, o texto que aparece na parte superior de cada conjunto.

Vamos então modificar o exemplo anterior utilizando agora as tags <fieldset> e <legend>.

<fieldset>
     <legend>Dados pessoais</legend>
     <label>Nome:<input type="text" name="nome" /></label><br />
     <label>Idade:<input type="text" name="idade" /></label><br />
</fieldset>

<fieldset>
     <legend>Dados profissionais</legend>
     <label>Escolaridade:
     <select name="escolaridade">
          <option value="em"> Ensino Médio </option>
          <option value="nt"> Nível Técnico </option>
          <option value="ns"> Nível Superior </option>
     </select>
     </label>
     <br />
     <label>Área de atuação
          <input type="radio" name="cargo" value="1" checked> Gerência
          <input type="radio" name="cargo" value="2" > Financeiro
          <input type="radio" name="cargo" value="3" > Recepção
     </label>
</fieldset>

 

Curso HTML - formulários elaborados

Podemos observar que o nosso formulário ficou com uma melhor divisão e uma aparência muito mais interessante, mesmo sem termos ainda utilizado a estilização das CSS (folha de estilo em cascata).

 

EXERCÍCIO:

Seguindo o modelo da imagem abaixo, crie um formulário utilizando os elementos que aprendemos nessa sétima aula do curso de desenvolvimento web com HTML.

Curso de HTML - Exercício de formulário

 

Continue este curso em: Aula 8: Meta tags e perguntas frequentes

Coordenador de curso na Etec de Itapira, pós-graduado em desenvolvimento de sistemas web e professor nos cursos de Administração e Técnico em Informática para Internet. Nerd por vocação e blogueiro por opção, é autor do livro “Diário de um Blogueiro” e dos blogs Neurônio 2.0 e Hiperbytes.

6 COMENTÁRIOS

  1. Excelente ajuda, estou iniciando e construindo meu próprio site. Suas informações estão me ajudando em muito, esta informações estão contidas em uma apostila ou somente acesso pelo artigo?

    • Olá André! Fico muito feliz que meus artigos estejam sendo úteis a vocês.

      Respondendo sua dúvida. Este material está disponível apenas aqui no Hiperbytes.

      Abraços,
      Júnior Gonçalves

  2. Bom dia, será que voce pode ajudar a criar uma caixa de seleção com quatro opção, como exemplo uma caixa de seleçao com estado que carrega outra caixa de seleção do municipio que carrega outra caixa de seleçao de bairro e que carrega outra caixa de seleção de ruas

    Obrigado

    • Bom dia André! Para desenvolver essa sua aplicação você precisará de uma base de dados e um sistema em linguagem de programação para realizar os filtros. Infelizmente não tenho condições (tempo) de ajudar a desenvolver isso. Abraços,

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here