Criar formulários da Web

Quando um visitante insere informações em um formulário exibido em um navegador da Web e clica no botão de envio, as informações são enviadas para um servidor onde são processadas por um script do servidor ou aplicativo. O servidor responde enviando de volta as informações solicitadas pelo usuário (ou cliente) ou realizando alguma outra ação com base no conteúdo do formulário.

Você pode criar formulários que enviem dados para a maior parte dos servidores de aplicativos, incluindo PHP, ASP e ColdFusion. Se você usar o ColdFusion, também poderá adicionar controles de formulários específicos do ColdFusion nos seus formulários.

Objetos de formulário

No Dreamweaver, os tipos de entrada de formulário são chamados de objetos de formulário. Os objetos de formulário são os mecanismos que permitem aos usuários inserir dados. Você pode adicionar os seguintes objetos de formulário a um formulário:

Aceite todos os tipos de entrada de texto alfanumérico. O texto pode ser exibido como uma linha única, várias linhas e um campo de senha no qual o texto digitado é substituído por asteriscos ou marcadores a fim de ocultar o texto de curiosos.

Armazene informações inseridas por um usuário como, por exemplo, endereço de email ou preferência de visualização e, em seguida, use esses dados na próxima visita do usuário ao site.

Realize as ações com o clique. Você pode adicionar um nome ou rótulo personalizado a um botão, ou usar um dos rótulos “Enviar” ou “Redefinir” predefinidos. Use um botão para enviar dados de formulário ao servidor ou para redefinir o formulário. Você também pode atribuir outras tarefas de processamento definidas em um script. Por exemplo, o botão pode calcular o custo total dos itens selecionados com base em valores atribuídos.

Permita várias respostas dentro de um único grupo de opções. Um usuário pode selecionar quantas opções se aplicarem. O seguinte exemplo mostra três itens de caixa de seleção marcados: Surfing, Mountain Biking e Rafting.

Represente opções exclusivas. A seleção de um botão dentro de um grupo de botões de opção desmarca todos os demais (um grupo consiste em dois ou mais botões que compartilham o nome). No exemplo abaixo, Rafting é a opção selecionada no momento. Caso o usuário clique em Surfing, o botão Rafting é desmarcado automaticamente.

Exiba valores de opção em uma lista de rolagem que permite aos usuários selecionar várias opções. A opção Lista exibe os valores de opção em um menu que permite aos usuários selecionar apenas um único item. Use menus quando você tiver uma quantidade de espaço limitada, mas precisa exibir muitos itens, ou para controlar os valores retornados ao servidor. Diferentemente dos campos de texto nos quais os usuários digitam o que querem, inclusive dados inválidos, você define os valores exatos retornados por um menu.

Listas de navegação ou menus pop-up que permitem inserir um menu no qual cada opção é vinculada a um documento ou arquivo.

Eles permitem aos usuários procurar um arquivo no computador e carregá-lo como dados de formulário.

Eles permitem inserir uma imagem em um formulário. Use campos de imagem para criar botões gráficos como, por exemplo, Enviar ou Redefinir. O uso de uma imagem para realizar tarefas que não sejam o envio de dados exige que um comportamento seja anexado ao objeto de formulário.

Criar um formulário em HTML

(Somente para usuários da Creative Cloud): como parte do suporte ao HTML5, os novos atributos foram adicionados ao painel Propriedades para elementos de formulário. Além disso, quatro novos elementos de formulário (email, pesquisa, telefone, URL) foram adicionados à seção Formulários do painel Inserir. Para obter mais informações, consulte Suporte aprimorado a HTML5 para elementos de formulário.

Para assistir a um tutorial sobre a criação de formulários, consulte www.adobe.com/go/vid0160_br.

Para assistir a um tutorial sobre a estilização de formulários com CSS, consulte www.adobe.com/go/vid0161_br.

Propriedades do objeto de campo de texto

Selecione o objeto do campo de texto e defina uma das seguintes opções no Inspetor de propriedades:

Especifica o número máximo de caracteres que podem ser exibidos no campo. Esse número pode ser inferior ao Nº máx. de caract, que especifica o número máximo de caracteres que podem ser digitados no campo. Por exemplo, se a Largura do caractere for definida como 20 (o valor padrão) e um usuário digitar 100 caracteres, apenas 20 deles serão visíveis no campo de texto. Embora você não possa exibir os caracteres no campo, eles são reconhecidos pelo objeto de campo e enviados para processamento no servidor.

Especifica o número máximo de caracteres que o usuário pode digitar em campos de texto de linha única. Use Nº máx. de caract. para limitar CEPs a 5 dígitos, limitar senhas a 10 caracteres etc. Caso você deixe a caixa Nº máx. de caract. em branco, os usuários podem digitar qualquer quantidade de texto. Se o texto exceder a largura do caractere do campo, o texto será rolado. Caso um usuário exceda o número máximo de caracteres, o formulário produz um som de alerta.

(Disponível quando a opção Várias linhas está selecionada) Define a altura do campo para campos de texto com várias linhas.

Desativa a área de texto.

Torna a área de texto somente leitura.

Designa o campo como um campo de linha única, de várias linhas ou de senha.

Resulta em uma tag input com o type atributo definido como text. A configuração Largura do caractere é mapeada para o atributo size e a configuração Nº máx. de caract., para o atributo maxlength.

Resulta em uma tag textarea. A configuração Largura do caractere é mapeada para o atributo cols e a configuração Número de linhas, para o atributo rows.

Resulta em uma tag input com o type atributo definido como password. As configurações Largura do caractere e Nº máx. de caract. são mapeadas para os mesmos atributos como campos de texto de linha única. Quando um usuário digita um campo de texto de senha, a entrada é exibida como marcadores ou asteriscos para protegê-lo da observação de outras pessoas.

Atribui o valor exibido no campo quando o formulário é carregado pela primeira vez. Por exemplo, você pode indicar que o usuário digita informações no campo incluindo uma observação ou um valor de exemplo.

Permite que você aplique regras de CSS ao objeto.

Opções de objeto de botão

Atribui um nome ao botão. Dois nomes reservados, Enviar e Redefinir, informam o formulário para enviar os dados de formulário ao aplicativo de processamento ou ao script, ou para redefinir todos os campos de formulário de acordo com os valores originais, respectivamente.

Determina o texto exibido no botão.

Determina o que acontece quando um botão é clicado.

Envia os dados de formulário para processamento quando o usuário clica no botão. Os dados são enviados para a página ou o script especificado na propriedade Ação do formulário.

Limpa o conteúdo do formulário quando o botão é clicado.

Especifica a ação a ser realizada quando o botão é clicado. Por exemplo, você pode adicionar um comportamento do JavaScript que abre outra página quando o usuário clica no botão.

Aplica regras de CSS ao objeto.

Opções de objeto de caixa de seleção

Define o valor a ser enviado para o servidor quando a caixa de seleção é marcada. Por exemplo, em uma pesquisa você pode definir um valor igual a 4 para concordo totalmente e um valor igual a 1 para discordo totalmente.

Determina se a caixa de seleção é marcada quando o formulário é carregado no navegador.

Permite ao servidor determinar dinamicamente o estado inicial da caixa de seleção. Por exemplo, você pode usar as caixas de seleção para apresentar visualmente as informações Sim/Não armazenadas em um registro de banco de dados. No momento do design, você não sabe essas informações. Durante o runtime, o servidor lê o registro de banco de dados e marca a caixa de seleção caso o valor seja Sim.

Aplica regras de Folhas de estilos em cascata (CSS) ao objeto.

Opções do objeto de botão de opção único

Define o valor a ser enviado para o servidor quando o botão de opção é selecionado. Por exemplo, você pode digitar skiing na caixa Valor marcado para indicar que um usuário escolheu skiing.

Determina se o botão de opção é selecionado quando o formulário é carregado no navegador.

Permite ao servidor determinar dinamicamente o estado inicial do botão de opção. Por exemplo, você pode usar os botões de opção para apresentar visualmente as informações armazenadas em um registro de banco de dados. No momento do design, você não sabe essas informações. Durante o runtime, o servidor lê o registro de banco de dados e marca o botão de opção caso o valor corresponda ao que você especificou.

Aplica regras de CSS ao objeto.

Opções de menu

Atribui um nome ao menu. O nome deve ser exclusivo.

Indica se o menu é aberto quando clicado (a opção Menu) ou exibe uma lista rolável de itens (a opção Lista). Selecione a opção Menu caso você queira que apenas uma opção permaneça visível quando o formulário é exibido em um navegador. Para exibir as demais opções, o usuário clica na seta para baixo.

Selecione a opção Lista para listar uma ou todas as opções quando o formulário é exibido em um navegador a fim de permitir aos usuários selecionar vários itens.

(Listar apenas o tipo) Define o número de itens exibidos no menu.

(Listar apenas o tipo) Indica se o usuário pode selecionar vários itens na lista.

Abre uma caixa de diálogo que permite adicionar os itens a um menu de formulário:

1. Use os botões de adição (+) e de subtração (-) para adicionar e remover itens na lista.

2. Digite o texto do rótulo e um valor opcional para cada item de menu.

   Cada item da lista tem um rótulo (o texto exibido na lista) e um valor (o valor enviado para o aplicativo de processamento caso o item seja selecionado). Caso nenhum valor seja especificado, o rótulo é enviado, na verdade, para o aplicativo de processamento.

3. Use os botões de seta para cima e para baixo a fim de reorganizar os itens na lista.

   Os itens são exibidos no menu na mesma ordem em que são exibidos na caixa de diálogo Listar valores. O primeiro item da lista é o item selecionado quando a página é carregada em um navegador.

Permite ao servidor selecionar dinamicamente um item no menu quando ele é exibido pela primeira vez.

Permite que você aplique regras de CSS ao objeto.

Define os itens selecionados na lista por padrão. Clique no(s) item(ns) na lista.

Inserir campos de carregamento de arquivo

Você pode criar um campo de carregamento de arquivo que permite aos usuários selecionar um arquivo no computador, como, por exemplo, um documento de processador de textos ou um arquivo gráfico, e carregá-lo no servidor. Um campo de arquivo é semelhante aos demais campos de texto, exceto por também conter um botão Procurar. O usuário pode digitar manualmente o caminho do arquivo que deseja carregar ou usar o botão Procurar para localizar e selecionar o arquivo.

Para usar campos de carregamento de arquivo, você deve ter um script do servidor ou uma página capaz de lidar com envios de arquivo. Consulte a documentação da tecnologia de servidor que você usa para processar dados de formulário. Por exemplo, se você usar PHP, consulte “Handling files uploads” (Gerenciar o upload de arquivos) no Manual online do PHP em http://us2.php.net/features.file-upload.php.

Os campos de arquivo exigem que você use o método POST para transmitir os arquivos do navegador para o servidor. O arquivo é postado no endereço que você especificou na caixa Ação do formulário.

Inserir um botão de imagem

Você também pode usar imagens como ícones de botão. O uso de uma imagem para realizar tarefas que não sejam o envio de dados exige que um comportamento seja anexado ao objeto de formulário.

Opções de objeto do campo oculto

Especifica o nome do campo.

Atribui um valor ao campo. Esse valor é passado para o servidor quando o formulário é enviado.

Inserir um grupo de botões de opção

Inserir um grupo de caixas de seleção

Sobre os objetos de formulário dinâmicos

Um objeto de formulário dinâmico é um objeto de formulário cujo estado inicial é determinado pelo servidor quando a página é solicitada no servidor, e não pelo designer do formulário durante o design. Por exemplo, quando um usuário solicita uma página do PHP que contém um formulário com um menu, um script do PHP na página preenche automaticamente o menu com valores armazenados em um banco de dados. Em seguida, o servidor envia a página completada para o navegador do usuário.

Tornar objetos de formulário dinâmicos pode simplificar a manutenção do site. Por exemplo, muitos sites usam menus para apresentar aos usuários um conjunto de opções. Caso o menu seja dinâmico, você pode adicionar, remover ou alterar itens de menu em um único local, a tabela do banco de dados em que os itens são armazenados, para atualizar todas as ocorrências do mesmo menu no site.

Inserir ou alterar um menu dinâmico de formulário HTML

Você pode preencher dinamicamente um menu de formulário em HTML ou menu de lista com entradas de um banco de dados. Na maioria das páginas, você pode usar um objeto de menu em HTML.

Antes de começar, você deve inserir um formulário em HTML em uma página do ColdFusion, PHP ou ASP e definir um conjunto de registros ou outra fonte de conteúdo dinâmico para o menu.

Tornar os menus de formulário em HTML dinâmicos

Exibir conteúdo dinâmico em campos de texto em HTML

Você pode exibir conteúdo dinâmico em campos de texto HTML quando o formulário é visualizado em um navegador.

Antes de começar, você deve criar o formulário em uma página do ColdFusion, PHP ou ASP e definir um conjunto de registros ou outra fonte de conteúdo dinâmico para o texto.

Definir as opções da caixa de diálogo Campo de texto dinâmico

Pré-selecionar dinamicamente uma caixa de seleção em HTML

Você pode permitir ao servidor decidir se deve escolher uma caixa de seleção quando o formulário é exibido em um navegador.

Antes de começar, você deve criar o formulário em uma página do ColdFusion, PHP ou ASP e definir um conjunto de registros ou outra fonte de conteúdo dinâmico para as caixas de seleção. O ideal é que a origem de conteúdo contenha dados boolianos como, por exemplo, Sim/Não ou verdadeiro/falso.

Pré-selecionar dinamicamente um botão de opção em HTML

Pré-selecione dinamicamente um botão de opção em HTML quando um registro é exibido no formulário em HTML em um navegador.

Antes de começar, você deve criar o formulário em uma página do ColdFusion, PHP ou ASP e inserir pelo menos um grupo de botões de opção em HTML (Inserir > Formulário > Grupo de botões de opção). Você também deve definir um conjunto de registros ou outra origem de conteúdo dinâmico para os botões de opção. O ideal é que a origem de conteúdo contenha dados boolianos como, por exemplo, Sim/Não ou verdadeiro/falso.

Definir as opções da caixa de diálogo Grupo de botões de opção dinâmico

Definir as opções da caixa de diálogo Grupo de botões de opção dinâmico (ColdFusion)

Validar dados de formulário em HTML

O Dreamweaver pode adicionar código JavaScript que verifica o conteúdo dos campos de texto especificados para assegurar que o usuário inseriu o tipo de dados correto.

Você pode usar widgets de formulário do Spry para criar os formulários e validar o conteúdo dos elementos de formulário especificados. Para obter mais informações, consulte os tópicos do Spry listados abaixo.

Você também pode criar formulários do ColdFusion no Dreamweaver que validam o conteúdo de campos especificados. Para obter mais informações, consulte os tópicos do capítulo ColdFusion listados abaixo.

Anexar comportamentos do JavaScript a objetos de formulário em HTML

Você pode anexar comportamentos JavaScript armazenados no Dreamweaver a objetos de formulário em HTML como, por exemplo, botões.

Anexar scripts personalizados a botões de formulário em HTML

Alguns formulários usam JavaScript ou VBScript para realizar o processamento de formulário ou outra ação no cliente, e não o envio dos dados do formulário para processamento no servidor. Você pode usar o Dreamweaver para configurar um botão de formulário para executar um determinado script do cliente quando usuário clicar no botão.

Criação de formulários em HTML acessíveis

Ao inserir um objeto de formulário em HTML, você pode tornar o objeto de formulário acessível e alterar os atributos de acessibilidade posteriormente.

Adicionar um objeto de formulário acessível

Editar valores de acessibilidade para um objeto de formulário