Assine:
Formulários
Formulários
Escrito por Lucasbr em HTML e Editores Visuais. Data: 25/11/2006
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Formulário pode ser sinônimo de Interação em sites Web. Eles são úteis para pesquisas, comércio eletrônico , livro de visitas , etc.. Todos precisam de uma conexão com o Servidor Web, conexão essa , geralmente por meio de um script CGI. Os formulários começam e terminam com as tags <form></form> . Seus principais atributos:
name - nome do formulário.
method - informa ao navegador e ao servidor web como processar o formulário. Valores: GET e POST. O método GET passa as informações anexadas com um URL (pouco utilizado, pois impõem limites aos dados transmitidos 8192 caracteres) e o método POST permite ao programa de aplicação receber informações sem impor limite sobre os dados transmitidos.
action - indica o aplicativo que processará o formulário. Geralmente é configurado como um URL para executar uma aplicação Web específica ou enviar email.
exemplo de código html:
<form method="post" action="http://www.site.com/cgi_bin/script.pl">
Inserindo um Formulário no DW
Coloque o cursor aonde deseja que o formulário inicie e, ou selecione o botão Form na Barra Insert > Form ou escolha Menu Insert > Form > Form . O DW insere um contorno tracejado vermelho estendendo-se ao logo de sua área de trabalho indicando um formulário.
figura 01
figura 02
Campos de Texto (Text Field & Text Area)
figura 03
figura 04
figura 05
figura 06
figura 07
Inserindo um Menu Drop-Down - Barra insert > Categoria Forms > selecione o botão "List/Menu" (08) , Menu Insert > Form > List/Menu ou arraste o botão da barra Insert para um local na janela de Documentos.
figura 08
figura 09
figura 10
Para inserir selecione os campos do Formulário e Barra Insert > Categoria Form > Fieldset (14) ou Menu Insert > Form > Fieldset. Na caixa "Fieldset" em "Label" insira um texto para seu formulário , no exemplo, "EXEMPLO FORMULÀRIO".
name - nome do formulário.
method - informa ao navegador e ao servidor web como processar o formulário. Valores: GET e POST. O método GET passa as informações anexadas com um URL (pouco utilizado, pois impõem limites aos dados transmitidos 8192 caracteres) e o método POST permite ao programa de aplicação receber informações sem impor limite sobre os dados transmitidos.
action - indica o aplicativo que processará o formulário. Geralmente é configurado como um URL para executar uma aplicação Web específica ou enviar email.
exemplo de código html:
<form method="post" action="http://www.site.com/cgi_bin/script.pl">
Inserindo um Formulário no DW
Coloque o cursor aonde deseja que o formulário inicie e, ou selecione o botão Form na Barra Insert > Form ou escolha Menu Insert > Form > Form . O DW insere um contorno tracejado vermelho estendendo-se ao logo de sua área de trabalho indicando um formulário.
figura 01
Note em Properties que você pode nomear seu formulário em "Form Name" , definir o "Action" e o "Method". Em "Action" você pode inserir o URL , o endereço mailto ou navegar para um arquivo. "Enctype" - esse valor informa ao Servidor em qual formatos os dados são enviados (detalhado mais adiante) e no campo "Target" é informado ao Servidor qual quadro ou janela deve ser utilizado ao exibir uma resposta ao formulário.
Tipos de Campos de Formulários
Tipos de Campos de Formulários
figura 02
Campos de Texto (Text Field & Text Area)
Utilizado para coletar informações de texto. Esses campos podem armazenar qualquer número de caracteres alfanuméricos e de pontuação. Inserindo: Barra Insert > Category Form > Text Field , Menu Insert > Form > Text Field ou arraste o botão Text Field (2) para o local em sua área de trabalho que quer inserir o Campo.
figura 03
Na Barra Properties configuramos os atributos de nosso campo:
Textfield - nome | Char width - comprimento do campo em pixels | Max Chars - n° máximo de caracteres que podem ser inseridos no campo | Init Value - string de texto padrão (pode deixar em branco) | Type Single line - texto digitado somente em uma linha | Multi line - área de texto com várias linhas | Password - determina que todo o texto digitado pelo usuário aparecerá como asteriscos (*****) na tela. (campo de senha) | Class - se quiser aplicar algum estilo CSS.
Textfield - nome | Char width - comprimento do campo em pixels | Max Chars - n° máximo de caracteres que podem ser inseridos no campo | Init Value - string de texto padrão (pode deixar em branco) | Type Single line - texto digitado somente em uma linha | Multi line - área de texto com várias linhas | Password - determina que todo o texto digitado pelo usuário aparecerá como asteriscos (*****) na tela. (campo de senha) | Class - se quiser aplicar algum estilo CSS.
Note que se você optar por "Multi-Line" o Painel Properties ficará assim:
figura 04
em "TextField" insira um nome para seu campo , em "Char width" determine a largura de seu campo , em "Num Lines" determine o número de linhas de sua caixa e em "Wrap" você determina como o texto inserido nesse campo deve se comportar. Opções:
Default - caracteristicas de rolagem do campo determinadas pelo navegador ;
Off - o texto inserido não muda para outra linha até o usuário teclar ENTER ;
Virtual - faz com que o texto quebre a linha quando alcança a borda direita da área de texto ;
Physical - converte as quebras de linhas condicionais para quebras de linhas incondicionais quando os dados são enviados para o Servidor.
Default - caracteristicas de rolagem do campo determinadas pelo navegador ;
Off - o texto inserido não muda para outra linha até o usuário teclar ENTER ;
Virtual - faz com que o texto quebre a linha quando alcança a borda direita da área de texto ;
Physical - converte as quebras de linhas condicionais para quebras de linhas incondicionais quando os dados são enviados para o Servidor.
Você pode optar também por inserir sua caixa de texto pelo botão Text Area (4) ou Menu Insert > Form > Text Area.
Caixas de Seleção e Botões de Opção (Check Box , Radio Button e Radio Group)
Permite ao usuário escolher uma opção. Com as Caixas de Seleção ele pode escolher mais de uma opção , já com os Botões de Opção ele somente pode escolher uma.
Caixas de Seleção
Como mencionado acima , o usuário pode escolher diversas opções. Para inserir, ou clique ou arraste em Barra Insert > Category Form > Check Box (5) , Menu Insert > Form > Check Box ou arraste o botão Check Box (5) para o local em sua área de trabalho que quer inserir o Campo
Como mencionado acima , o usuário pode escolher diversas opções. Para inserir, ou clique ou arraste em Barra Insert > Category Form > Check Box (5) , Menu Insert > Form > Check Box ou arraste o botão Check Box (5) para o local em sua área de trabalho que quer inserir o Campo
figura 05
Em Properties você determina um nome para seu campo "CheckBox name" , um valor "Checked value" (informações que serão passadas para você, no exemplo acima , indicará que o usuário marcou a opção 2) , seu estado inicial "Checked" ou "Unchecked" marcado ou desmarcado e por fim , uma classe CSS "Class".
Botões de Seleção
Nesse tipo de campo de formulário, você só pode optar por uma seleção. Se o usuário escolher outra opção , o outro anteriormente selecionadoé desmarcado. Para inserir um Botão de seleção , você pode ir na barra Insert > Category Form > Radio Button (6) , Menu Insert > Form > Radio Button ou arraste o botão Radio Button (6) para o local em sua área de trabalho que quer inserir o Botão.
Nesse tipo de campo de formulário, você só pode optar por uma seleção. Se o usuário escolher outra opção , o outro anteriormente selecionadoé desmarcado. Para inserir um Botão de seleção , você pode ir na barra Insert > Category Form > Radio Button (6) , Menu Insert > Form > Radio Button ou arraste o botão Radio Button (6) para o local em sua área de trabalho que quer inserir o Botão.
figura 06
Em Properties , fazemos as mesmas configurações descritas em "Caixas de Seleção". Uma diferença entre os dois campos é o fato de que nos Botões de Seleção , cada grupo de botões tem um nome único. para entender melhor olhemos o código HTML gerado do exemplo acima:
<input type="checkbox" name="checkbox" value="checkbox">
<input type="checkbox" name="checkbox2" value="checkbox">
<input name="radiobutton" type="radio" value="radiobutton">
<input name="radiobutton" type="radio" value="radiobutton">
<input type="checkbox" name="checkbox2" value="checkbox">
<input name="radiobutton" type="radio" value="radiobutton">
<input name="radiobutton" type="radio" value="radiobutton">
Note que nas duas primeiras linhas (Caixas de Seleção) os valores do atributo name foram diferentes , já nas duas últimas linhas (Botão de Seleção) , os valores dos atributos name , não foram alterados.
Uma maneira bem prática de se criar um conjunto inteiro de Botões de seleção de uma só vez , é ir na Barra Insert > Category Form > Radio Group (7)
figura 07
Na caixa Radio Group (dois botões como exemplo) você determina em "Name:" um nome para seu conjunto de botões (name="radiobutton") , clique em Radio na coluna Label e substitua pelo rótulo do primeiro botão que esta criando. Pressione Tab e substitua a palavra Radio pelo valor de seu botão. Repita esse procedimento para seu segundo botão.
Se quiser adicionar mais botões , clique em Add (+) , para remover clique em (-) e para alterar a ordem de exibição , clique nas setas "para cima" e "para baixo".
Em "Lay out using:" você determina se seus botões serão inseridos em linhas separadas <br> ou automaticamente formatados em uma tabela "Table".
Se quiser adicionar mais botões , clique em Add (+) , para remover clique em (-) e para alterar a ordem de exibição , clique nas setas "para cima" e "para baixo".
Em "Lay out using:" você determina se seus botões serão inseridos em linhas separadas <br> ou automaticamente formatados em uma tabela "Table".
Listas e Menus de Formulário (List Menu & Jump Menu)
Excelentes maneiras de compactar as opções para o usuário, o List Menu e o Menu de Salto (Jump Menu). Eles criam entradas em uma única linha no formulário que se expandem ou rolam revelando todas as opções disponíveis.
Menu Drop-Drow (List Menu)
é exibido como uma caixa de texto de uma única linha com um botão de seta na extremidade direita, quando esse botão é clicado, as outras opções são reveladas em uma lista ou menu. Depois que o usuário seleciona uma das opções listadas e o mouse é liberado, a lista se fecha e o valor selecionado permanece exibido na caixa de texto.
é exibido como uma caixa de texto de uma única linha com um botão de seta na extremidade direita, quando esse botão é clicado, as outras opções são reveladas em uma lista ou menu. Depois que o usuário seleciona uma das opções listadas e o mouse é liberado, a lista se fecha e o valor selecionado permanece exibido na caixa de texto.
Inserindo um Menu Drop-Down - Barra insert > Categoria Forms > selecione o botão "List/Menu" (08) , Menu Insert > Form > List/Menu ou arraste o botão da barra Insert para um local na janela de Documentos.
figura 08
No Painel Properties você pode configurar seu Menu: Em List/Menu , insira um nome , em "Type" escolha Menu ou List. Em "Ininially selected" temos os itens inseridos. Para inserir opções ao seu Menu clique em "List Values".
figura 09
Item Label = é o que é exibido na lista drop-down | Value = enviado para o processador do lado do servidor quando a opção é selecionada.
Para você inserir seu Menu Drop-Down no formato de uma lista de rolagem ao invéz do formato de Menu , no painel Properties escolha Type List. Existem três diferenças desse tipo de Menu:
1. o campo de lista de rolagem tem botões de seta para cima e para baixo ;
2. você pode controlar a altura da lista de rolagem ;
3. os usuários podem selecionar mais de um item .
Selecione a opção "Type = List". e também pela Caixa "List Values" insira as opções de seu Menu. Ao selecionar List , as opções "Height" e "Selections Allow multiple" estarão disponíveis em Properties. Se você marcar "Selections Allow multiple" permitirá ao usuário selecionar mais de um item em sua Lista. (o usuário deve selecionar um item , manter Shifth ou Ctrl pressionado e selecionar o próximo) . Em "Height" você determina a altura de sua caixa.
1. o campo de lista de rolagem tem botões de seta para cima e para baixo ;
2. você pode controlar a altura da lista de rolagem ;
3. os usuários podem selecionar mais de um item .
Selecione a opção "Type = List". e também pela Caixa "List Values" insira as opções de seu Menu. Ao selecionar List , as opções "Height" e "Selections Allow multiple" estarão disponíveis em Properties. Se você marcar "Selections Allow multiple" permitirá ao usuário selecionar mais de um item em sua Lista. (o usuário deve selecionar um item , manter Shifth ou Ctrl pressionado e selecionar o próximo) . Em "Height" você determina a altura de sua caixa.
Botões
Eles são essenciais para formulários HTML. Ativam o envio dos dados do formulário do cliente ao servidor. Existem três tipos de botões: Submit | Reset | Command
Botão Submit = envia o formulário á ação especificada (o URL de um programa do lado do Servidor ou um endereço mailto) geralmente pelo método POST.
Botão Reset = limpa todos os campos do formulário
Botão Command = executa funções definidas por você como um JavaScript por exemplo.
Inserindo um botão em seu formulário:
Posicione o cursor em seu formulário aonde quer inserir o botão e Barra Insert > Categoria Form > Button , Menu Insert > Form > Button ou arraste o ícone Button da Barra Insert para o local.
Botão Submit = envia o formulário á ação especificada (o URL de um programa do lado do Servidor ou um endereço mailto) geralmente pelo método POST.
Botão Reset = limpa todos os campos do formulário
Botão Command = executa funções definidas por você como um JavaScript por exemplo.
Inserindo um botão em seu formulário:
Posicione o cursor em seu formulário aonde quer inserir o botão e Barra Insert > Categoria Form > Button , Menu Insert > Form > Button ou arraste o ícone Button da Barra Insert para o local.
figura 10
No Painel Properties você determina: em "Button name" um nome para seu botão , em "Label" o texto do botão , em "Action" o tipo de botão (None = Command) e em "Class" uma classe CSS.
Quando trabalhamos com botões Command , precisamos definir uma função especifica diretamente no código. Exemplo:
Quando trabalhamos com botões Command , precisamos definir uma função especifica diretamente no código. Exemplo:
<input type="button" name="btjava" value="yes" onClick="doFunction()">
Podemos também inserir Botões Gráficos , no local dos padrões do DW. Para tal , posicione o cursor em seu formulário aonde quer inserir o botão gráfico e Barra Insert > Categoria Form > Image Field (10) , Menu Insert > Form > Image Field ou arraste o ícone Image Field da Barra Insert para o local.
Inserindo um Campo Oculto e um Campo de Arquivo
Inserindo um Campo Oculto e um Campo de Arquivo
Campo Oculto serve para passar variáveis para os seus programas de aplicações e o Campo de Arquivo permite aos usuários anexarem um arquivo ao formulário que esta sendo enviado.
Quando você passar dados ao seu programa CGI , esses dados não devem ser mostrados aos usuários. Para enviar essas informações você usa o Campo Oculto. Ele é inserido no formulário da mesma maneira:
Posicione o cursor em seu formulário aonde quer inserir o Campo Oculto e Barra Insert > Categoria Form > Hidden Field (3), Menu Insert > Form > Hidden Field ou arraste o ícone Hidden Field da Barra Insert para o local.
Vá no painel Properties e insira seu valor em "Values".
Um Campo de Arquivo também é inserido em seu formulário da mesma maneira: Posicione o cursor em seu formulário aonde quer inserir o Campo de Arquivo e Barra Insert > Categoria Form > File Field (13), Menu Insert > Form > File Field ou arraste o ícone File Field da Barra Insert para o local.
Quando você passar dados ao seu programa CGI , esses dados não devem ser mostrados aos usuários. Para enviar essas informações você usa o Campo Oculto. Ele é inserido no formulário da mesma maneira:
Posicione o cursor em seu formulário aonde quer inserir o Campo Oculto e Barra Insert > Categoria Form > Hidden Field (3), Menu Insert > Form > Hidden Field ou arraste o ícone Hidden Field da Barra Insert para o local.
Vá no painel Properties e insira seu valor em "Values".
Um Campo de Arquivo também é inserido em seu formulário da mesma maneira: Posicione o cursor em seu formulário aonde quer inserir o Campo de Arquivo e Barra Insert > Categoria Form > File Field (13), Menu Insert > Form > File Field ou arraste o ícone File Field da Barra Insert para o local.
Após selecionado o arquivo , ao clicar em enviar o arquivo irá com o formulário.
Agrupando controles de formulário
Você pode agrupar campos de seu formulário facilmente com uma borda fina em torno deles , com as tags <fieldset> e </fieldset>.
Para inserir selecione os campos do Formulário e Barra Insert > Categoria Form > Fieldset (14) ou Menu Insert > Form > Fieldset. Na caixa "Fieldset" em "Label" insira um texto para seu formulário , no exemplo, "EXEMPLO FORMULÀRIO".
Mais recentes em HTML e Editores Visuais
- Remover quebras de linha de um código-fonte
- Por Manito - Juntar todo código em uma linha!...
- O que são tags?
- Por Raphael Leão - O que são tags? - tags são os comandos do html. um...
- Guia prático de html 2007 (atualizado e revisado)
- Por Tiago Souza - Aborda html, xhtml, css, padrões web, web standards, dicas, etc...
- Tabela de acentos e caracteres especiais
- Por marcinha - Entities e ascii em html...
- Elementos e atributos html em desuso segundo w3c
- Por luishenrique - <style type="text/css"> - table.elementos,...
Ver mais Artigos de HTML e Editores Visuais.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com
Comentários:
Joliv23 disse:
As imagens desse Tutorial não estão carregando.
Salvei o texto para acompanhar offline, e pensei em salvar as imagens, embora possa me virar
sem elas. Mas se elas voltarem a ficar disponíveis, ajuda, creio.
Preciso alterar um FORM, mas é a coisa mais chata que acho de fazer. Seguir seu tutorial sei que vai
ajudar, até porque sou principiante de tudo no DW. Uso um trco chamado Yahoo SiteBuilder, um editor
RTML, mais osso duro de roer que qualquer osso.
Abraço,
Jorge
Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).