Formulários. Como Formulários Funcionam

Transcrição

1 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.

2 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.

3 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=" ">enter your address to subscribe to our mailing list.</p> <p><input type="text" name=" " id=" " /> <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

4 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

5 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> <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

6 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> <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>

7 <ul> <label for="top1"> <input type="checkbox" id="top1" name="top1" value="pepperoni" checked="checked" /> Pepperoni <label for="top2"> <input type="checkbox" id="top2" name="top2" value="xcheese" /> Extra cheese <label for="top3"> <input type="checkbox" id="top3" name="top3" value="onions" /> Onions <label for="top4"> <input type="checkbox" id="top4" name="top4" value="mushrooms" /> Mushrooms <label for="top5"> <input type="checkbox" id="top5" name="top5" value="olives" /> Olives </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.

8 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> <label for="small"> <input type="radio" name="size" id="small" value="small" />Small <label for="medium"> <input type="radio" name="size" id="medium" value="medium" />Medium <label for="large"> <input type="radio" name="size" id="large" value="large" />Large </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>

9 <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: <input type="text" id="username" name="username" /></p> <p><label for="password">your Password: <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

10 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 ( 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>

11 </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

12 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 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 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 O mesmo controle de seleção em ambos os estados inativo e ativo. Listing O elemento select com o atributo multiple <select name="toppings" size="3" multiple="multiple"> <option>extra cheese</option> <option>mushrooms</option> <option>olives</option>

13 </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 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.

14 Listing 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ê

15 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 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 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".

16 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 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.

17 Figura 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