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

Esta é a sétima aula do Curso de Desenvolvimento Web com HTML na qual continuaremos a aprender sobre criação de formulários HTML. Caso ainda não tenha lido os artigos anteriores a este, segue os links:

Nesta aula daremos continuidade no assunto abordado no último artigo 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

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>

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 “Botão Radio”

O elemento “botão rádio” é 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

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 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 CheckBox” é 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 CheckBox.

<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

O Botão 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.

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

O elemento “Área de Texto“

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>

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>

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>

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.

Pesquisar este blog