Projetista Digital

Olá Pessoal,

Continuando com o assunto formulários web, falaremos hoje sobre mais alguns elementos e atributos, e dicas para criação de formulários acessíveis. Aproveitem bem o conteúdo e estudem com calma:

Elementos FIELDSET e LEGEND

No decorrer da nossa vida como profissionais de web (designers, programadores de interfaces, desenvolvedores etc.), construiremos desde simples formulários de contato, até complexos e extensos formulários de cadastro ou compra de produtos. E em todos os casos teremos a necessidade de agrupar os elementos de um formulário conforme características relacionadas. Já imaginou um formulário de cadastro onde os campos para dados pessoais se misturassem com os campos para dados profissionais, ou escolares? Sem uma distinção clara entre cada grupo de campos o formulário seria uma zona, aumentando em muito o tempo levado para preenchê-lo e a taxa de usuários que desistiriam.

Para agrupar os campos de um formulário com características comuns, utilizamos o elemento FIELDSET. Todos os campos serão englobados pelas tags <fieldset></fieldset>. Visualmente o elemento FIELDSET criará uma borda em torno dos elementos nele contidos, criando um bloco de conteúdo isolado de outros elementos. Se nosso formulário possuir vários elementos FIELDSET, teremos então várias caixas de elementos, separadas umas das outras. Cada elemento FIELDSET pode possuir uma legenda, ou seja, um texto indicando ao que se referem os elementos contidos nele (Ex: Dados Pessoais, Dados Escolares, Dados Residenciais, Dados Profissionais etc.). Essas legendas são marcadas pela tag LEGEND – <legend></legend>. Veja um exemplo dos elementos FIELDSET e LEGEND:

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

<form action="" method="post">
   <fieldset>
         <legend>Formulário de Contato</fieldset>
         <label for="nome">Nome:</label> <input type="text" id="nome" /><br />
         <label for="email">Email:</label> <input type="text" id="email" /><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>
   </fieldset>  
</form>

Resultado:

Antes de prosseguir, façam o seguinte exercício:

Entrem na página de cadastro do Mercado Livre e observem o formulário: esqueçam o layout e diagramação, e reconstruam esse formulário separando os elementos por FIELDSET e LEGEND (Dados Pessoais e Dados do Usuário no Mercado Livre).

Atributos NAME, ID e VALUE

Quem tem nos acompanhado desde o primeiro post sobre formulários, tem visto que utilizo em alguns momentos os atributos NAME, ID e VALUE, e sempre prometo que irei explicá-los “mais pra frente”. Pois bem, “mais pra frente” é agora!

Qualquer controle de formulário (INPUT, SELECT, TEXTAREA, BUTTON) permite ao usuário passar informações para o nosso site, e essas informações serão enviadas para algum script (em PERL, CGI, PHP, ASP.NET, JAVA etc.) que receberá os dados, verificá-los e por fim dará um fim ao formulário (envio por email, inserção num banco de dados etc.). Ok, mas como esse script saberá qual foi o valor digitado pelo usuário num campo de texto, por exemplo? Simples: quando clicamos no botão ENVIAR, mandamos uma espécie de catálogo de dados, onde cada campo do formulário corresponde a uma ficha desse catálogo. Essa ficha, por sua vez, é dividida em duas partes: índice (uma forma de referenciar o campo, e diferenciá-lo) e conteúdo (o valor digitado pelo usuário). Sabemos o que é o conteúdo, mas o que são os índices? O atributo NAME funciona como índice de um campo do formulário, ou seja, é o NAME do elemento que será referenciado pelo script responsável por processar o formulário.

Vários elementos HTML admitem o uso do atributo NAME (lembrem-se que utilizamos NAME para criação de links âncoras), assim como o atributo ID. Ambos os atributos tem uma única função: identificar um elemento. Simples assim! No caso dos controles de formulário, o atributo NAME tem uma função de integração com linguagens de programação para o tratamento de dados; assim como tanto NAME e ID podem ser usados como referência de elementos para JavaScript, CSS etc.

Ok! Qual é a diferença entre NAME e ID? O atributo ID funciona como “o CPF do elemento”, ou seja, não podem haver dois ou mais elementos, na mesma página, com o mesmo ID. Já o atributo NAME admite repetição, podemos ter vários elementos com o mesmo NAME. Por isso o elemento LABEL se vincula ao campo de formulário através do atributo ID… Veja um formulário com ambos os atributos ID e NAME:

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

<form action="" method="post">
   <fieldset>
         <legend>Formulário de Contato</fieldset>
         <label for="nome">Nome:</label> <input type="text" id="nome" name="nome" /><br />
         <label for="email">Email:</label> <input type="text" id="email" name="email" /><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" name="news" id="news" /><br />
         <label for="como">Como nos conheceu:</label> 
         <select id="como" name="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" name="msg"></textarea>
         <button type="submit">Enviar</button>
   </fieldset>  
</form>

Muitos de vocês já viram formulários web que apresentam algum conteúdo dentro da caixa de texto, normalmente uma instrução de preenchimento. E nesse momento devem se perguntar: como posso fazer isso? Simples: basta adicionar o atributo VALUE em seus elementos. Veja como funciona:

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

<form action="" method="post">
   <fieldset>
         <legend>Formulário de Contato</fieldset>
         <label for="nome">Nome:</label> <input type="text" id="nome" name="nome" value="Digite seu nome.." /><br />
         <label for="email">Email:</label> <input type="text" id="email" name="email"  value="Digite seu email..." /><br />
         <label for="masc">MASC:</label> <input type="radio" name="masc" id="masc" value="masc" /> <label for="fem">FEM</label> <input type="radio" name="sexo" id="fem" value="fem" /><br />
         <label for="news">Deseja receber nossa newsletter:</label> <input type="checkbox" name="news" id="news" value="" /><br />
         <label for="como">Como nos conheceu:</label> 
         <select id="como" name="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" name="msg">O elemento textarea não possui o atributo VALUE</textarea>
         <button type="submit">Enviar</button>
   </fieldset>  
</form>

Resultado:

Reparem que mesmo não exibindo nenhum texto na tela, usamos o atributo VALUE nos elementos INPUT RADIO, INPUT CHECKBOX e OPTION. Esses controles permitem ao usuário escolher uma ou mais opções, dentre uma lista, e o conteúdo do atributo VALUE será o valor enviado para o script de processamento do formulário, assim que o mesmo for disparado.

Atributos CHECKED e SELECTED

Podemos também apresentar um elemento INPUT CHECKBOX (aquelas caixinhas onde marcamos / desmarcamos com um clique) já preenchido, por padrão. Para isso basta adicionar o atributo CHECKED no elemento.

1
2
3

<form action="" method="post">
   <label for="news">Deseja receber nossa newsletter:</label> <input type="checkbox" name="news" id="news" value="news" checked="checked" />
</form>

Resultado:

Da mesma forma podemos escolher um elemento OPTION para aparecer selecionado, por padrão, dentro de um SELECT. Basta adicionar, ao OPTION, o atributo SELECTED. Veja como fica:

1
2
3
4
5
6
7

<form action="" method="post">
   <select id="como" name="como">
       <option value="google">Google</option>
       <option value="amigo">Indicação de amigo</option>
       <option value="outros" selected="selected">Outros</option>
   </select> 
</form>

Resultado:

Atributos READONLY e DISABLED

Existem situações em que o usuário não pode manipular um elemento de formulário. Imagine que você tem alguns campos para compor o endereço do usuário, e o usuário não poderá digitar diretamente o endereço, precisará primeiro preencher o CEP, e aí será feita uma consulta na base de endereços completando os demais campos (rua, cidade, estado etc.); ou então, você quer manter o botão de envio do formulário desabilitado, enquanto alguns campos não forem preenchidos. Enfim, não importa o seu motivo, se for necessário desativar elementos de um formulário, utilizaremos os atributos READONLY ou DISABLED.

READONLY é um atributo aplicado apenas nos elementos INPUT e TEXTAREA, e impede o usuário de editar o conteúdo da caixa de texto. O valor do campo será enviado para o script de processamento, assim como o usuário poderá dar foco normalmente no campo e a navegação via teclado funcionará normalmente. A única coisa que o usuário não poderá fazer é: editar o conteúdo.

DISABLED é um atributo aplicado nos elementos INPUT, TEXTAREA, SELECT, OPTGROUP, OPTION e BUTTON, e desabilita o campo do formulário, impedindo a edição do seu valor. Quando desabilitamos um campo, seu valor não será enviado junto com os demais campos do formulário, o usuário não conseguirá colocar o foco no campo e a navegação via teclado será desabilitada.

Veja um exemplo dos atributos READONLY e DISABLED:

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

<form action="" method="post">
   <fieldset>
         <legend>Formulário de Contato</fieldset>
         <label for="nome">Nome:</label> <input type="text" id="nome" name="nome" value="Diego" readonly="readonly" /><br />
         <label for="email">Email:</label> <input type="text" id="email" name="email"  value="Digite seu email..." /><br />
         <label for="masc">MASC:</label> <input type="radio" name="masc" id="masc" value="masc" /> <label for="fem">FEM</label> <input type="radio" name="sexo" id="fem" value="fem" /><br />
         <label for="news">Deseja receber nossa newsletter:</label> <input type="checkbox" name="news" id="news" value="" /><br />
         <label for="como">Como nos conheceu:</label> 
         <select id="como" name="como" disabled="disabled">
            <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" name="msg">O elemento textarea não possui o atributo VALUE</textarea>
         <button type="submit">Enviar</button>
   </fieldset>  
</form>

Resultado:

Por hoje é só, pessoal! No próximo post terminaremos essa parte sobre formulários web, falando um pouco sobre como incrementar a acessibilidade em nossos formulários. Até lá e bom estudo!

Abraços,
Diego.

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.