O
Dreamweaver disponibiliza vários recursos para a criação
de formulários. O Site Bioderm terá uma página
de atendimento ao consumidor, onde será disponibilizado um
formulário cuja função será obter dados
do consumidor e enviá-los por e-mail à área
de atendimento da empresa.
Criaremos
agora a página atendimento.html, também
a partir do modelo.
Na
barra de menus escolha Arquivo > Novo,
escolha a guia Modelos, serão exibidos
os sites e modelos existentes, escolha o site Bioderm
e o modelo bioderm_modelo.
Mantenha a opção atualizar a página quando
o modelo for alterado, dessa forma, ao atualizar o modelo, todos
os documentos serão atualizados.
Salve
o documento com o nome de atendimento.html, na
pasta atendimento.
Posicione
o cursor na segunda linha da tabela e crie uma nova tabela dentro
dessa linha: Painel Inserir Comuns > Inserir
tabela, ou barra de menus Inserir >
Tabela. A nova tabela terá as seguintes
propriedades: 1 linha, 2 colunas, largura de 760 pixels, preenchimento
da célula = 0, espaçamento entre as células
= 0 e borda = 0. Defina a largura de cada coluna da tabela, selecione
a primeira coluna e no campo L do Inspetor de
propriedades digite 130, agora selecione a segunda coluna da tabela
e no campo L do Inspetor de propriedades digite
630.
Na
primeira coluna da tabela insira uma cor de fundo, posicione o
cursor nessa coluna, e na opção Fundo
do Inspetor de propriedades escolha a cor cinza claro (#CCCCCC).
Na
segunda coluna da tabela insira uma outra tabela de 1 linha/1
coluna e largura de 580 pixels, centralize essa tabela. Dentro
dessa tabela, insira o formulário, como veremos a seguir.
Formulário
1)
No corpo da página, dentro da tabela, digite o título
"Atendimento ao Consumidor" em negrito
2) Pule 1 linha e digite "Contato" em negrito e em seguida
os dados da empresa (e-mail, telefone, fax)
3) Em seguida digite: "Se você tem alguma dúvida
ou sugestão sobre os nossos produtos, preencha o formulário
abaixo:"
4) Na barra Inserir, selecione o ítem Formulário
5) Selecione a primeira opçãoFormulário,
para que ele crie a tag form (como se fosse a moldura do formulário)
6) Dentro da tag form, pule 1 linha e digite "Nome:"
Na frente do nome crie um campo de formulário, será
um campo texto:
crie um campo texto clicando na 2ª opção Campo
de texto
Selecione esse campo e no Inspetor de Propriedades preencha as propriedades
do campo:
Campo de texto (nome do campo): nome
Larg. do caractere (tamanho da moldura do campo): 50
No máx. de caract. (número máximo de caracteres
que poderão ser digitados): 50
Tipo (tipo de linha): Linha simples
Valor inicial: deixar em branco
7) pule 1 linha e digite "E-mail:"
Na frente do e-mail crie um campo de formulário, será
um campo texto:
crie um campo texto clicando na 2ª opção Text
Field
Selecione esse campo e no Inspetor de Propriedades preencha as propriedades:
Campo de texto (nome do campo): email
Larg. do caractere (tamanho da moldura do campo): 40
No máx. de caract. (número máximo de caracteres
que poderão ser digitados): 40
Tipo (tipo de campo): Linha simples
Valor inicial: deixar em branco
8) pule 1 linha e digite "Faixa Etária:"
pule 1 linha e clique na 5ª opção Botão
de rádio, em seguida digite "até 20
anos"
pule 1 linha e clique na 5ª opção Botão
de rádio, em seguida digite "de 20 a 40 anos"
pule 1 linha e clique na 5ª opção Botão
de rádio, em seguida digite "acima de 40 anos"
Faixa Etária:
até 20 anos
de 20 a 40 anos
acima de 40 anos
No Inspetor de propriedades, selecione o primeiro Botão de
rádio e configure suas propriedades:
Botão de opção (nome da variável): faixa-etaria
Valor selecionado (valor da variável): 20
Estado inicial (estado inicial do campo: selecionado ou não):
Selecionado
selecione o segundo Botão de rádio e configure suas
propriedades:
Botão de opção (nome da variável): faixa-etaria
Valor selecionado (valor da variável): 20-40
Estado inicial (estado inicial do campo: selecionado ou não):
Não selecionado
selecione o terceiro Botão de rádio e configure suas
propriedades:
Botão de opção (nome da variável): faixa-etaria
Valor selecionado (valor da variável): 40
Estado inicial (estado inicial do campo: selecionado ou não):
Não selecionado
9) pule 1 linha e digite "Sexo:"
crie um campo texto clicando na 8ª opção Menu
de Lista
Sexo:
Selecione esse campo e no Inspetor de Propriedades preencha as propriedades:
Lista/Menu (nome do campo): sexo
Type (tipo de lista, as opções tem a mesma função,
só muda a forma de exibição)
Valores da lista: adicione os valores "masculino" e "feminino"
(para adicionar um novo valor, clique no sinal +).
Clique em OK.
10) pule 1 linha e digite "Dúvidas ou sugestões:"
crie um campo texto clicando na 4ª opção Área
de texto
Selecione esse campo e no Inspetor de Propriedades preencha as propriedades:
Campo de texto (nome do campo): sugestoes
Larg. do caractere (tamanho da moldura do campo): 50
No máx. de caract. (número de linhas do campo): 5
Type (tipo de campo): Multi-linha
Valor inicial: deixar em branco
11) pule 1 linha e crie um botão clicando na opção
12ª opção Botão
Selecione esse campo e no Inspetor de Propriedades preencha as propriedades:
Botão (nome do botão): Submit
Label
(texto que será exibido no botão): "Enviar"
Action (ação): Enviar formulário
Obs.: a acão redefinir formulário serve para
limpar os campos do formulário.
12) Edite o código HTML e no action da tag
form coloque o e-mail para onde serão encaminhados os dados
(mailto:........).
O formulário
será exibido dessa forma:
Nome:
E-mail:
Faixa
Etária:
até
20 anos
de 20
a 40 anos
acima
de 40 anos
