Observação:

O suporte para elementos de formulário em HTML foi aprimorado nas atualizações da Dreamweaver Creative Cloud. Para obter informações, consulte Suporte aprimorado a HTML5 para elementos de formulário.

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

Observação:

Você também pode enviar dados de formulário diretamente para um destinatário de email.

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:

Campos de texto

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.

Objetos de formulário

Observação:

As senhas e as demais informações enviadas para um servidor usando um campo de senha não são criptografadas. Os dados transferidos podem ser interceptados e lidos como texto alfanumérico. Por essa razão, você deve sempre fornecer criptografia aos dados que deseja manter em segurança.

Campos ocultos

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.

Botões

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.

Caixas de seleção

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.

Caixas de seleção

Botões de opção

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.

Botões de opção

Menus de lista

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.

Observação:

Um menu pop-up em um formulário em HTML não é igual a um menu pop-up gráfico. Para obter informações sobre como criar, editar, mostrar e ocultar um menu pop-up gráfico, consulte o link ao final desta seção.

Menus de salto

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

Campos de arquivo

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

Campos de imagem

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.

  1. Abra uma página e coloque o ponto de inserção onde você deseja que o formulário seja exibido.
  2. Selecione Inserir > Formulário ou a categoria Formulários, no painel Inserir, e clique no ícone Formulário.

    Na visualização Design, os formulários são indicados por um contorno vermelho pontilhado. Se você não vir esse contorno, selecione Exibir > Auxílios visuais > Elementos invisíveis.

  3. Defina as propriedades do formulário em HTML no Inspetor de propriedades (Janela >Propriedades):

    a.Na janela Documento, clique no contorno para selecionar o formulário.

    b.Na caixa Nome do formulário, digite um nome exclusivo para identificar o formulário.

    A nomeação de um formulário possibilita referenciar ou controlar o formulário com uma linguagem de script como, por exemplo, JavaScript ou VBScript. Caso você não nomeie o formulário, o Dreamweaver gerará um nome usando a sintaxe formn e incrementará o valor de n a cada formulário adicionado à página.

    c.Na caixa Ação, especifique a página ou o script que processará os dados do formulário digitando o caminho ou clicando no ícone de pasta para navegar até a página ou o script apropriado. Exemplo: processorder.php.

    d.No menu pop-up Método, especifique o método para transmitir os dados de formulário ao servidor.

    Defina uma das seguintes opções:

    Padrão Usa a configuração padrão do navegador para enviar os dados do formulário ao servidor. Normalmente, o valor padrão é o método GET.

    GET Acrescenta o valor ao URL que está solicitando a página.

    POST Incorpora os dados de formulário à solicitação HTTP.

    Não use o método GET para enviar formulários longos. As URLs estão limitadas a 8.192 caracteres. Se a quantidade de dados enviados for muito grande, eles serão truncados, o que leva a resultados inesperados ou falhas no processamento.

    As páginas dinâmicas geradas por parâmetros passados pelo método GET podem ser marcadas porque todos os valores necessários para gerar novamente a página estão contidos no URL exibido na caixa Endereço do navegador. Por outro lado, as páginas dinâmicas geradas por parâmetros passados pelo método POST não podem ser marcadas.

    Caso você colete nomes de usuário e senhas confidenciais, números de cartão de crédito ou outras informações confidenciais, o método POST pode parecer mais seguro que o método GET. No entanto, as informações enviadas pelo método POST não são criptografadas e podem ser facilmente recuperadas por um hacker. Para garantir a segurança, use uma conexão protegida em um servidor seguro.

     

    e.(Opcional) No menu pop-up Tipo de codif., especifique o tipo de codificação MIME dos dados enviados ao servidor para processamento.

    A configuração padrão de application/x-www-form-urlencode costuma ser usada com o método POST. Caso você esteja criando um campo de carregamento de arquivo, especifique o tipo MIME multipart/form‑data.

     

    f.(Opcional) No menu pop-up Destino, especifique a janela na qual serão exibidos os dados retornados pelo programa invocado.

    Caso a janela nomeada ainda não esteja aberta, uma nova com esse nome é aberta. Defina um dos seguintes valores de destino:

    _blank Abre o documento de destino em uma nova janela sem nome.

    _parent Abre o documento de destino na janela pai da janela que exibe o documento atual.

    _self Abre o documento de destino na mesma janela em que o formulário foi enviado.

    _top Abre o documento de destino no corpo da janela atual. Esse valor pode ser usado para verificar se o documento de destino usa toda a janela mesmo que o documento original tenha sido exibido em um quadro.

  4. Insira objetos de formulário na página:

    a.Coloque o ponto de inserção onde o objeto de formulário deve ser exibido no formulário.

    b.Selecione o objeto no menu Inserir > Formulário ou na categoria Formulários do painel Inserir.

    c.Preencha a caixa de diálogo Atributos de acesso à tag input. Para obter mais informações, clique no botão Ajuda da caixa de diálogo.

    Observação:

    Se não vir a caixa de diálogo Atributos de acesso a tag input, você pode ter colocado o Ponto de inserção na Visualização de código para tentar inserir o objeto de formulário. Verifique se o Ponto de inserção está na Visualização de projeto e tente novamente. Para obter mais informações sobre este tópico, consulte o artigo de David Powers Creating HTML forms in Dreamweaver (Criando formulários em HTML no Dreamweaver) (apenas em inglês).

    d.Defina as propriedades dos objetos.

    e.Digite um nome para o objeto no Inspetor de propriedades.

    Todos os campos de texto, campos ocultos, caixas de seleção e objetos de lista/menu devem ter um nome exclusivo que identifique o objeto no formulário. Os nomes de objeto de formulário não podem conter espaços ou caracteres especiais. Você pode usar qualquer combinação dos caracteres alfanuméricos e um sublinhado (_). O rótulo que você atribui ao objeto é o nome da variável que armazena o valor (os dados inseridos) do campo. Esse é o valor enviado para o servidor para processamento.

    Observação:

    Todos os botões de opção em um grupo devem ter o mesmo nome.

    f.Para identificar o campo de texto, a caixa de seleção ou o objeto de botão de opção na página, clique ao lado do objeto e digite o rótulo.

  5. Ajuste o layout do formulário.

    Use quebras de linha, quebras de parágrafo, texto pré-formatado ou tabelas para formatar os formulários. Você não pode inserir um formulário em outro formulário (ou seja, não é possível sobrepor tags), mas pode incluir mais de um formulário em uma página.

    Ao criar formulários, não se esqueça de identificar os campos de formulário com texto descritivo para permitir aos usuários saber ao que eles estão respondendo, por exemplo, “Digite seu nome” para solicitar informações de nome.

    Use tabelas para fornecer estrutura a objetos de formulário e rótulos de campo. Ao usar tabelas em formulários, verifique se todas as tags table estão incluídas entre as tags form.

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:

Largura do caractere

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.

Nº máx. de caract.

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.

Número de linhas

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

Desativado

Desativa a área de texto.

Somente leitura

Torna a área de texto somente leitura.

Tipo

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

Linha única

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.

Multilinhas

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.

Senha

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.

Valor inicial

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.

Classe

Permite que você aplique regras de CSS ao objeto.

Opções de objeto de botão

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.

Valor

Determina o texto exibido no botão.

Ação

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

Enviar formulário

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.

Redefinir formulário

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

Nenhum

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.

Classe

Aplica regras de CSS ao objeto.

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

Valor marcado

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.

Estado inicial

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

Dinâmico

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.

Classe

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

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

Valor marcado

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.

Estado inicial

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

Dinâmico

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.

Classe

Aplica regras de CSS ao objeto.

Lista/menu

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

Tipo

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.

Altura

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

Seleções

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

Listar valores

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.

Dinâmico

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

Classe

Permite que você aplique regras de CSS ao objeto.

Selecionados inicialmente

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.

Observação:

Entre em contato com o administrador do sistema para confirmar se há permissão para carregamentos de arquivo anônimos antes de usar o campo de arquivo.

  1. Insira um formulário na página (Inserir > Formulário).
  2. Selecione o formulário para exibir o Inspetor de propriedades.
  3. Defina o Método do formulário como POST.
  4. No menu pop-up Tipo de codif., selecione multipart/form-data.
  5. Na caixa Ação, especifique o script do servidor ou a página capaz de controlar o arquivo carregado.
  6. Coloque o ponto de inserção no contorno do formulário e selecione Inserir > Formulário > Campo de arquivo.
  7. Defina qualquer uma das seguintes opções no Inspetor de propriedades:

    Nome do campo de arquivo

    Especifica o nome do objeto do campo de arquivo.

    Largura do caractere

    Especifica o número máximo de caracteres que podem ser exibidos no campo.

    Nº máx. de caract.

    Especifica o número máximo de caracteres que o campo manterá. Caso o usuário procure o arquivo, o nome de arquivo e o caminho podem exceder o valor Nº máx. de caract especificado. No entanto, se o usuário tentar digitar o nome de arquivo e o caminho, o campo de arquivo só permitirá o número de caracteres especificado pelo valor Nº máx. de caract.

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.

  1. No documento, coloque o ponto de inserção dentro do contorno do formulário.
  2. Selecione Inserir > Formulário > Campo de imagem.

    A caixa de diálogo Selecionar origem da imagem é exibida.

  3. Selecione a imagem do botão na caixa de diálogo Selecionar origem da imagem e clique em OK.
  4. Defina qualquer uma das seguintes opções no Inspetor de propriedades:

    Campo de imagens

    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.

    Origem

    Especifica a imagem que você deseja usar para o botão.

    Alt

    Permite que você digite texto descritivo caso haja falha no carregamento da imagem no navegador.

    Alinhar

    Define o atributo align do objeto.

    Editar imagem

    Inicia o editor de imagens padrão e abre o arquivo de imagem para edição.

    Classe

    Permite que você aplique regras de CSS ao objeto.

  5. Para anexar um comportamento do JavaScript ao botão, selecione a imagem e, depois, selecione o comportamento no painel Comportamentos (Janela > Comportamentos).

Opções de objeto do campo oculto

Campo oculto

Especifica o nome do campo.

Valor

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

  1. Coloque o ponto de inserção dentro do contorno do formulário.
  2. Selecione Inserir > Formulário > Grupo de botões de opção.

  3. Complete a caixa de diálogo e clique em OK.

    a.Na caixa Nome, digite um nome para o grupo de botões de opção.

     Caso você defina os botões de opção para passar parâmetros novamente ao servidor, os parâmetros são associados ao nome. Por exemplo, caso você nomeie o grupo myGroup e defina o método de formulário como GET (ou seja, você deseja que o formulário especifique parâmetros de URL, em vez de parâmetros de formulário, quando o usuário clicar no botão de envio), a expressão myGroup="CheckedValue" será especificada no URL para o servidor.

    b.Clique no botão de adição (+) para adicionar um botão de opção ao grupo. Digite um rótulo e um valor marcado para o novo botão.

    c.Clique nas setas para cima ou para baixo a fim de reorganizar os botões.

    d.Para definir um botão de opção específico a ser selecionado quando a página é aberta em um navegador, digite um valor igual ao valor do botão de opção na caixa Selecionar valor igual a.

    Digite um valor estático ou especifique um valor dinâmico clicando no ícone de raio ao lado da caixa e selecionando um conjunto de registros que contenha possíveis valores marcados. Em ambos os casos, o valor que você especifica deve corresponder ao valor marcado de um dos botões de opção do grupo. Para exibir os valores marcados dos botões de opção, selecione cada um dos botões e abra seu Inspetor de propriedades (Janela > Propriedades).

    e.Selecione o formato no qual você deseja que o Dreamweaver crie o layout dos botões. Crie o layout dos botões usando quebras de linha ou uma tabela. Caso você selecione a opção de tabela, o Dreamweaver criará uma tabela de coluna única e colocará os botões de opção à esquerda e os rótulos à direita.

    Você também pode definir as propriedades no Inspetor de propriedades ou diretamente na Visualização de código.

Inserir um grupo de caixas de seleção

  1. Coloque o ponto de inserção dentro do contorno do formulário.
  2. Selecione Inserir > Formulário > Grupo de caixas de seleção.

  3. Complete a caixa de diálogo e clique em OK.

    a.Na caixa Nome, digite um nome para o grupo de caixas de seleção.

    Caso você defina as caixas de seleção para passar parâmetros novamente ao servidor, os parâmetros serão associados ao nome. Por exemplo, caso você nomeie o grupo myGroup e defina o método de formulário como GET (ou seja, você deseja que o formulário especifique parâmetros de URL, em vez de parâmetros de formulário, quando o usuário clicar no botão de envio), a expressão myGroup="CheckedValue" será especificada no URL para o servidor.

    b.Clique no botão de adição (+) para adicionar uma caixa de seleção ao grupo. Digite um rótulo e um valor marcado para a nova caixa de seleção.

    c.Clique nas setas para cima ou para baixo a fim de reorganizar as caixas de seleção.

    d.Para definir uma caixa de seleção específica a ser selecionada quando a página é aberta em um navegador, digite um valor igual ao valor da caixa de seleção na caixa Selecionar valor igual a.

    Digite um valor estático ou especifique um valor dinâmico clicando no ícone de raio ao lado da caixa e selecionando um conjunto de registros que contenha possíveis valores marcados. Em ambos os casos, o valor que você especifica deve corresponder ao valor marcado de uma das caixas de seleção do grupo. Para exibir os valores marcados das caixas de seleção, selecione cada caixa de seleção e abra seu Inspetor de propriedades (Janela > Propriedades).

    e.Selecione o formato no qual você deseja que o Dreamweaver crie o layout das caixas de seleção.

    Crie o layout das caixas de seleção usando quebras de linha ou uma tabela. Caso você selecione a opção de tabela, o Dreamweaver criará uma tabela de coluna única e colocará as caixas de seleção à esquerda e os rótulos à direita.

    Você também pode definir as propriedades no Inspetor de propriedades ou diretamente na Visualização de código.

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.

  1. Insira um objeto de formulário Lista/menu HTML na página:

        a.Clique em um formulário em HTML na página (Inserir > Formulário > Formulário).

        b.Selecione Inserir > Formulário > Lista/Menu para inserir o objeto de formulário.

  2. Siga um destes procedimentos:

    • Selecione o objeto de formulário Lista/menu HTML novo ou já existente e, em seguida, clique no botão Dinâmico no Inspetor de propriedades.

    • Selecione Inserir > Objetos de dados > Dados dinâmicos > Lista de seleção dinâmica.

  3. Complete a caixa de diálogo Lista/menu dinâmico e clique em OK.

      a.No menu pop-up Opções do conjunto de registros, selecione o conjunto de registros a ser usado como uma fonte de conteúdo. Você também usa esse menu para editar itens de lista/menu estáticos e dinâmicos posteriormente.

      b.Na área Opções estáticas, insira um item padrão na lista ou no menu. Além disso, use essa opção para editar entradas estáticas em um objeto de formulário lista/menu depois de adicionar conteúdo dinâmico.

      c.(Opcional) Use os botões de adição (+) e de subtração (-) para adicionar e remover itens na lista. Os itens estão na mesma ordem da caixa de diálogo Valores iniciais da lista. O primeiro item da lista é o item selecionado quando a página é carregada em um navegador. Use os botões de seta para cima e para baixo a fim de reorganizar os itens na lista.

      d.No menu pop-up Valores, selecione o campo que contém os valores dos itens de menu.

      e.No menu pop-up Rótulos, selecione o campo que contém os rótulos dos itens de menu.

      f.(Opcional) Para especificar que um determinado item de menu é selecionado quando a página é aberta em um navegador ou quando um registro é exibido no formulário, digite um valor igual ao valor do item de menu na caixa Selecionar valor igual a.

        Você pode inserir um valor estático ou especificar um valor dinâmico clicando no ícone de raio ao lado da caixa e selecionando um valor dinâmico na lista das fontes de dados. Em ambos os casos, o valor especificado deve ser correspondente a um dos valores do item de menu.

     

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

  1. Na visualização Design, selecione o objeto de formulário lista/menu.
  2. No Inspetor de propriedades, clique no botão Dinâmico.
  3. Complete a caixa de diálogo e clique em OK.

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.

  1. Selecione o campo de texto no formulário em HTML na página.
  2. No Inspetor de propriedades, clique no ícone de raio ao lado da caixa Valor inicial para exibir a caixa de diálogo Dados dinâmicos.
  3. Selecione a coluna do conjunto de registros que fornecerá um valor para o campo de texto e, em seguida, clique em OK.

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

  1. Selecione o campo de texto a ser tornado dinâmico no menu pop-up Campo de texto.
  2. Clique no ícone de raio ao lado da caixa Definir valor para, selecione uma fonte de dados na lista de fontes e clique em OK.

    A fonte de dados deve conter informações textuais. Caso nenhuma fonte de dados seja exibida na lista ou caso as fontes de dados disponíveis não atendam às suas necessidades, clique no botão de adição (+) para definir uma nova.

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.

  1. Escolha um objeto de formulário de caixa de seleção na página.
  2. No Inspetor de propriedades, clique no botão Dinâmico.
  3. Complete a caixa de diálogo Caixa de seleção dinâmica e clique em OK.
    • Clique no ícone de raio ao lado da caixa Marcar se e selecione o arquivo na lista de fontes de dados.

      A fonte de dados deve conter dados Boolianos como, por exemplo, Sim e Não ou verdadeiro e falso. Caso nenhuma fonte de dados seja exibida na lista ou caso as fontes de dados disponíveis não atendam às suas necessidades, clique no botão de adição (+) para definir uma nova.

    • Na caixa Igual a, digite o valor que o campo deve ter para que a caixa de seleção seja exibida marcada.

      Por exemplo, para que a caixa de seleção seja exibida marcada quando um determinado campo em um registro apresentar um valor Sim, digite Sim na caixa Igual a.

    Observação:

    Esse valor também retorna para o servidor caso o usuário clique no botão Enviar do formulário.

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.

  1. Na visualização Design, selecione um botão de opção no grupo.
  2. No Inspetor de propriedades, clique no botão Dinâmico.
  3. Complete a caixa de diálogo Grupo de botões de opção dinâmico e clique em OK.

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

  1. No menu pop-up Grupo de botões de opção, selecione um formulário e o grupo de botões de opção na página.

    A caixa Valor do botão de opção exibe os valores de todos os botões de opção no grupo.

  2. Selecione um valor a ser pré-selecionado dinamicamente na lista de valores. Esse valor é exibido na caixa Valor.
  3. Clique no ícone de raio ao lado da caixa Selecionar valor igual a e selecione um conjunto de registros que contenha valores marcados para os botões de opção no grupo.

    O conjunto de registros que você seleciona contém valores correspondentes aos valores marcados dos botões de opção. Para exibir os valores marcados dos botões de opção, selecione cada um dos botões e abra seu Inspetor de propriedades (Janela > Propriedades).

  4. Clique em OK.

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

  1. Selecione um grupo de botões de opção e um formulário no menu pop-up Grupo de botões de opção.
  2. Clique no ícone de raio próximo à caixa Selecionar valor igual a.
  3. Complete a caixa de diálogo Dados dinâmicos e clique em OK.

      a.Selecione uma fonte de dados na lista das fontes de dados.

      b.(Opcional) Selecione um formato de dados para o texto.

      c.(Opcional) Modifique o código que o Dreamweaver insere na página para exibir o texto dinâmico.

  4. Clique em OK para fechar a caixa de diálogo Grupo de botões de opção dinâmico e insira o alocador de espaço de conteúdo dinâmico no Grupo de botões de opção.

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.

  1. Crie um formulário em HTML que inclua pelo menos um campo de texto e um botão Enviar.

    Verifique se todos os campos de texto que você deseja validar têm um nome exclusivo.

  2. Selecione o botão Enviar.
  3. No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione o comportamento Validar formulário na lista.
  4. Defina as regras de validação para cada campo de texto e clique em OK.

    Por exemplo, você pode especificar que um campo de texto referente à idade de uma pessoa aceite apenas números.

    Observação:

    O comportamento Validar formulário só está disponível caso um campo de texto tenha sido inserido no documento.

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.

  1. Selecione o objeto de formulário em HTML.
  2. No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione um comportamento na lista.

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.

  1. Selecione um botão Enviar em um formulário.
  2. No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione Chamar JavaScript na lista.
  3. Na caixa Chamar JavaScript, digite o nome da função do JavaScript a ser executada quando o usuário clica no botão e clique em OK.

    Por exemplo, você pode digitar o nome de uma função que ainda não existe como, por exemplo, processMyForm().

  4. Caso a função JavaScript ainda não esteja na seção head do documento, adicione-a agora.

    Por exemplo, você pode definir a seguinte função JavaScript na seção head do documento para exibir uma mensagem quando o usuário clica no botão Enviar:

    function processMyForm(){ 
        alert('Thanks for your order!'); 
    }

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

  1. Na primeira vez em que você adicionar objetos de formulário acessíveis, ative a caixa de diálogo Acessibilidade para objetos de formulário (consulte Otimização do espaço de trabalho para desenvolvimento visual).

    Trata-se de uma etapa única.

  2. No documento, coloque o ponto de inserção onde você deseja que o objeto de formulário seja exibido.
  3. Selecione Inserir > Formulário e selecione um objeto de formulário a ser inserido.

    A caixa de diálogo Atributos de acesso a tag input é exibida.

  4. Complete a caixa de diálogo e clique em OK. Veja uma lista parcial de opções:

    Observação:

    O leitor de tela lê o nome que você digita como sendo o atributo Rótulo do objeto.

    ID

    Atribui uma ID ao campo de formulário. Esse valor pode ser usado como referência ao campo do JavaScript; ele também é usado como sendo o valor do atributo for caso você escolha a opção Anexar tag label usando nas opções Estilo.

    Dispor ao redor com tag label

    Envolve o item de formulário com uma tag label da seguinte forma:

    <label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

    Anexar tag label usando

    Usa o atributo for para envolver o item de formulário com uma tag label da seguinte forma:

    <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

    Essa opção faz com que o navegador processe texto associado a uma caixa de seleção e ao botão de opção com um retângulo em foco e permite ao usuário marcar a caixa de seleção e o botão de opção clicando em qualquer lugar do texto associado, e não a caixa de seleção ou o controle do botão de opção.

    Observação: essa é a opção preferencial para acessibilidade; no entanto, a funcionalidade pode variar de acordo com o navegador.

    Nenhuma tag label

    Não usa uma tag label da seguinte forma:

    <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

    Chave de acesso

    Usa um equivalente do teclado (uma letra) e a tecla Alt (Windows) ou a tecla Control (Macintosh) para selecionar o objeto de formulário no navegador. Por exemplo, se você digitasse B como Chave de acesso, os usuários com um navegador Macintosh poderiam digitar Control+B para selecionar o objeto de formulário.

    Índice de guias

    Especifica uma ordem de guias para os objetos de formulário. Caso você defina a ordem de guias para um objeto, você deve definir a ordem para todos os objetos.

    A configuração de uma ordem de guias é útil quando você tem outros links e objetos de formulário na página e precisa que o usuário percorra eles em uma ordem específica.

  5. Clique em Sim para inserir uma tag form.

    O objeto de formulário é exibido no documento.

    Observação:

    Se você pressionar Cancelar, o objeto de formulário aparecerá no documento, mas o Dreamweaver não associará tags ou atributos de acessibilidade a ele.

Editar valores de acessibilidade para um objeto de formulário

  1. Na janela Documento, selecione o objeto.
  2. Siga um destes procedimentos:
    • Edite os atributos apropriados na Visualização de código.

    • Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida, selecione Editar tag.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online