Formulário II – Mão na massa…

Depois de conhecer as tags que iremos utilizar, esta é a hora de utilizá-las na marcação de nosso formulário. Existem n formas de fazer a marcação de formulários e certamente não poderei descrever todas elas aqui. Neste post abordarei algumas práticas que utilizo, lembrando sempre que cada caso deverá ser analisado, pois nenhuma das soluções descritas a seguir atua em caráter imperativo.

Antes de irmos pra marcação é necessário abordar alguns pontos, para facilitar a compreensão do código:

No formulário teremos três grupos de dados. Cada grupo será delimitado por um fieldset que possui um título associado a ele através da tag legend.

Inputs do tipo radio são utilizados quando desejarmos que o usuário escolha apenas uma das alternativas ofertadas, tal tratamento é feito atribuindo o mesmo nome (propriedade name) a todos os inputs que pertencerem ao mesmo grupo.

Inputs do tipo checkbox devem ser utilizados quando o usuário puder escolher mais de uma das opções disponíveis; checkbox que pertençam ao mesmo grupo devem possuir o mesmo nome (propriedade name). Na nomeação dos inputs foram utilizados colchetes [] junto ao nome (propriedade name) para que possamos recuperar os dados enviados pelo checkbox como um array no php.

A tag label é utilizada pra criar um rótulo para os elementos dos formulários, e uma conseqüência de seu uso correto é o direcionamento do foco ou do cursor para o respectivo elemento quando o usuário clica em seu rótulo. Para que isso aconteça o relacionamento entre label e campo pode ser feito de duas formas: deixando o campo fora da label e fazendo uso do atributo for (tal propriedade terá como valor o id do campo com que o label se relaciona), ou colocando o campo dentro do label (associação implícita) o que faz com que ele receba automaticamente o link com o rótulo correspondente. A associação implícita é geralmente utilizada quando se tem a consciência que o rótulo possui grande expressividade dentro do formulário, quando o elemento por ser pequeno necessita que o usuário tenha demasiada destreza com o mouse para preenche-lo ou quando diante da numerosidade de elementos torna-se inviável a criação de seus identificadores(ids).

A recuperação no php de um dado presente em um determinado campo quando o formulário é submetido é feita através da referência ao seu nome,  que é o valor atribuído a propriedade name. Portanto cada campo deverá ter um name para que seja possível capturar seus dados com php.

A propriedade value representa o valor que o campo adquire quando os dados são submetidos, portanto em tags como o select ou um conjunto de inputs (partilham o mesmo name) do tipo radio o valor associado ao name será correspondente a opção que estiver marcada.

Em inputs do tipo submit e reset a propriedade value representa texto que será escrito no corpo do botão.

As tags Button e textarea não possuem a propriedade value, pois o valor que será enviado encontra-se entre suas tags de abertura e fechamento.

As tags que constroem os campos de nosso formulário são tags inline, e por isso não apresentam quebra de linha em seu inicio e fim.  Devido a isto muitas literaturas, inclusive em textos do W3C, há a utilização de tags de parágrafo (ou outras tags menos apropriadas) para definir linhas dentro do formulário ou para agrupar seus elementos. No entanto, tendo em vista que o form é uma tag de bloco e o fieldset também, acredito que os elementos que se encontrarem dentro de tais tags já estarão em blocos definidos sem que seja obrigatório a criação de blocos internos.

Dito isto vamos para prática segue o HTML:

<form id="form_base" method="get" action="">

<fieldset id="dpessoal">
 <legend>Dados Pesoais</legend>
 <label for="nome">Nome: </label>
 <input type="text" name="nome" id="nome" /><br />
 <label for="endereco">Endereço: </label>
 <input type="text" name="endereco" id="endereco" /><br />
 <label for="email">Email: </label>
 <input type="text" name="email" id="email" /><br />
 <label for="esco">Escolaridade: </label>
 <select name="esco" id="esco">
  <option value="basico">Nível Básico</option>
  <option value="medio">Nível Médio</option>
  <option value="superior">Nível Superior</option>
 </select><br />
 <label for="observacoes">Observações: </label>
 <textarea name="observacoes" id="observacoes"></textarea><br />
</fieldset>

<fieldset class="escolha">
 <legend>Natureza do Cargo</legend>
 <label>
  <input type="radio" name="cargo" value="gerencia"/> Gerência
 </label>
 <label>
  <input type="radio" name="cargo" value="financeiro"/> Financeiro
 </label>
 <label>
  <input type="radio" name="cargo" value="recepcao"/> Recepção
 </label>
 <label>
  <input type="radio" name="cargo" value="administrativo"/> Administrativo
 </label>
 <label>
  <input type="radio" name="cargo" value="juridico"/> Jurídico
 </label>
 <label>
  <input type="radio" name="cargo" value="outros"/> Outros
 </label>
</fieldset>

<fieldset class="escolha">
 <legend>Área de Interesse</legend>
 <label>
  <input type="checkbox" name="check[]" value="computacao"/> Computação
 </label>
 <label>
  <input type="checkbox" name="check[]" value="biologia" /> Biologia
 </label>
 <label>
  <input type="checkbox" name="check[]" value="comunicacao" /> Comunicação
 </label>
 <label>
  <input type="checkbox" name="check[]" value="meio-ambiente" /> Meio Ambiente
 </label>
 <label>
  <input type="checkbox" name="check[]" value="engenharia" /> Engenharia
 </label>
 <label>
  <input type="checkbox" name="check[]" value="historia" /> História
 </label>
 <label>
  <input type="checkbox" name="check[]" value="psicologia" /> Psicologia
 </label>
</fieldset>

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

</form>

O código acima será renderizado da seguinte forma:

Agora que já temos nossa marcação nós podemos começarmos a formatá-la, mas só iremos fazer isso no próximo post.

Posts da série formulário:
Formulário I – Conhecendo as Tags
Formulário II – Mão na massa…
Formulário III – Formatação

Você também vai gostar de ler:

• Formulário I – Conhecendo as Tags
• Recuperando dados de um checkbox como array
• Formulário III – Formatação

Tags: Formulário, Web, Webstandards

This entry was posted on agosto 20th, 2009 and is filed under HTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response or Trackback from your own site.