Criar formulários da Web

Última atualização em 27 de abr de 2021

Nota

O suporte para elementos de formulário HTML foi aprimorado nas atualizações do 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 web exibido em um navegador web e clica no botão enviar, as informações são enviadas para um servidor onde um script do lado do servidor ou aplicativo as processa.O servidor responde enviando as informações processadas de volta para\no usuário (ou cliente), ou executando alguma outra ação com base no\nconteúdo do formulário.

Você pode criar formulários que enviam dados para a maioria dos servidores de aplicativos, incluindo PHP, ASP e ColdFusion.Se você usa ColdFusion, também pode\nadicionar controles de formulário específicos do ColdFusion aos formulários.

Nota

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\nsão chamados de objetos de formulário.Objetos de formulário são os mecanismos\nque permitem aos usuários inserir dados.Você pode adicionar os seguintes objetos de formulário\na 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.

Nota

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

Armazenar informações inseridas por um usuário, como nome, endereço de e-mail ou preferência de visualização, e usar esses dados quando o usuário visitar o site novamente.

Botões

Executar ações quando clicado.Você pode adicionar um nome ou rótulo personalizado para um botão, ou usar um dos rótulos predefinidos "Enviar" ou "Redefinir".Use um botão\npara enviar dados do formulário para o servidor ou para redefinir o formulário.Você também pode atribuir outras tarefas de processamento que define em um script.Por exemplo, o botão pode calcular o custo total dos itens\nselecionados 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 exemplo a seguir\nmostra três itens de caixa de seleção selecionados: Surfe, Mountain Bike\ne Rafting.

Botões de opção

Represente opções exclusivas. Selecionar um\nbotão dentro de um grupo de botões de opção desmarca todos os outros no grupo\n(um grupo consiste em dois ou mais botões que compartilham o mesmo nome).\nNo exemplo abaixo, Rafting é a opção atualmente selecionada.Se o usuário clicar em Surfe, o botão Rafting é automaticamente desmarcado.

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.

Nota

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 leva a um documento ou arquivo.

Campos de arquivo

Permite aos usuários procurar um arquivo em seu computador e fazer upload do arquivo 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\ngráficos como botões Enviar ou Redefinir.Usar uma imagem para executar tarefas\nque não sejam enviar dados requer anexar um comportamento ao\nobjeto de formulário.

Criar um formulário em HTML

(Somente usuários do Creative Cloud): Como parte do suporte\nHTML5, novos atributos foram introduzidos no painel Propriedades\npara elementos de formulário.Além disso, quatro novos elementos de formulário (Email,\npesquisa, telefone, URL) foram introduzidos na seção Formulários\ndo painel Inserir.Para obter mais informações, consulte Suporte aprimorado a HTML5 para elementos de formulário.

Abra uma página e posicione o ponto de inserção\nonde deseja que o formulário apareça.

Selecione Inserir > Formulário ou selecione a categoria Formulários no painel Inserir e clique no ícone Formulário.

Na Visualização de design, os formulários são indicados por um contorno vermelho pontilhado. Se não vir este contorno, selecione Exibir > Auxílios visuais > Elementos invisíveis.

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. Os URLs estão limitados 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 garantir que o documento de destino use toda a janela mesmo que o documento original tenha sido exibido em um quadro.

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.

Nota

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 design 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 de 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.

Nota

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.

Ajuste o layout do formulário.

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

Ao projetar formulários, lembre-se de rotular os campos do formulário com texto descritivo para que os usuários saibam a que estão respondendo—por exemplo, "Digite seu nome" para solicitar o nome.

Use tabelas para fornecer estrutura para objetos de formulário e rótulos de campo.Ao usar tabelas em formulários, certifique-se de que todas as tags table estejam 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 um tutorial sobre estilização de formulários com CSS, consulte www.adobe.com/go/vid0161.

Propriedades do objeto de campo de texto

Selecione o objeto de campo de texto, e defina qualquer 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 menor que Max Chars, que especifica o número máximo de caracteres que podem ser inseridos no campo.Por exemplo, se a Largura do caractere estiver definida como 20 (o Valor padrão) e um usuário inserir 100 caracteres, apenas 20 desses caracteres serão visualizáveis no campo de texto.Embora não seja possível visualizar os caracteres no campo, eles são reconhecidos pelo objeto de campo e são enviados ao servidor para processamento.

Nº máx. de caract.

Especifica o número máximo de caracteres que o usuário pode inserir no campo para campos de texto de linha única.Use Caracteres máximos para limitar códigos postais a 5 dígitos, limitar senha a 10 caracteres, e assim por diante.Se você deixar a caixa Caracteres máximos em branco, os usuários poderão inserir qualquer quantidade de texto.Se o texto exceder a largura de caracteres do campo, o texto rolará.Se um usuário exceder 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 Multilinha está selecionada) Define a altura do campo para campos de texto de 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 atributo type definido como text.A configuração Largura do caractere mapeia para o size atributo, e a configuração Caracteres máximos mapeia para o maxlength atributo.

Multilinhas

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

Senha

Resulta em uma input tag com seu type atributo definido como password.As configurações Largura do caractere e Caracteres máximos mapeiam para os mesmos atributos dos campos de texto de linha única.Quando um usuário digita em um campo de texto de senha, a entrada aparece como marcadores ou asteriscos para protegê-la da observação por outros.

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 insere informações no campo incluindo uma observação ou 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, Submit e Reset, indicam ao formulário que deve enviar os dados do formulário para o aplicativo ou script de processamento, ou redefinir todos os campos do formulário para seus 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 do formulário para processamento quando o usuário clica no botão. Os dados são enviados para a página ou script especificado na propriedade Action 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 executada quando o botão é clicado. Por exemplo, você pode adicionar um comportamento 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 ao servidor quando a caixa de seleção está marcada. Por exemplo, em uma pesquisa você pode definir um valor de 4 para concordo totalmente e um valor de 1 para discordo totalmente.

Estado inicial

Determina se a caixa de seleção está selecionada quando o formulário carrega no navegador.

Dinâmico

Permite que o servidor determine dinamicamente o estado inicial da caixa de seleção. Por exemplo, você pode usar caixas de seleção para apresentar visualmente as informações Sim/Não armazenadas em um registro de banco de dados. No tempo de design você não conhece essa informação. No tempo de execução o servidor lê o registro do banco de dados e seleciona a caixa de seleção se o valor for Sim.

Classe

Aplica regras de Folhas de Estilo em Cascata (CSS) ao objeto.

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

Valor marcado

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

Estado inicial

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

Dinâmico

Permite que o servidor determine dinamicamente o estado inicial do botão de opção. Por exemplo, você pode usar botões de opção para apresentar visualmente informações armazenadas em um registro de banco de dados. Na fase de design, você não conhece essa informação.No tempo de execução o servidor lê o registro do banco de dados e marca o botão de opção se o valor corresponder a um que você especificou.

Classe

Aplica regras de CSS ao objeto.

Opções de menu

Lista/menu

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

Tipo

Indica se o menu é suspenso quando clicado (a opção Menu) ou exibe uma lista rolável de itens (a opção Lista). Selecione a opção Menu se quiser que apenas uma opção seja visível quando o formulário for exibido em um navegador. Para exibir as outras opções, o usuário deve clicar na seta para baixo.

Selecione a opção Lista para listar algumas ou todas as opções quando o formulário for exibido em um navegador, para permitir que os usuários selecionem vários itens.

Altura

(Somente tipo Lista) Define o número de itens exibidos no menu.

Seleções

(Somente tipo Lista) Indica se o usuário pode selecionar vários itens da lista.

Listar valores

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

Use os botões Mais (+) e Menos (–) para adicionar e remover itens na lista.
Digite o texto do rótulo e um valor opcional para cada item de menu.
Cada item na lista tem um rótulo (o texto que aparece na lista) e um valor (o valor que é enviado ao aplicativo de processamento se o item for selecionado).Se nenhum Valor for especificado, o rótulo é enviado ao aplicativo de processamento.
Use os botões de seta para cima e para baixo para reorganizar itens na lista.
Os itens aparecem no menu na mesma ordem em que aparecem na caixa de diálogo Valores da Lista. O primeiro item da lista é o item selecionado quando a página é carregada em um navegador.

Dinâmico

Permite que o servidor selecione 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 item ou itens na lista.

Inserir campos de carregamento de arquivo

Você pode criar um campo de upload de arquivo que permite aos usuários selecionar um arquivo em seu computador—como um documento de processamento de texto ou arquivo gráfico—e fazer upload do arquivo para o servidor.Um campo de arquivo se parece com outros campos de texto, exceto que também contém um botão Procurar. O usuário insere manualmente o caminho para o arquivo que deseja fazer upload ou usa o botão Procurar para localizar e selecionar o arquivo.

Antes de poder usar campos de upload de arquivo, você deve ter um script do lado 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ê usa PHP, consulte "Handling files uploads" no Manual PHP online em http://us2.php.net/features.file-upload.php.

Campos de arquivo exigem que você use o método POST para transmitir arquivos do navegador para o servidor. O arquivo é enviado para o endereço que você especifica na caixa Ação do formulário.

Nota

Entre em contato com o administrador do servidor para confirmar que uploads anônimos de arquivo são permitidos antes de usar o campo de arquivo.

Insira um formulário na página (Inserir > Formulário).

Selecione o formulário para exibir o Inspetor de propriedades.

Defina o Método do formulário como POST.

No menu pop-up Tipo de codif., selecione multipart/form-data.

Na caixa Ação, especifique o script do lado do servidor ou página capaz de lidar com o arquivo enviado.

Coloque o ponto de inserção dentro do contorno do formulário e selecione Inserir > Formulário > Campo de arquivo.

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 aceitará. Se o usuário navegar para localizar o arquivo, o nome do arquivo e o caminho podem exceder o Valor máximo de caracteres especificado. Contudo, se o usuário tentar digitar o nome do arquivo e o caminho, o campo de arquivo permitirá apenas o número de caracteres especificados pelo Valor máximo de caracteres.

Inserir um botão de imagem

Você também pode usar imagens como ícones de botão. Usar uma imagem para executar outras tarefas além de enviar dados requer anexar um comportamento ao objeto de formulário.

No documento, posicione o ponto de inserção dentro do contorno do formulário.

Selecione Inserir > Formulário > Campo de imagem.

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

Selecione a imagem para o botão na caixa de diálogo Selecionar Image Source , e clique em OK.

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, instruem o formulário a enviar os dados do formulário para o aplicativo de processamento ou script, ou a redefinir todos os campos do formulário para seus valores originais, respectivamente.

Origem

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

Alt

Permite inserir texto descritivo caso a imagem não consiga carregar no navegador.

Alinhar

Define o atributo align do objeto.

Editar imagem

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

Classe

Permite que você aplique regras de CSS ao objeto.

Para anexar um comportamento JavaScript ao botão, selecione a imagem e escolha 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 é enviado para o servidor quando o formulário é submetido.

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

Posicione o ponto de inserção dentro do contorno do formulário.

Selecione Inserir > Formulário > Grupo de botões de opção.

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 disponha os 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

Posicione o ponto de inserção dentro do contorno do formulário.

Selecione Inserir > Formulário > Grupo de caixas de seleção.

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 do servidor, e não pelo designer do formulário no momento do design.Por exemplo, quando um usuário solicita uma página PHP que contém um formulário com um menu, um script PHP na página automaticamente preenche o menu com valores armazenados em um banco de dados.O servidor então envia a página concluída para o navegador do usuário.

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

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

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

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

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.

Siga um destes procedimentos:

Selecione o objeto de formulário Lista/menu HTML novo ou 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.

Preencha 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

Na exibição Design, selecione o objeto de formulário lista/menu.

No Inspetor de propriedades, clique no botão Dinâmico.

Preencha a caixa de diálogo e clique em OK.

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

É possível 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 ColdFusion, PHP ou ASP e deve definir um conjunto de registros ou outra origem de conteúdo dinâmico para o campo de texto.

Selecione o campo de texto no formulário HTML na página.

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.

Selecione a coluna do conjunto de registros que fornecerá um valor ao campo de texto e clique em OK.

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

Selecione o campo de texto para tornar dinâmico no menu pop-up Campo de Texto.

Clique no ícone de raio ao lado da caixa Definir valor como, selecione uma fonte de dados da lista de fontes de dados e clique em OK.

A fonte de dados deve conter informações textuais. Se nenhuma fonte de dados aparecer na lista ou se as fontes de dados disponíveis não atenderem às suas necessidades, clique no botão Mais (+) para definir uma nova fonte de dados.

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

É possível permitir que o servidor decida se uma caixa de seleção deve ser marcada quando o formulário é exibido em um navegador.

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

Escolha um objeto de formulário de caixa de seleção na página.

No Inspetor de propriedades, clique no botão Dinâmico.

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

Nota

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

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

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

Antes de começar, você deve criar o formulário em uma página ColdFusion, PHP ou ASP e inserir pelo menos um grupo de botões de opção 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 do conteúdo contenha dados booleanos, como Sim/Não ou verdadeiro/falso.

Na visualização de Design, selecione um botão de opção no grupo de botões de opção.

No Inspetor de propriedades, clique no botão Dinâmico.

Preencha 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

No menu pop-up Grupo de botões de opção, selecione um formulário e 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.

Selecione um valor para pré-selecionar dinamicamente da lista de valores. Esse valor é exibido na caixa Valor.

Clique no ícone de raio ao lado da caixa Selecionar Valor Igual A e selecione um conjunto de registros que contenha possíveis valores marcados para os botões de opção no grupo.

O conjunto de registros selecionado contém valores que combinam com os valores marcados dos botões de opção. Para visualizar os valores marcados dos botões de opção, selecione cada botão de opção e abra seu inspetor de propriedades (Janela > Propriedades).

Clique em OK.

Definir as opções da caixa de diálogo Grupo de Botões de Opção Dinâmicos (ColdFusion)

Selecione um grupo de botões de opção e formulário no menu pop-up Grupo de Botões de Opção.

Clique no ícone de raio ao lado da caixa Selecionar Valor Igual a.

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.

Clique em OK para fechar a caixa de diálogo Grupo de Botões de Opção Dinâmicos e inserir o espaço reservado 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 de campos de texto especificados para garantir que o usuário inseriu o tipo correto de dados.

Você pode usar widgets de formulário Spry para criar formulários e validar o conteúdo de elementos de formulário especificados. Para obter mais informações, consulte os tópicos 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 o capítulo ColdFusion listado abaixo.

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

Certifique-se de que cada campo de texto que você deseja validar tenha um nome exclusivo.

Selecione o botão Enviar.

No painel Comportamentos (Janela > Comportamentos), clique no botão Mais (+) e selecione o comportamento Validar Formulário da lista.

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 para a idade de uma pessoa aceite apenas números.

Nota

O comportamento Validar Formulário está disponível apenas se um campo de texto foi inserido no documento.

Anexar comportamentos JavaScript a objetos de formulário HTML

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

Selecione o objeto de formulário em HTML.

No painel Comportamentos (Janela > Comportamentos), clique no botão Mais (+) e selecione um comportamento da lista.

Anexar Scripts personalizados a botões de formulário HTML

Alguns formulários usam JavaScript ou VBScript para executar processamento de formulário ou alguma outra ação no cliente em oposição ao envio dos dados do formulário para o servidor para processamento. Você pode usar o Dreamweaver para configurar um botão de formulário para executar um Script específico do lado do cliente quando o usuário clicar no botão.

Selecione um botão Enviar em um formulário.

No painel Comportamentos (Janela > Comportamentos), clique no botão Adicionar (+) e selecione Chamar JavaScript da lista.

Na caixa Chamar JavaScript, digite o nome da função JavaScript a ser executada quando o usuário clicar no botão e clique em OK.

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

Se a função JavaScript ainda não existir 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 clicar no botão Enviar:

function processMyForm(){

alert('Obrigado pelo seu pedido!');

}

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

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

Adicionar um objeto de formulário acessível

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

Trata-se de uma etapa única.

No documento, posicione o ponto de inserção onde deseja que o objeto de formulário apareça.

Selecione Inserir > Formulário e selecione um objeto de formulário para inserir.

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

Preencha a caixa de diálogo e clique em OK. Esta é uma lista parcial de opções:

Nota

O leitor de tela lê o nome inserido como atributo Rótulo para o objeto.

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:

<rótulo> <input type="radio" name="radiobutton" Valor="radiobutton"> BotãoRádio1</rótulo>

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" Valor="radiobutton" id="radiobutton"> <rótulo for="radiobutton">BotãoRádio2</rótulo>

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: esta é a opção preferida para acessibilidade; no entanto, a funcionalidade pode variar dependendo do 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 de teclado (uma letra) e a tecla Alt (Windows) ou a tecla Control (Macintosh) para selecionar o objeto do formulário no navegador. Por exemplo, se você inserir B como a chave de acesso, usuários com navegador Macintosh poderão digitar Control+B para selecionar o objeto do formulário.

Índice de guias

Especifica uma ordem de guias para os objetos de formulário. Se você definir ordem de tabulação para um objeto, deve definir a ordem de tabulação para todos os objetos.

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

Clique em Sim para inserir uma tag form.

O objeto de formulário é exibido no documento.

Nota

Se você pressionar Cancelar, o objeto do formulário aparece no documento, mas o Dreamweaver não associa tags ou atributos de acessibilidade com ele.

editar valores de acessibilidade para um objeto de formulário

Na janela Documento, selecione o objeto.

Siga um destes procedimentos:

editar os atributos apropriados na visualização Código.
Clique com o botão direito (Windows) ou clique com a tecla Control pressionada (Macintosh) e selecione Editar Tag.

Veja também

Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.

Abra o aplicativo

Criar e ativar formulários do ColdFusion no Dreamweaver

Suporte aprimorado a HTML5 para elementos de formulário

Saiba mais

Aprenda com tutoriais em vídeo passo a passo e orientações práticas diretamente no aplicativo.

Comunidade

Participe de discussões, encontre respostas, aprenda com especialistas e compartilhe seus conhecimentos.

Página inicial da Adobe

Acesse seus aplicativos, serviços, gerenciamento de arquivos favoritos da Creative Cloud e muito mais.