Formulários

Temos nos referido à web como um canal para a circulação de informações, distribuição de idéias ao redor do

mundo para quem quer encontrá-las. É nesta faixa de longo alcance e escopo escancarada que torna a web tão

filosoficamente magnífica e fascinante. Mas a informação não flui só ladeira abaixo. Seus visitantes podem chegar ao

seu site para absorver passivamente, mas, se for permitido, eles também podem participar do intercâmbio de

informações, oferecendo suas próprias ideias e reações. Mas como você pode receber esse feedback de seus

visitantes? O meio mais simples, mais comum, e talvez o mais poderoso movimento de ideias submetidas na web é

através de um formulário. No mundo analógico, um formulário é simplesmente um documento impresso com

espaços em branco pré-definidos, rotulados, em que as pessoas podem escrever informações. Formulários

padronizam a formatação dos dados para facilitar o manuseio, quando um funcionário, por exemplo, sabe

exatamente onde procurar para encontrar o nome de um cliente em um pedaço de papel, poupa-se tempo precioso

e faz seu trabalho muito mais fácil. Mas se você levar esse conceito um passo adiante, um formulário web torna-se

mais do que uma forma indigesta para forçar as expectativas de formatação para seus visitantes. Os formulários são

os meios pelos quais um usuário anônimo torna-se um participante ativo. Se você já usou um motor de busca na

Web, fez uma compra on-line, criou um login personalizado para um site, ou postou um comentário em um fórum

on-line, você já viu e usou formulários na web; a web simplesmente não seria o que é sem eles. Eles são

onipresentes e um pilar fundamental da vida online, então você vai inevitavelmente precisar incluir formas em

algumas das páginas que você constrói. Este capítulo explora os elementos XHTML que você precisa para construir

formas funcionais, útil e acessível para suas páginas web, bem como algumas formas de usar CSS para fazer seu

formulário web visualmente atraente.

Como Formulários Funcionam

Definido em termos simples, um formulário é qualquer seção de uma página web em que um usuário pode obter

informações de entrada (embora às vezes os elementos do formulário são usados para exibir informações em vez de

obtê-las). Seus visitantes podem inserir texto em campos em branco, fazer escolhas marcando caixas de seleção,

selecionar opções de menus, e clicar em um botão para enviar tudo para processamento. Estes dispositivos são

chamados de controles interativos, e seus conteúdos são os valores. Para modificar o valor de um controle, o

visitante deve primeiro colocar o controle em foco para que ele se torne ativo e preparado para aceitar a entrada.

Um controle é dado geralmente o foco clicando com o mouse ou usando a tecla Tab para mover o cursor de um

controle para o próximo. Introduzir um valor requer a digitação de texto ou realizar alguma outra ação deliberada

(clicar em um botão do mouse, pressionando a tecla Enter, e assim por diante). O visitante pode então mudar o foco

do seu browser para outro controle, digitar outro valor, e continuar dessa maneira até que todos os controles sejam

modificados. Um formulário não é muito útil até que seja submetido. A informação que foi digitada será enviada

para o servidor em forma de conjunto de dados composto por todos os controles de formulário e seus valores. O

trabalho de processar o conjunto de dados vai para um manipulador de formulário: um script ou programa que foi

projetado para interpretar e utilizar os dados apresentados. Muitos manipuladores de formulários também são

projetados para validar os valores inscritos, certificando-se de todas as informações necessárias foram digitadas e

formatadas corretamente. A manipulação de dados de formulários submetidos é algo inteiramente diferente, que

envolve questões complexas de script, programação, design de banco de dados e design da aplicação, e pode

mesmo mergulhar em questões de criptografia, segurança e privacidade. Esses tópicos avançados estão bem além

do escopo de um livro sobre XHTML e CSS. Em vez disso - o restante deste capítulo centra-se na marcação - você

precisa estar familiarizado com a montagem de formulários para visualização e utilização.

■ Nota: a renderização na tela de vários elementos de formulário pode ser bastante diferente entre diferentes

navegadores e sistemas operacionais. A maioria das imagens que você verá ao longo deste capítulo foi capturada

usando o Firefox 2.0 para Macintosh OS X. Estes mesmos elementos de formulário podem ser diferentes em outro

navegador ou em outra plataforma, por isso não se surpreenda se o que você vê no seu próprio computador não é a

mesma que você vê neste livro. A funcionalidade real de todos esses elementos é idêntica em todos os navegadores,

mesmo que sua aparência padrão não seja.

Os Componentes de um Formulário

A totalidade de um formulário é empacotada dentro de um elemento de formulário único, que atua como um

recipiente para os elementos especializados que geram controles de formulário. Esses controles são os campos de

texto, checkboxes, menus e botões, que os visitantes irão usar para inserir suas informações ou fazer suas seleções.

Quando o formulário é enviado, todos os valores de seus vários controles são enviados como pares “nome/valor”

para um manipulador de formulário como parte de um conjunto de dados. Portanto, cada comando deve possuir um

atributo de nome para que ele possa ser corretamente emparelhado com o seu valor.

form

Tal como o nome do elemento implica, a tag form define a porção de um documento XHTML que pode receber a

entrada do usuário. Este é um elemento de nível de bloco de que atua como um recipiente para outros elementos

do formulário especializados, bem como quaisquer outros elementos necessários para dar a estrutura do formulário.

Mas, apesar da tag form ser um elemento de nível de bloco, seu conteúdo deve ser realizado em recipientes de nível

de bloco próprios; assim como o elemento body, um form não pode ter filhos inline. Para incluir múltiplos

formulários distintos dentro de um mesmo documento, cada um deve estar contido no seu próprio formulário. Ou

seja, você não pode aninhar um form dentro de outro form. O elemento de formulário requer um atributo action na

sua tag de abertura, cujo valor é o URL do manipulador de formulário. Esse manipulador de formulário pode ser um

documento ou um script em outra parte do site, um aplicativo back-end, ou o mesmo documento em que o form

está se os seus dados serão tratados exclusivamente no lado do cliente através de JavaScript ou se o documento

XHTML foi integrado com algum tipo de linguagem de script, como PHP, Ruby, ASP, ou ASP.NET. Um atributo

“método” é opcional e pode aceitar dois valores, get ou post, para indicar o método HTTP especial para usar quando

o formulário for enviado. Quando o valor do método for get, o conjunto de dados apresentados será anexado ao

URL do manipulador de formulário (a partir do atributo action) em uma seqüência que consiste de todos os pares

“nome/valor”. O manipulador de formulário pode, então, interpretar e processar esse URL, extraindo os valores da

seqüência de consulta expostos. O método post envia os dados definidos diretamente para a aplicação que manipula

o formulário (não visível através do URL) para o processamento no servidor. O método get deve ser utilizado para

solicitar dados estáticos do servidor para uso temporário (por exemplo, pesquisar na web por uma definição da

palavra idempotente), especialmente quando o URL, incluindo sua seqüência de consulta, possa ser reutilizado. O

método post é mais frequentemente usado para enviar dados para o servidor em que será salvo para uso no futuro

(por exemplo, enviar um comentário para um blog) ou quando um URL com uma seqüência de consulta visível não é

desejável por razões de segurança e privacidade – por exemplo, digitar senha e login para autenticação. O método

padrão é get, que será assumido se o atributo método não for incluído.

■ Nota: HTTP significa HyperText Transfer Protocol, que é o conjunto de regras do programa utilizado para a

transferência de dados eletrônicos através da web. Os dois métodos básicos do HTTP são "get" para enviar dados de

um servidor para um cliente e "post" para enviar dados de um cliente para um servidor. Sempre que você baixar algo

de um servidor web, seja ele um documento XHTML, uma folha de estilo em cascata, um vídeo, uma imagem, e

assim por diante, o seu navegador envia uma solicitação para "pegar" (get) esse arquivo. Muitos formulários utilizam

o método oposto "post", enviando os dados de seu navegador para o servidor.

A Listagem 8-1 mostra a marcação XHTML para um simples formulário, incluindo os atributos de ação e método na

tag <form> de abertura. Este exemplo contém dois elementos de entrada (um campo de texto e um botão de

envio) e um rótulo de texto envolto em um elemento label. Você aprenderá mais sobre esses elementos, mais

adiante neste capítulo.

Listagem 8-1. Formulário simples com uma caixa de texto e um botão de envio

<form method="post" action="/cgi-bin/formhandler.cgi">

<p><label for="email">Enter your E-mail address to subscribe to our mailing list.</label></p>

<p><input type="text" name="email" id="email" />

<input type="submit" name="subscribe" value="Subscribe" /></p>

</form>

A Figura 8-1 mostra com o formulário sera exibido no navegador com a formatação padrão.

Figura 8-1.

O formulário simples assim como ele aparece no Firefox para Mac OS X. O botão pode ser diferente em outro

navegador, mas sempre funciona da mesma maneira.

■ Dica: O elemento label é extremamente importante em formulários. Ele fornece um rótulo de texto para um

controle de forma individual que pode ser lido pelas tecnologias de apoio para melhorar a acessibilidade do

formulário. Você aprenderá sobre isso em detalhes mais adiante neste capítulo.

Atributos obrigatórios

• action: especifica o URL do manipulador do formulário, que é o script ou aplicação que processará os dados do

formulário enviados.

Atributos Opcionais

• accept-charset: especifica a codificação de caracteres aceita para dados fornecidos através do formulário. Quando

este atributo está ausente, a codificação assumida é a mesma que a do documento original.

• enctype: especifica o tipo de conteúdo usado para enviar o formulário. O valor padrão para este atributo é

application/x-www-form-urlencoded, e um valor multipart/form-data deve ser usado se o formulário apresentado

incluirá os arquivos enviados através de um controle input type = "file".

• method: especifica qual o método HTTP será usado para enviar os dados do formulário, se GET ou POST.

Atributos padrão

• class

• dir

• id

• lang

• name

• style

• title

• xml:lang

input

Muitos controles de formulário comuns podem ser criados com o elemento inline input, e cada tipo de input é

definido com um atributo correspondente. Como o elemento input é inline, vários inputs podem aparecer lado a

lado, mas todos devem ser mantidos em um recipiente de nível de bloco (lembre-se de que um elemento de

formulário não pode ter filhos inline). O elemento input é também um elemento vazio, então ele pode não conter

nenhum texto, ou nenhum outro elemento, e deve ser fechado com uma barra (/>). Um elemento input é

substituído por um controle de formulário funcional, quando um navegador renderiza o documento.

Atributos Obrigatórios

• name: Identifica o controle para que ele possa ser combinado com o seu valor quando o formulário for enviado.

Um validador de marcação não pode gerar um erro se esse atributo está faltando, mas é exigido, a fim de tratar o

formulário com êxito.

Atributos Opcionais

• alt: especifica uma descrição de texto alternative (somente para input type="image").

• accept: inclui uma lista de tipos MIME aceitos (somente para input type="file").

• accesskey: atribui um atalho de teclado para um controle de acesso mais fácil e rápido através da navegação do

teclado. O valor deste atributo é o caractere correspondente à tecla de acesso. A combinação exata de teclas

necessária para ativar uma chave de acesso varia entre navegadores e sistemas operacionais.

• checked="checked": quando presente, define um estado inicial para caixas de verificação ou botões de rádio

(apenas para o tipo de entrada type="checkbox" e type="radio"). Lembre-se de que todos os atributos devem ter um

valor cotado em XHTML, para que ele possa aparecer como checked = "checked", por mais redundante que pareça.

• disabled="disabled": quando presente, desabilita o controle de modo que não possa receber o foco ou ser

modificado. O valor de um controle desabilitado não é enviado com os outros elementos do formulário. Muitos

navegadores visuais exibem controles desabilitados em um estilo "cinza".

• ismap="ismap": Declara que o controle é um mapa de imagem do lado do servidor (somente para input

type="image").

• maxlength: especifica o número máximo de caracteres que podem ser digitados em um campo de texto (somente

para input type="text" ou input type="password").

• readonly="readonly": especifica que o controle pode apenas mostrar um valor, mas não pode ser modificado.

Difere do desabilitado, pois apesar de não poder modificar seu valor, ainda assim ele pode receber o foco e envia

seu valor juntamente com os outros elementos (somente para input type="text" ou input type="password").

• size: especifica a largura de um texto, senha ou arquivo quando exibido (somente para input type="text", input

type="password" ou input type="file"). O valor deste atributo é o número de caracteres, de modo que a largura real

processada dependerá do tamanho da fonte. Por padrão, a maioria dos navegadores irá exibir texto e campos de

senha em torno de 20 ou 25 caracteres de largura.

• src: especifica o URL de origem de um arquivo de imagem (somente para input type="image").

• tabindex: especifica a posição do controle na ordem de tabulação quando os controles ativos são reposicionados

através do uso da tecla Tab.

• type: especifica o tipo de elemento que irá ser criado. O valor padrão é text.

• usemap: especifica o URL de um mapa de imagem do lado do cliente (somente para input type="image").

• value: especifica o valor inicial de um controle antes de ser modificado pelo usuário.

Atributos Padrão

• class

• dir

•id

• lang

• style

• title

• xml:lang

Note-se que muitos dos atributos opcionais disponíveis para o elemento input são específicos apenas para certos

tipos de formulários input (como indicado pelo atributo type). Em seguida, vamos passar por cada um dos tipos de

entrada diferentes em mais detalhe, um por um.

input type="text"

Este tipo de elemento de entrada cria um campo de linha única na qual o visitante pode digitar o qualquer que seja o

texto que precisar, tais como nome, endereço ou resposta curta a uma pergunta. Ele geralmente aparece nos

navegadores visuais como uma caixa branca retangular, com uma ligeira borda. Estes campos de uma única linha de

texto são os melhores para porções de texto muito curtas, não mais que algumas palavras. Se o texto introduzido

excede a largura do campo, os caracteres em excesso irão correr para a esquerda do controlo de modo que o último

texto é mostrado, mas a primeira porção aparece truncada. Mais, as passagens de várias linhas de texto podem ser

inseridas no elemento textarea especializado, abordado mais tarde neste capítulo. Um elemento input type = "text"

pode levar um atributo maxlength opcional, definindo o número máximo de caracteres (incluindo espaços) que pode

ser inserido. Infelizmente, os browsers não oferecem nenhuma indicação de que um campo de texto tem um

comprimento máximo permitido, quando você atingir o limite, ele simplesmente pára de aceitar qualquer coisa que

você digitar. Se você colar uma seqüência muito extensa de texto em um campo com um atributo maxlength, o texto

será truncado. Se você precisar usar um atributo maxlength em um campo de texto (por exemplo, um campo de

nome de usuário para fazer logon em um sistema que permite que nomes de usuários sejam de 12 caracteres

apenas), é útil para indicar o comprimento máximo em uma nota perto do controle de formulário. Um atributo value

opcional permite que você defina o texto inicial do campo, que um usuário pode excluir, modificar ou deixar como

está, e o valor padrão será apresentado com o formulário. É útil principalmente para automaticamente preencher

formulários com informações armazenadas e que um usuário pode editar. Os campos de texto que se destinam ser

espaços onde novas informações podem ser inseridas devem, de fato, estar em branco quando inicialmente

colocado. A Listagem 8-2 mostra a marcação XHTML para criar um controle de campo de texto, incluindo um

atributo maxlength e uma nota sobre o comprimento máximo permitido. O campo tem sido pré-preenchido neste

exemplo usando o atributo value.

Listing 8-2. Um campo de texto com valores pré-preenchidos.

<p><label for="zip">Change your ZIP code <em>(maximum 5 characters)</em></label>

<input type="text" id="zip" name="zip" size="5" maxlength="5" value="94710" /></p>

Figura 8-2. O campo de texto como ele aparece em um navegador com um estilo padrão.

O valor do atributo valor é exibido no campo quando a página é carregada. Este exemplo também tem um atributo

de tamanho opcional (e de apresentação), definindo a largura do campo como um número de caracteres. Por

padrão, a maioria dos navegadores irá exibir os campos de texto em torno de 20 ou 25 caracteres de largura. Você

também pode modificar a largura de um campo de texto com a propriedade de largura CSS usando qualquer

unidade que você deseje (ems, pixels, porcentagem, e assim por diante).

input type="password"

Este controle é semelhante a um campo de texto. É um campo de linha única e geralmente aparece como uma caixa

retangular, com fundo branco e uma borda. Mas ao contrário de um campo de texto normal, um campo de senha

obscurece o texto digitado, geralmente como uma série de asteriscos (*) ou pontos sólidos. Isto oferece um pouco

de segurança e privacidade, impedir alguém de espiar por cima de seu ombro sua senha secreta quando você está

entrando em um sistema seguro. Mas isso é uma segurança muito leve, protegendo a sua senha a partir de um olhar

casual apenas. Um formulário devidamente protegido deve ser criptografado quando for enviado para o servidor,

não contando apenas com o disfarce visual. Tal como acontece com um campo de texto, um campo de senha pode

ter maxlength e atributos de tamanho. Também aceita um atributo de valor, mas provavelmente não é uma boa

idéia para pré-preencher uma senha, não é?

A Listagem 8-3 mostra um input type = "password" com um atributo maxlength. O comprimento máximo é

observado no rótulo do controle.

Listagem 8-3. Um formulário de senha <div>

<label for="password">

Enter your password <em>(maximum 12 characters)</em>

</label>

<input type="password" name="password" id="password" maxlength="12" />

</div>

A Figura 8-3 mostra como um browser renderiza a tag, com o texto obscurecido como uma cadeia de asteriscos ou

pontos.

■ Nota: criptografia é um meio de embaralhar matematicamente dados para que uma pessoa que tente interceptá-

lo não seja capaz de ler ou usar a informação. Ordenar ou descriptografar os dados criptografados exige uma chave

de criptografia que deve ser extremamente difícil de adivinhar. Quaisquer informações confidenciais, como senhas e

números de cartão de crédito, enviados pela web através de um formulário devem ser criptografados para proteger

a segurança e a privacidade de seus usuários. Criptografia é feita geralmente no lado do servidor e é muito

complicado de ser abordada em detalhes neste tutorial.

input type="checkbox"

Um checkbox é uma escolha de alternância na forma de um pequeno quadrado preenchido com uma marca de

verificação (ou às vezes um x) quando o controle é selecionado. Checkboxes são usadas quando há várias opções

disponíveis e mais de um pode ser selecionado, no sentido de "verificar todos os que se aplicam." Cada checkbox

pode ter um atributo de valor correspondente a qualquer que seja a opção selecionada, e este valor será repassado

nos bastidores, quando o formulário é enviado. Sem um valor específico, tudo o que vai apresentar é o estado "on"

se está marcado ou nada se ele não está marcado (que é inferida para dizer "off"). Em alguns casos, esta informação

é suficiente (quando combinado com o nome ou um atributo de ID único para cada caixa), então um atributo de

valor explícito pode não ser sempre necessário. Uma vez ativada, a caixa de seleção pode ser desmarcada, basta

selecioná-la novamente. Além disso, pode ser "prechecked" usando o atributo checked. Este atributo não tem um

valor, e seu valor é determinado pela existência do atributo. Se o atributo estiver presente, a caixa está marcada, se

ele não está presente, a caixa não está marcada. Nas versões anteriores do HTML, o atributo checked poderia ser

minimizado, aparecendo com qualquer valor. No entanto, todos os atributos em XHTML devem ter um valor, então

verificada deve aparecer como checked="checked" para ser válida; minimização atributo não é permitido em XHTML.

O valor deve corresponder ao nome do atributo, neste caso, com check="yes" não seria correto.

A Listagem 8-4 mostra um exemplo de várias entradas de elementos checkbox, uma das quais foi marcada por

padrão. Todos eles incluem um atributo de valor para passar ao longo de mais informação do que um simples

"checked" ou "unchecked" poderia oferecer. Estas opções são marcadas em uma lista ordenada de estrutura

adicional.

Listagem 8-4. Um conjunto de múltipla-escolha usando controles checkbox. <p>Choose your toppings:</p>

<ul>

<li>

<label for="top1">

<input type="checkbox" id="top1" name="top1" value="pepperoni" checked="checked" />

Pepperoni

</label>

</li>

<li>

<label for="top2">

<input type="checkbox" id="top2" name="top2" value="xcheese" />

Extra cheese

</label>

</li>

<li>

<label for="top3">

<input type="checkbox" id="top3" name="top3" value="onions" />

Onions

</label>

</li>

<li>

<label for="top4">

<input type="checkbox" id="top4" name="top4" value="mushrooms" />

Mushrooms

</label>

</li>

<li>

<label for="top5">

<input type="checkbox" id="top5" name="top5" value="olives" />

Olives

</label>

</li>

</ul>

Você pode ver como isso vai aparecer em um navegador na Figura 8-4. O marcador padrão de lista pode ser

removido com CSS. Mais uma vez, esta imagem é do Firefox 2.0 em Mac OS X. As caixas de seleção serão diferentes

em outros navegadores.

Um controle de botão de rádio é um pouco parecido com uma caixa de seleção, mas apenas uma opção em um

conjunto pode ser selecionada. Selecionar o botão vai automaticamente desmarcar qualquer um na lista que tenha

sido previamente selecionado. Assim, botões de rádio são ideais quando você precisa oferecer uma lista de múltipla

escolha de opções onde apenas uma escolha é permitida (ao contrário do checkbox, que permite várias opções).

Uma vez que um botão de rádio foi marcado, ele não pode ser desmarcado a menos que outro botão no conjunto

seja marcado em seu lugar. Para definir um conjunto de botões de rádio, cada um deve compartilhar o mesmo valor

do atributo nome. Tal como acontece com caixas de seleção, cada controle de botão de rádio pode transportar um

atributo de valor para passar adiante informações adicionais sobre a opção selecionada, e neste caso um valor é

fortemente recomendado. Na ausência de um valor de atributo, o valor apresentado seria simplesmente "ligado"

sem qualquer outra indicação de que opção foi selecionada. Também como os checkboxes, um botão de opção pode

ser pré-selecionado, incluindo o atributo checked = "checked". No entanto, apenas um botão de rádio em um

conjunto pode ser pré-selecionado.

A Listagem 8-5 mostra um conjunto de botões de rádio, cada um com o atributo de mesmo nome e com os atributos

id e value para diferenciar as opções.

Listagem 8-5. Um conjunto de botões <p>Choose the size of your pizza:</p>

<ul>

<li>

<label for="small">

<input type="radio" name="size" id="small" value="small" />Small

</label>

</li>

<li>

<label for="medium">

<input type="radio" name="size" id="medium" value="medium" />Medium

</label>

</li>

<li>

<label for="large">

<input type="radio" name="size" id="large" value="large" />Large

</label>

</li>

</ul>

A Figura 8-5 mostra esse conjunto de botões de rádio exibidos no Firefox 2.0 para Mac OS X. Como a maioria dos

controles de formulário, os botões de rádio podem ser diferentes em outros navegadores. Neste exemplo, uma das

opções foi selecionada, enchendo o círculo com um ponto sólido. Para alterar a seleção automaticamente,

desmarque a opção anterior.

Figura 8-5. O conjunto de botões de rádio renderizado em um navegador visual, agora com uma opção selecionada.

input type="file"

O parâmetro de tipo file cria um controle especial para seleção de arquivo - geralmente composto de um campo de

texto ao lado de um botão "Procurar", permitindo ao usuário localizar um arquivo no disco rígido do seu computador

ou rede local, ou digitando o caminho exato do arquivo no campo texto ou clicando no botão para chamar o seu

navegador de arquivos do sistema operacional. Uma vez que um usuário localiza um arquivo navegando por ele, o

caminho do arquivo local é exibido no campo de texto. Tal como acontece com outros campos de texto, um atributo

de tamanho opcional pode especificar a largura do campo arquivo como um número de caracteres. O arquivo

escolhido será enviado para o servidor web quando o formulário for enviado. Um input type ="file" pode incluir um

atributo accept opcional cujo valor é uma lista separada por vírgulas dos tipos de arquivo aceitos (especificado por

seus tipos de MIME). Se você está pedindo a seus usuários para fazerem upload de uma imagem, por exemplo, o

atributo accept pode limitar formatos aceitos para tipos de imagem apenas ou pode até mesmo limitar a apenas

GIFs e PNGs, qualquer outro tipo de arquivo será rejeitado. Se o formulário inclui controles do arquivo, você deve

incluir um atributo accept na tag de abertura <form> também.

A Listagem 8-6 apresenta a marcação para um controle de arquivo, incluindo um atributo accept que limita o upload

de arquivos para os formatos GIF, JPEG ou PNG.

Listagem 8-6. Um arquivo de controle que inclui um atributo de tamanho <p>Upload a picture of your favorite pizza!</p>

<p><input type="file" size="40" accept="image/gif, image/jpeg, image/png" /></p>

A Figura 8-6 mostra como o seletor de arquivo aparece no Firefox 2.0 para Mac OS X. Um arquivo foi selecionado

pelo navegador no disco rígido, e seu caminho aparece no campo de texto. Apenas a primeira parte é visível, porque

o caminho completo é maior do que o campo de texto pode exibir.

Figura 8-6. O seletor de arquivos renderizado no Firefox 2.0 para OS X.

input type="submit"

Resumidamente, um input type = "submit" cria um botão que vai enviar os dados do formulário todo o conjunto de

todos os dados inseridos nos diversos elementos do formulário quando clicado. O atributo value define o texto que

será exibido no botão, que normalmente tem por padrão o termo "Submit" ou "Submit Query" se um atributo de

valor não estiver presente. Uma vez que o botão é clicado e o formulário é submetido, o manipulador de formulário

(especificado no atributo action) assume para processar os dados. Você pode ver a marcação XHTML para um

formulário de login simples com um botão submit na Listagem 8-7. Neste exemplo, o valor "Log in" será exibido no

botão ao invés do texto padrão.

Listagem 8-7. Um formulário de login simples. <p><label for="username">Your Username:</label>

<input type="text" id="username" name="username" /></p>

<p><label for="password">Your Password:</label>

<input type="password" id="password" name="password" /></p>

<p><input type="submit" name="login" value="Log In" /></p>

A Figura 8-7 mostra a forma processada, a partir do Firefox 2 para Mac OS X, mais uma vez; botões de formulário

podem aparecer bem diferente em outros navegadores.

Figure 8-7. O rótulo do botão submit padrão substituído pelo valor “Log in”.

input type="reset"

Este atributo redefine o formulário inteiro, apagando tudo o que foi digitado e ajustando todos os atributos de volta

aos seus valores iniciais. Botões reset eram muito mais comuns no passado, mas depois de alguns anos de testes de

usabilidade, a prática tem mostrado que eles raramente são úteis. É muito provável que um usuário acidentalmente

apague e perca todas as informações que tentou digitar cuidadosamente, e isto é bastante frustrante, especialmente

quando não há nenhum mecanismo para desfazer tal erro. Estes botões reset dias são geralmente desencorajados,

se você decidir usá-los, faça-o com cautela. Tal como acontece com um botão de envio, o atributo value do botão

reset determina o texto que será exibido, geralmente "Reset" na ausência de um value.

input type="button"

Um controle button é apenas isso: um botão genérico. Não tem nenhuma função inerente; serve apenas como um

widget clicável, que pode desencadear um script do lado do cliente. O texto do botão pode ser definido através do

atributo value e normalmente tem por padrão o termo "Button" se nenhum valor for fornecido. Em vez de

incorporar esses botões com script em sua marcação, geralmente é preferível usar JavaScript do lado do cliente para

gerar o controle. Afinal, o botão não funcionará sem um script do lado do cliente para imbuí-lo com um propósito, e

um controle que funciona apenas com um script não precisa ser exibido se o script não estiver disponível.

input type="image"

Um controle de imagem se comporta essencialmente como um botão submit, a ativação do controle fará com que

seja enviado o formulário. Mas um input type = "image" permite que você substitua o botão padrão com um gráfico

mais decorativo. Tal como acontece com outras imagens em XHTML, um controle de imagem requer um atributo src

para especificar o URL do arquivo de imagem e um atributo alt para fornecer uma descrição de texto alternativo

quando a imagem não estiver disponível. O texto alternativo é especialmente importante para assegurar que o

formulário possa ser carregado com sucesso, mesmo quando a imagem não puder ser vista. Sem um atributo alt útil,

as pessoas que utilizam navegadores em modo texto ou leitores de tela terão dificuldades em identificar o botão,

tornando quase impossível para eles enviar o formulário. Você não gostaria de ver um cliente desistindo de fazer

uma compra simplesmente porque eles não podem ver o seu botão “Comprar agora”, não é? Quando o visitante usa

um mouse (ou outro dispositivo apontador) para clicar em um controle de imagem, a localização exata desse clique

é incluída no conjunto de dados como as coordenadas X e Y (com o controle identificado por seu atributo de nome).

Um manipulador de script ou formulário pode usar essas informações para determinar exatamente qual parte do

botão foi clicado e, assim, tratar um controle de imagem como um mapa de imagem, com diferentes regiões do

botão de disparo para diferentes ações. No entanto, uma vez que este exige o botão para ser clicado por um

dispositivo apontador, as pessoas que usam o teclado para enviar o formulário estarão em desvantagem. É preferível

usar controles submit separadamente, ou imagem para desencadear essas ações diferentes ao invés de um botão

com uma única imagem. Você pode ver a marcação para inserir um controle de imagem na Listagem 8-8 e o

resultado renderizado na Figura 8-8.

Listagem 8-8. Utilizando o input type="image" em vez de input type="submit" <p><input type="image" name="post" src="post.png" alt="Post your comment" /></p>

Figura 8-8. Uma imagem de um botão de controle gráfico pode ser mais (ou às vezes menos) atraente do que o estilo

do botão padrão.

input type="hidden"

Como você poderia suspeitar, uma entrada oculta não será exibida. Ela existe apenas como um meio para transmitir

dados adicionais com o formulário apresentado que um usuário não precisaria ver ou modificar, tal como um

número de ordem ou um ID de controle interno através do atributo value.

button

O elemento botão funciona exatamente como um submit, reset, ou button, ou mesmo um input type = "image" (com

o clique de um mouse ou pressionar de uma tecla), apresentará ou redefinir a forma ou desencadear uma resposta

do script. O elemento button é inline e requer um atributo de tipo (com um valor “submit”, “reset” ou “button”), e,

como outros controles de formulário, um botão pode aparecer somente dentro de um formulário. No entanto, ao

contrário do elemento input, um elemento button não está vazio, podendo conter texto ou outros elementos e

oferecendo um design com muito mais opções e semânticas do que um elemento input simples. Na verdade, um

botão deve ter algum conteúdo, porque um elemento button vazio não terá nenhum rótulo padrão. Leia o artigo

“Push my Button” em (http://www.digital-web.com/articles/push_my_button/). Você poderá ver

um exemplo do elemento button na Listagem 8-9, que inclui um trecho de texto sublinhado e uma imagem.

Listagem 8-9. Um elemento button contendo texto e imagem. <div>

<button type="submit" name="continue">

<strong>Continue to the next page</strong>

<img src="next.png" width="28" height="20" alt="" />

</button>

</div>

Quando um navegador processa esse código na tela (como mostrado na Figura 8-9), o elemento inteiro torna-se um

botão. Por padrão, um elemento button não terá a mesma aparência de um botão input, mas pode ser facilmente

estilizado com o CSS (enquanto alguns navegadores como o Safari não vão permitir que os botões input sejam

totalmente estilizados).

Figura 8-9. O elemento button como aparece no Firefox para OS X

Atributos Obrigatórios

• type: Especifica o tipo de controle de botão que o elemento criará —submit, reset, or button

Atributos Opcionais

• accesskey: Atribui um atalho de teclado para o controle de acesso mais facilmente e rapidamente através de

navegação pelo teclado. O valor deste atributo é o personagem correspondente para a chave de acesso. A

combinação de teclas exata necessária para ativar uma chave de acesso varia entre os navegadores e sistemas

operacionais.

• disabled="disabled": Quando presente, desabilita o botão de modo que não pode ser ativado. Muitos navegadores

irão exibir os controles desabilitados em um estilo "cinza".

• tabindex: Especifica a posição do controle na ordem de tabulação quando controles ativos se sucederem usando a

tecla TAB.

• value: Especifica um valor que pode ser passado junto com os dados do formulário apresentado.

Atributos padrão

• class

• dir

• id

• lang

• name

• style

• title

• xml:lang

select

O elemento inline select cria um controle de seleção, que é um menu de opções para escolher. O controle tanto

pode ser exibido como uma única linha que pode "cair" e expandir para mostrar todas as opções ou pode ocupar

várias linhas, conforme especificado pelo atributo de tamanho opcional. Um controle de seleção de linha única,

muitas vezes chamado de um menu drop-down, vai mostrar a opção selecionada quando em seu estado inativo, com

uma seta pequena em sua extremidade direita, como um sinal visual de que o controle pode ser expandido. Em

navegadores gráficos, seleções de várias linhas geralmente são destacadas com uma cor de fundo diferente. Um

controle de seleção de linha única permitirá apenas uma opção a ser escolhida. Adicionando o attribute = "multiple"

irá converter automaticamente o elemento select para um controle multi-line e permitir ao usuário escolher mais de

uma opção, segurando a tecla Shift, Control, ou a tecla Command ao fazer suas escolhas. Na ausência de um atributo

de tamanho, alguns navegadores irão expandir o menu para mostrar 10 ou 20 opções ou para mostrar todos eles, se

há apenas alguns. Isto é inconsistente e não confiável em navegadores diferentes, por isso você deve sempre incluir

um atributo de tamanho quando várias seleções são permitidas. Quando o formulário é enviado, a opção escolhida

(ou opções) vai ser passado como o valor do controle de seleção. Um atributo de nome é exigido para o elemento

select a fim de identificar e para preservar a conexão entre o controlo e o seu valor

A exibição e o comportamento de um comando select podem ser imprevisíveis, em grande parte, dependente do

sistema operacional e do navegador. Se o controle aparece na parte inferior da tela, o menu geralmente expande

para cima em vez de para baixo para evitar que o menu expandido estendam além da borda inferior da tela. Um

menu pode expandir-se em ambas as direções, se a opção selecionada estiver perto do meio da lista. Quando

expandido, um controle de seleção se sobrepõem outros conteúdos na página e pode até escapar dos limites da

janela do navegador. Quando a lista de opções é excepcionalmente longa, uma barra de rolagem vertical aparece no

menu expandido, permitindo que o usuário rolar para cima ou para baixo para ver a lista completa. O número de

itens visíveis na lista expandida pode mudar dependendo do tamanho da janela de tela ou browser, determinada

automaticamente pelo navegador e sistema operativo. Um elemento de várias linhas de seleção irá exibir uma barra

de rolagem vertical, se o número de opções excede o número de linhas visíveis. A largura de um comando de seleção

é determinado pela mais longa opção na lista. Largura natural do elemento pode ser modificado com a propriedade

de largura CSS, e qualquer texto que ultrapassa a largura irá aparecer truncado, mas a maioria dos navegadores

automaticamente expandir a largura do menu aberto. Idealmente, cada opção na lista devem ter um rótulo de texto

curto de não mais do que algumas palavras.

The select element is not empty, instead acting as a container for one or more option or optgroup elements, which

you’ll learn about next. The select element must contain at least one option. Listing 8-10 shows a select element

containing three options. Without a multiple attribute, this control defaults to a single-line selection.

O elemento select não está vazio, atuando como um recipiente para uma ou mais opções ou elementos optgroup,

que você irá aprender adiante. O elemento select deve conter pelo menos uma opção. A listagem 8-10 mostra um

elemento de seleção contendo três opções. Sem um atributo múltiplo, esse controle padrão é uma seleção de linha

única.

Listagem 8-10. Um elemento select contendo três opções. <select name="size">

<option>Small</option>

<option>Medium</option>

<option>Large</option>

</select>

Você pode ver que esse controle vai aparecer como na Figura 8-10, fechado à esquerda e ampliado à direita. Tal

como acontece com a maioria dos controles de formulários, diferentes navegadores podem apresentar o elemento

select em estilos diferentes (este é o Firefox 2 para Mac OS X).

Figura 8-10. O controle de seleção mesmo em ambos os estados inativos e ativos, ao adicionar um atributo multiple

= "multiple ", como na Listagem 8-11, converterá o controle de uma única linha de menu drop-down para uma caixa

com várias linhas, permitindo ao usuário escolher mais de uma opção.

Figura 8-10 - O mesmo controle de seleção em ambos os estados inativo e ativo.

Listing 8-11. O elemento select com o atributo multiple

<select name="toppings" size="3" multiple="multiple">

<option>Extra cheese</option>

<option>Mushrooms</option>

<option>Olives</option>

</select>

A Figura 8-11 mostra o resultado: uma caixa de rolagem de apresentar as opções. Nenhuma barra de rolagem é

necessária neste caso, porque há apenas três opções, que é o mesmo número de linhas especificadas no atributo de

tamanho.

Figure 8-11. O menu é automaticamente convertido para uma caixa de rolagem quando várias seleções são

permitidas.

Atributos Obrigatórios

• name: Identifies the control so that it can be associated with its value when the form is submitted. A markup

validator may not generate an error if this attribute is missing, but it’s required to successfully handle the form.

Atributos Opcionais

• disabled="disabled": Quando presente, desabilita o controle de modo que não pode receber foco. O valor de um

controle desabilitado não é enviado pelo formulário. Muitos navegadores visuais exibirão os controles desabilitados

em um estilo "cinza".

• multiple="multiple": Indica que várias opções podem ser selecionadas.

• tabindex: Especifica a posição do controle na ordem de tabulação quando controles ativos se sucederem usando a

tecla Tab.

Atributos Padrão

• class

• dir

• id

• lang

• style

• title

• xml:lang

option

Cada option em um elemento select é contido por um elemento de opção. É um elemento não vazio (o que exige um

fechamento </ option>), mas só pode conter uma etiqueta (label) de texto que será exibido no menu de seleção,

com cada opção que aparece em sua própria linha dentro do menu. Um elemento option não pode conter quaisquer

outros elementos, apenas texto. Que o conteúdo do texto é também o valor que será enviado com o formulário a

menos que um valor diferente seja especificado em um atributo value. Uma opção pode ser pré-selecionada,

incluindo um atributo selecionado (cujo valor em XHTML também é selecionado, como em selected = "selected").

Mais do que uma opção pode ser pré-selecionada, desta forma, mas apenas quando o controle de seleção pai tem

um atributo multiple.

Os elementos de opção na Listagem 8-12 foram dados atributos de valor que serão apresentados no lugar do

conteúdo do elemento de texto. Desta forma, o formulário pode enviar quaisquer valores enquanto o usuário vê

rótulos de texto diferentes. A primeira opção tem um atributo valor vazio, uma vez que a opção atua apenas como

um rótulo para o controle e não deve ser enviado com o formulário (que também foi pré-selecionado, adicionando

um atributo selecionado). Um script de validação pode detectar automaticamente que este controle foi submetido,

sem valor e responder com uma mensagem pedindo ao usuário para fazer uma seleção.

Listing 8-12. Um elemento select contendo elementos de opção

<select name="size">

<option value="" selected="selected">pick a size...</option>

<option value="1">Small</option>

<option value="2">Medium</option>

<option value="3">Large</option>

</select>

Atributos Obrigatórios

Nenhum atributo é necessário para o elemento de opção.

Atributos Opcionais

• disabled="disabled": Quando presente, desativa a opção de modo que não podem ser selecionadas. Muitos

navegadores irão exibir opções desativadas em um estilo "cinza".

• label: Fornece um rótulo mais curto como texto alternativo, exibido no lugar do conteúdo do elemento para

melhorar a acessibilidade quando o valor normal é muito detalhado. Infelizmente, esse atributo não é amplamente

suportado por alguns navegadores.

• selected="selected": Indica uma opção inicialmente selecionada.

• value: Especifica um valor que pode ser passado junto com os dados do formulário apresentado. Se nenhum

atributo de valor estiver presente, o conteúdo do elemento de opção selecionado é transmitido como o valor do

controle de seleção.

Atributos Padrão

• class

• dir

• id

• lang

• name

• style

• title

• xml:lang

optgroup

One or more option elements can be sorted into related sections or categories by wrap-ping them in a containing

optgroup element, so named because it’s a “group of options”. An option group can contain only option elements;

no other elements are allowed, and you cannot nest an optgroup within an optgroup. In visual browsers, the value

of the required label attribute will be displayed as a title at the top of the group with the options indented beneath

it. All browsers display optgroup labels in some distinctive fashion, but the exact style varies widely. Firefox and

Internet Explorer render them in a boldfaced and italicized font, while Safari renders them bold-faced and in a gray

color. Opera departs even further, displaying optgroup labels as white text on a black background. The optional

disabled attribute will effectively disable the entire group, preventing the user from selecting any of those options.

The optgroup label itself is not a selectable option. You can see an example of optgroup markup in Listing 8-13,

which groups different pizza toppings into logical categories. While the “Other” category is a group of one, this is still

perfectly logical and semantically correct in the context of the menu.

Um ou mais elementos de opção podem ser classificados em seções relacionadas ou categorias ao envolvê-los em

um elemento optgroup, assim chamado porque é um "grupo de opções". Um optgroup pode conter somente

elementos option; nenhum outro elemento é permitido, e você não pode aninhar um optgroup dentro de outro

optgroup. Em navegadores visuais, o valor do atributo label será exibido como um título, na parte superior do grupo,

com as opções recuadas por baixo. Os diversos navegadores poderão exibir rótulos optgroup de maneiras distintas,

mas o estilo exato varia muito. O atributo opcional disabled irá efetivamente desativar todo o grupo, evitando que o

usuário possa selecionar qualquer uma dessas opções. O rótulo optgroup em si não é uma opção selecionável. Você

pode ver um exemplo de optgroup marcação na Listagem 8-13, que grupos diferentes coberturas de pizza em

categorias lógicas. Enquanto a categoria "Outros" é um grupo de um, isso ainda é perfeitamente lógico e

semanticamente correto no contexto do menu.

Listing 8-13. Um elemento select contendo grupos de várias opções

<select name="extra">

<option value="" selected="selected">Choose one extra topping</option>

<optgroup label="Meat">

<option>Pepperoni</option>

<option>Sausage</option>

<option>Canadian Bacon</option>

<option>Anchovies</option>

</optgroup>

<optgroup label="Fruits/Veggies/Fungi">

<option>Onions</option>

<option>Peppers</option>

<option>Olives</option>

<option>Mushrooms</option>

<option>Pineapple</option>

</optgroup>

<optgroup label="Other">

<option>Extra cheese</option>

</optgroup>

</select>

A figura 8-12 mostra o controle mesma seleção em dois diferentes navegadores, Firefox e Opera. Você pode ver que

ele aparece diferente em cada um, mas a funcionalidade é a mesma.

Figure 8-12. O controle do Firefox 2 para Mac OS X (esquerda) e Opera 9 para Mac OS X (direita). O controle do

Firefox 2 para Mac OS X (esquerda) e Opera 9 para Mac OS X (direita). Embora os rótulos apareçam muito diferentes,

ambos os navegadores fazem-lhes claramente distinguíveis das opções abaixo deles.

Atributos Obrigatórios

• label: Especifica um rótulo de texto ou o título para o grupo de opção, geralmente exibido em algum estilo

distintivo para configurá-lo para além das opções selecionáveis.

Atributos Opcionais

• disabled="disabled": Quando presente, desabilita o grupo inteiro para nenhuma de suas opções podem ser

selecionadas. Muitos navegadores visuais irão exibir opções desativadas em um estilo "cinza".

Atributos Padrão

• class

• dir

• id

• lang

• name

• style

• title

• xml:lang

textarea

The textarea element creates a multiline field for entering passages of text too lengthy for a single-line text field

(input type="text"). Its size is defined by the required rows and cols attributes, with the value of rows being the

vertical number of text rows and cols being the number of characters (or columns, which gives the attribute its

shortened name, cols) on a horizontal line. Since the size of the box is based on the size of the text, a larger or

smaller font size will obviously influence the dimensions of the textarea element. The text area’s dimensions can be

further modified by the CSS width and height properties, overriding the rows and cols attributes. Vertical and

horizontal scroll bars will appear if the amount of text entered into a textarea exceeds what can fit within its given

dimensions. This is a nonempty element that requires a closing tag. It can contain only text, which will be displayed

as the control’s initial value, and a user can easily delete or edit that initial text. Any initial text within a textarea

element will be displayed with all white space intact, including tabs and returns. If the element has no initial text

content, the control will be empty when a browser renders it. By default, most visual browsers render the text

within a text area in a monospace type-face—one in which every character is the same width, such as Courier—but

this can be modified with CSS if you prefer (and you’ll learn how later in this chapter).

O elemento textarea cria um campo com várias linhas para a entrada de passagens de textos longos demais para um

campo de texto de linha única (input type = "text"). A sua dimensão é definida pelos atributos rows (linhas verticais)

e cols (número de caracteres horizontais). Uma vez que o tamanho da caixa é baseado no tamanho do texto, um

tamanho de fonte maior ou menor irá, obviamente, influenciar as dimensões do elemento textarea. Dimensões da

área de texto podem ser adicionalmente modificados pelo CSS, substituindo os atributos rows e cols. Barras de

rolagem vertical e horizontal aparecerão se a quantidade de texto inserido em um textarea exceder o que pode

caber dentro de suas dimensões definidas. Este é um elemento não vazio que requer um código de fechamento

(</textarea>. Ele pode conter apenas texto, que será exibido como valor inicial do controle, e um usuário pode

facilmente apagar ou editar o texto inicial. Qualquer texto inicial dentro de um elemento textarea será exibido com

todos os espaços em branco intacto, incluindo as guias e retornos. Se o elemento não tem nenhum conteúdo de

texto inicial, o controle será vazio quando um navegador processá-lo. Por padrão, a maioria dos navegadores visuais

tornam o texto dentro de uma área de texto em um tipo monoespaçado, como a fonte Courier, mas isso pode ser

modificado com o CSS se preferir.

A listagem 8-14 mostra um elemento textarea contendo algum texto como seu valor inicial.

Listagem 8-14. Um elemento textarea Contendo o Texto inicial <textarea name="message" rows="6" cols="50">

Dear Mario and Luigi,

Your crust is divine, your sauce both sweet and spicy.

Your WiFi is strong and stable where the coffee shop's is dicey.

</textarea>

A figura 8-13 mostra como isso é exibido. Alguns navegadores automaticamente reservam algum espaço para uma

barra de rolagem ao longo da borda direita da caixa, que a caixa não vai tornar-se realmente de rolagem até que

tenha sido preenchido com texto suficiente para o justificar.

Figura 8-13. O controle textarea como visto em um navegador gráfico. Note-se que o texto dentro dela aparece em

um tipo de letra monoespaçada por padrão.

Atributos Obrigatórios

• cols: Especifica o número de caracteres para exibir em uma única linha horizontal, definindo assim a largura da

caixa exibida. O Texto será automaticamente quebrado em novas linhas conforme necessário, ou irá exibir uma

barra de rolagem horizontal se uma longa linha de texto não incluir espaços de palavras para facilitar a exibição.

• name: Identifica o controle de modo a poder ser associado a seu valor quando o formulário for enviado. Um

validador de marcação não pode gerar um erro se este atributo estiver faltando, mas é necessário a fim de tratar

com sucesso o formulário.

• rows: Especifica o número de linhas de texto para mostrar antes de rolagem vertical, definindo assim a altura da

caixa exibida. O navegador irá produzir automaticamente uma barra de rolagem vertical quando o comprimento do

texto exceder esta altura especificada.

Atributos Opcionais

• accesskey: Atribui um atalho de teclado para o controle de acesso mais fácil e rápido através de navegação pelo

teclado. O valor deste atributo é o personagem correspondente para a chave de acesso. A combinação de teclas

exata necessária para ativar uma chave de acesso varia entre os navegadores e sistemas operacionais.

• disabled = "disabled": Quando presente, desabilita o controle para que ele não possa receber o foco e seu valor

não poder ser modificado. Muitos navegadores irão exibir os controles desabilitados em um estado "cinza". O valor

de um controle desabilitado não é enviado pelo formulário.

• readonly = "readonly": Especifica que o controle só pode exibir um valor sem poder modificá-lo. Isso difere do

disabled, pois apesar de não poder ser modificado, poderá ser enviado pelo formulário.

• tabindex: Especifica a posição do controle na ordem de tabulação quando controles ativos se sucederem usando a

tecla TAB.

Atributos Padrão

• class

• dir

• id

• lang

• style

• title

• xml:lang

Structuring Forms

Agora que você já foi apresentado a toda a miríade de controles de formulário que você precisa, você pode estar se

perguntando exatamente como colocá-los juntos. Os controles são meramente componentes, e a forma na sua

totalidade, é mais do que a soma dos seus controles. Uma forma útil e acessível precisa de uma estrutura

significativa, assim como o restante do documento. E porque o elemento de formulário pode conter quase qualquer

marcação estrutural, você tem um arsenal XHTML ampla à sua disposição. Quando você constrói um formulário,

como com qualquer outro conteúdo, você deve pensar sobre o significado e o propósito do conteúdo e envolvê-la

nas tags mais semanticamente apropriadas. Uma lista de opções com caixas de seleção ou botões de rádio

provavelmente devem ser marcados como uma lista e cada opção realizada em um item da lista em separado (o

elemento li).

Se a ordem destas opções é significativa - opção1, opção 2, opção 3, e assim por diante - a lista deverá

provavelmente ser do tipo ordenado (usando o elemento ol). Se o formulário é dividido em seções distintas, talvez

cada seção pudesse ser envolvida em um elemento div com um título (h1 até h6) como o seu título. Se cada controle

em que representa um formulário separado, pode ser sensato para colocá-los em parágrafos (o elemento p). Com

isso em mente, lembre-se que os formulários não são realmente como conteúdos estáticos. Eles existem para

envolver o usuário a abrir a porta e convidar seus visitantes. Pense sobre o significado por trás da informação que

você está solicitando, e considere se este procedimento de preencher formulários não é tedioso. Você deve

organizar seu formulário tomando cuidado com questões de usabilidade e acessibilidade. Além dos títulos,

parágrafos, listas e tabelas que você já conhece, alguns elementos especiais são projetados especificamente para

uso com formulários.

fieldset

O elemento de nível de bloco fieldset engloba um conjunto de controles relacionados, recolhendo-os em um grupo

lógico. O fieldset pode conter qualquer outra marcação estrutural necessária para continuar a organizar e apoiar

cada controle (parágrafos, listas e assim por diante), e até mesmo elementos fieldset aninhados para estabelecer

grupos dentro de grupos (embora o aninhamento deva ser mantido a um mínimo). Por padrão, os navegadores web

mais visuais exibirão uma borda fina em torno de um conjunto de campos, embora a aparência exata da borda possa

variar de navegador para navegador. Esta borda pode ser removida com CSS. Você deve se lembrar de que os

controles dentro de um elemento de formulário devem aparecer dentro de um recipiente de nível de bloco, uma vez

que formulários não podem ter elementos inline. O elemento fieldset é apenas um contentor destes, e tem valor

mais semântico do que o elemento div, que é semanticamente neutro. Considere o sentido e a finalidade dos

controles, e reuni-los em elementos fieldset de forma adequada. Um elemento fieldset deve conter um elemento de

legenda (abordado com mais detalhes a seguir) para fornecer um título. A listagem 8-15 demonstra a marcação de

um formulário simples, muito parecido com o que você viu na Listagem 8-1 no início deste capítulo. Desta vez, os

dois controles de formulário foram envolvidos em um elemento fieldset para uni-los e estabelecer a sua relação

semântica.

Listagem 8-15. Um formulário simples com um fieldset que contém dois controles <form method="post" action="/cgi-bin/formhandler.cgi">

<fieldset>

<legend>Subscribe to our mailing list</legend>

<label for="email">Enter your E-mail address</label>

<input type="text" id="email" name="email" />

<input type="submit" name="subscribe" value="Subscribe" />

</fieldset>

</form>

Você pode ver como aparece em um navegador gráfico na Figura 8-14. A linha é puxada automaticamente pelo

navegador, juntamente com uma pequena quantidade de enchimento para criar um espaço entre a borda e o seu

conteúdo. Tanto a borda quanto o padding podem ser ajustado com CSS.

Figura 8-14. O formulário como aparece no Firefox para Mac OS X.

Atributos Obrigatórios

Nenhum atributo é necessário para o elemento fieldset.

Atributos Opcionais

Não possui elementos opcionais

Atributos Padrão

• class

• dir

• id

• lang

• style

• title

• xml:lang

legend

O elemento legend fornece um título de texto ou legenda para um fieldset e, portanto, pode aparecer apenas dentro

de um elemento fieldset. Texto de legenda – legend - deve ser escolhido com cuidado e deve ser sucinto e descritivo.

É um elemento inline que pode conter apenas texto e outros elementos inline, mas a maioria dos navegadores irá

posicionar a legenda para que se sobrepor a borda superior do fieldset (como mostrado na Figura 8-15), desviando

um pouco do comportamento inline típico. Infelizmente, o elemento legend é notoriamente difícil de estilizá-lo

consistentemente com CSS. Você pode ser capaz de alterar a sua família de fonte, tamanho, peso e cor, mas a

tentativa de aplicar um fundo, margens e preenchimento ou para reposicionar a legenda via CSS será problemática

em alguns navegadores comuns. Como regra geral, muitas vezes é melhor permitir que os navegadores apliquem

seu estilo padrão próprio e manter o CSS a um mínimo. A listagem 8-16 mostra um fieldset com um elemento de

legenda, neste caso, atuando como um título para anunciar o fim dos controles e algum texto instrucional para

ajudar o visitante a descobrir o que fazer. Um atributo accesskey também foi adicionado, criando um atalho de

teclado para ajudar a acessibilidade. Ativar o accesskey permitirá que um usuário salte diretamente para esta seção

da página web sem a necessidade de rolar. Nem todos os navegadores suportam accesskey.

Listagem 8-16. Um elemento legend apresentando um atributo accesskey <fieldset>

<legend accesskey="T">Choose additional toppings</legend>

<ul>

<li>

<label for="top1">

<input type="checkbox" id="top1" name="top1" value="peppers" />

Peppers

</label>

</li>

<li>

<label for="top2">

<input type="checkbox" id="top2" name="top2" value="xcheese" />

Extra cheese

</label>

</li>

<li>

<label for="top3">

<input type="checkbox" id="top3" name="top3" value="mushrooms" />

Mushrooms

</label>

</li>

<li>

<label for="top4">

<input type="checkbox" id="top4" name="top4" value="olives" />

Olives

</label>

</li>

</ul>

</fieldset>

A figura 8-15 ilustra como uma legenda é processada no Firefox para Mac OS X, e a maioria dos outros navegadores

visuais irá exibi-lo muito parecido com isso. O texto é centralizado verticalmente sobre a borda superior do fieldset e

há um pequeno espaço em branco em cada lado. Uma particularidade interessante é que o Internet Explorer para

Windows aplica cores azuis à legenda por padrão, mas você pode alterar isso com CSS, se você preferir.

Figura 8-15. O elemento legenda como visto no Firefox com um estilo padrão. Esta renderização é bastante típica,

mas você pode ver pequenas variações em alguns navegadores.

Atributos Obrigatórios

Nenhum atributo é necessário para o elemento fieldset.

Atributos Opcionais

• accesskey: Atribui um atalho de teclado para o elemento para o acesso mais fácil e rápido através de navegação

pelo teclado. O valor deste atributo é o personagem correspondente para a chave de acesso, embora a combinação

de teclas exata necessária para ativar uma accesskey varie entre os navegadores e sistemas operacionais.

Atributos Padrão

• class

• dir

• id

• lang

• style

• title

• xml:lang

label

Talvez o elemento mais útil e significativo de estruturação, o elemento inline label cria um rótulo de texto para um

controle específico. Uma etiqueta pode conter tanto o controle quanto um texto, caso em que a ligação entre os

dois elementos é implicada pelo contexto. Como alternativa, o elemento label pode realizar um atributo opcional

“for”, cujo valor corresponde a um id único do elemento, declarando explicitamente a ligação entreeles. O atributo

for, embora não tecnicamente necessário, é fortemente recomendado, especialmente de caixas de seleção e botões

de rádio, porque o rótulo de texto amplia a área clicável, e os controles podem apresentar áreas muito pequenas

para um ponteiro do mouse sobrepor.

Listing 8-17 expands the same mailing list subscription form, this time adding some more structural markup. Options

to choose either plain text or HTML e-mails appear in a nested field set, since those controls are a subset of the

complete set of controls. They’re in an unordered list because it’s a list of two options in no particular order, so that

markup makes good sense. Labels have been added to identify the e-mail address text field as well as the radio

buttons for choosing a format, and all are explicitly connected to their controls with for attributes. It might look like

a lot of extra markup for such a simple form, but the benefits gained in improved usability, accessibility, and

meaningful structure are worth it.

A listagem 8-17 expande a mesma discussão formulário de inscrição, desta vez adicionando alguma marcação mais

estrutural. Opções para escolher e-mails em texto simples ou HTML aparecem em um fieldset aninhado, já que os

controles são um subconjunto do conjunto completo de controles. Eles estão em uma lista não ordenada, porque é

uma lista de duas opções em nenhuma ordem particular, de modo que a marcação tenha bom senso. labels foram

adicionados para identificar o campo de texto endereço de e-mail, bem como os botões para escolher um formato, e

todos são explicitamente ligados aos seus controles com atributos. Pode parecer um monte de marcação extra para

essa forma simples, mas os benefícios obtidos em usabilidade, acessibilidade e estrutura significativa valem a pena.

Listagem 8-17. Uma forma estruturada, com fieldset e label. <form method="post" action="/cgi-bin/formhandler.cgi">

<fieldset>

<legend>Subscribe to our mailing list</legend>

<p>

<label for="email">Your E-mail address</label>

<input type="text" name="email" id="email" />

</p>

<fieldset>

<legend>Select your preferred format</legend>

<ul>

<li>

<label for="text">

<input type="radio" name="pref" value="text" id="text" /> Plain text

</label>

</li>

<li>

<label for="html">

<input type="radio" name="pref" value="html" id="html" /> HTML

</label>

</li>

</ul>

</fieldset>

<p><input type="submit" id="subscribe" value="Subscribe" /></p>

</fieldset>

</form>

Você pode ver como este formulário aparece na Figura 8-16. Infelizmente, não é muito bonito quando processado

com os estilos padrão do navegador. Mas você tem o poder do CSS do seu lado.

Figura 8-16. Um formulário não possui um estilo elegante quando renderizado com o estilo padrão do navegador,

mas sua marcação é semanticamente correta e será acessível a uma gama maior de pessoas e dispositivos.

Atributos Obrigatórios

Nenhum atributo é necessário para o elemento fieldset.

Atributos Opcionais

• for: Associa explicitamente o label ao controle quando o valor do atributo corresponde ao id do controle, que deve

ser único.

Atributos Padrão

• class

• dir

• id

• lang

• style

• title

• xml:lang