Projetista Digital

Olá Pessoal,

Falamos anteriormente sobre o que são formulários web e o elemento INPUT. Hoje continuaremos a descrever os elementos que compõem um formulário. Então, mãos à obra:

Elementos SELECT, OPTION e OPTGROUP

Chamamos de SELECT aquelas caixinhas de seleção, onde ao pressionar uma seta para baixo, visualizamos uma lista de opções, dentre as quais escolheremos apenas uma. Para criar uma caixa de seleção, basta utilizar as tags <select></select>. Uma vez criada a caixa de seleção, utilizaremos o elemento OPTION para criar as opções a serem selecionadas. Cada opção será marcada pelas tags <option></optiont>. Veja o exemplo abaixo:

1
2
3
4
5
6
7
8

<form action="" method="post">
<select>
<option>HTML & XHTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>PHP</option>
</select>
</form>

Resultado:

Em caixas de seleção extensas, onde o usuário terá uma lista enorme de opções para escolha, pode ser interessante agrupar as opções que tenham relações entre si. Para criar grupos de opções, utilizaremos o elemento OPTGROUP. Veja como fica o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<form action="" method="post">
<select>
<optgroup label="Camada Visual">
    <option>HTML & XHTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
</optgroup>
<optgroup label="Programação">
    <option>PHP</option>
    <option>Phyton</option>
    <option>Ruby</option>
</optgroup>
<optgroup label="Banco de Dados">
    <option>Modelagem de Dados</option>
    <option>Linguagem SQL</option>
    <option>MySQL Server</option>
</optgroup>
</select>
</form>

Resultado:

Elemento TEXTAREA

Sabemos como criar caixas de texto com uma única linha mas, não temos idéia de como permitir ao usuário digitar uma mensagem em várias linhas. Para criar esse tipo de caixa de texto, usaremos o elemento TEXTAREA. Veja o código abaixo:

1
2
3

<form action="" method="post">
<textarea rows="7" cols="40"></textarea>
</form>

Resultado:

Os atributos ROWS e COLS definem o tamanho do TEXTAREA: ROWS fica responsável pela quantidade de linhas (altura); COLS define a quantidade de colunas (largura) da caixa de texto.

Elemento BUTTON

Podemos criar botões para nossos formulários, com muito mais liberdade do que o elemento INPUT. Com o uso do elemento BUTTON, podemos inserir conteúdo dentro de nossos botões: imagens, flash, texto etc. Veja o código abaixo:

1
2
3
4

<form action="" method="post">
<input type="text" /> 
<button type="submit">Enviar</button>
</form>

Resultado:

Usamos o atributo TYPE para definir o tipo do botão, possuímos três valores distintos para esse atributo: SUBMIT – cria um botão para envio de formulário; RESET – cria um botão para limpar todos os valores de um formulário; BUTTON – cria um botão associado a um evento do JavaScript, que normalmente inicia uma função do sistema (Ex: botões para inserção, alteração e exclusão de itens). Dentro das tags <button></button> podemos inserir qualquer tipo de conteúdo: imagens, flash, texto etc. Isso nos dá uma grande vantagem sobre o elemento INPUT, que é um elemento vazio.

Elemento LABEL

Com o que vimos até agora, podemos criar nossos formulários web. Já conhecemos o elemento INPUT e seus tipos, SELECT, TEXTAREA e BUTTON. Não construímos um formulário apenas enfileirando elementos, é preciso que cada campo possua um texto indicando como devemos preenchê-lo. Vamos montar um pequeno formulário de cadastro:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<form action="" method="post">
Nome: <input type="text" /><br />
Email: <input type="text" /><br />
Sexo: <input type="radio" name="sexo" />MASC 
<input type="radio" name="sexo" />FEM<br />
Deseja receber nossa newsletter: <input type="checkbox" /><br />
Como nos conheceu: <select>
   <option>Google</option>
   <option>Indicação de amigo</option>
   <option>Outros</option>
</select><br />
Mensagem: <textarea cols="7" rows="40"></textarea>
<button type="submit">Enviar</button>
</form>

Resultado:

Antes de mais nada: o uso da tag BR não é aconselhável. Diagramação de elementos fica por conta do CSS, como já falamos anteriormente. Feito esse aviso, reflitam por um instante: visualmente, conseguimos associar a legenda NOME ao INPUT TEXT correspondente, mas, quando construímos um site, temos diversos perfis de visitantes e o conteúdo deve ser acessível a todos eles. A tag LABEL associa um elemento de formulário à sua legenda correspondente, essa tag possui um atributo chamado FOR, cujo valor deve ser igual ao valor do atributo ID do elemento referenciado pelo LABEL. Veja como funciona:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<form action="" method="post">
<label for="nome">Nome:</label> <input type="text" id="" /><br />
<label for="email">Email:</label> <input type="text" id="" /><br />
<label for="masc">MASC:</label> <input type="radio" name="masc" /> <label for="fem">FEM</label> 
<input type="radio" name="sexo" id="fem" /><br />
<label for="news">Deseja receber nossa newsletter:</label> <input type="checkbox" /><br />
<label for="como">Como nos conheceu:</label> 
<select id="como">
   <option>Google</option>
   <option>Indicação de amigo</option>
   <option>Outros</option>
</select><br />
<label for="msg">Mensagem:</label> <textarea cols="7" rows="40" id="msg"></textarea>
<button type="submit">Enviar</button>
</form>

Resultado:

Bom pessoal, por hoje é só! No próximo tutorial continuamos a falar sobre formulários web. Até lá.

Abraços,
Diego.