Skip to content

Guia sobre como adicionar um formulário com KompoZer

20 de abril de 2021

O que saber

  • Clique Forma, insira um nome, insira um URL, selecione um método e clique em OK.
  • Para adicionar texto, escolha Campo do Formulário > Texto, digite um nome e clique OK.

Este artigo explica como adicionar formulários com as ferramentas integradas do KompoZer que funcionam com os botões de texto, área de texto, enviar e redefinir.

Criar um novo formulário

KompoZer possui ferramentas ricas de formulários que você pode usar para adicionar formulários às suas páginas da web. Você acessa as ferramentas de formulário clicando em Botão de formulário ou o menu suspenso que o acompanha na barra de ferramentas. Se você não escrever seus próprios scripts de manipulação de formulários, precisará obter algumas informações para esta etapa da documentação ou do programador que escreveu o script. Você também pode usar formulários mailto, mas eles nem sempre funcionam.

  1. Posicione o cursor no local em que deseja que o formulário apareça na página.
  2. Clique no Forma botão na barra de ferramentas. A caixa de diálogo Propriedades do formulário é aberta.
  3. Adicione um nome para o formulário. O nome é usado no código HTML gerado automaticamente para identificar o formulário e é obrigatório. Você também precisa salvar sua página antes de adicionar um formulário. Se você estiver trabalhando com uma página nova não salva, o KompoZer solicitará que você salve.
  4. Adicione a URL ao script que processará os dados do formulário no campo URL de ação. Manipuladores de formulários são geralmente scripts escritos em PHP ou linguagem semelhante do lado do servidor. Sem essas informações, sua página da web não poderá fazer nada com os dados inseridos pelo usuário. KompoZer solicitará que você insira o URL para o manipulador de formulários, se você não inseri-lo.
  5. Selecione os Método usado para enviar os dados do formulário ao servidor. As duas opções são GET e POST. Você precisará saber qual método o script requer.
  6. Clique OK e o formulário é adicionado à sua página.

Adicionar um campo de texto a um formulário

Adicionar um campo de texto a um formulário com a captura de tela do KompoZer


Depois de adicionar um formulário a uma página com KompoZer, o formulário será destacado na página em uma linha tracejada azul claro. Você adiciona seus campos de formulário dentro desta área. Você também pode digitar texto ou adicionar imagens, como faria em qualquer outra parte da página. O texto é útil para adicionar prompts ou rótulos aos campos do formulário para orientar o usuário.

  1. Escolha onde deseja que o campo de texto vá na área delineada do formulário. Se quiser adicionar um rótulo, você pode digitar o texto primeiro.
  2. Clique no seta para baixo próximo ao Forma botão na barra de ferramentas e escolha Campo do Formulário no menu suspenso.
  3. A janela Propriedades do campo do formulário será aberta. Para adicionar um campo de texto, escolha Texto no menu suspenso rotulado Tipo de campo.
  4. Dê um nome ao campo de texto. O nome é usado para identificar o campo no código HTML e o script de tratamento de formulário precisa do nome para processar os dados. Vários outros atributos opcionais podem ser modificados nesta caixa de diálogo, alternando o Mais propriedades / menos propriedades botão ou pressionando o Edição Avançada botão, mas por agora, vamos apenas inserir o nome do campo.
  5. Clique OK e o campo de texto aparece na página.

Adicionar uma área de texto a um formulário

Adicionar uma área de texto a um formulário com a captura de tela do KompoZer

Às vezes, muito texto precisa ser inserido em um formulário, como uma mensagem ou um campo de perguntas / comentários. Nesse caso, um campo de texto simplesmente não é apropriado. Você pode adicionar um campo de formulário de área de texto usando as ferramentas de formulário.

  1. Posicione o cursor dentro do contorno do formulário onde você gostaria que sua área de texto estivesse. Se você quiser digitar um rótulo, geralmente é uma boa ideia digitar o texto do rótulo, pressionar Enter para mover para uma nova linha e adicionar o campo do formulário, já que o tamanho da área de texto na página torna-o estranho para o etiqueta à esquerda ou à direita.
  2. Clique no seta para baixo próximo ao Forma botão na barra de ferramentas e escolha Área de Texto no menu suspenso. A janela Propriedades da área de texto será aberta.
  3. Insira um nome para o campo da área de texto. O nome identifica o campo no código HTML e é usado pelo script de gerenciamento de formulário para processar as informações enviadas pelo usuário.
  4. Insira o número de linhas e colunas que você deseja que a área de texto exiba. Essas dimensões determinam o tamanho do campo na página e quanto texto pode ser inserido no campo antes que a rolagem precise acontecer.
  5. Opções mais avançadas podem ser especificadas com os outros controles nesta janela, mas por enquanto, o nome do campo e as dimensões são suficientes.
  6. Clique OK e a área de texto aparece no formulário.

Adicionar um botão Enviar e Redefinir a um formulário

Adicionar um botão Enviar e Redefinir a um formulário com captura de tela do KompoZer

Depois que o usuário preencher o formulário em sua página, deve haver alguma maneira de as informações serem enviadas ao servidor. Além disso, se o usuário quiser reiniciar ou cometer um erro, é útil incluir um controle que redefinirá todos os valores do formulário para o padrão. Os controles especiais de formulário tratam dessas funções, chamadas de botões Enviar e Redefinir, respectivamente.

  1. Coloque o cursor dentro da área delineada do formulário onde você deseja que o botão enviar ou redefinir esteja. Na maioria das vezes, eles estarão localizados abaixo do restante dos campos de um formulário.
  2. Clique no seta para baixo próximo ao Forma botão na barra de ferramentas e escolha Botão de definição no menu suspenso. A janela Propriedades do botão aparecerá.
  3. Escolha o tipo de botão no menu suspenso denominado Tipo. Suas opções são Enviar, Redefinir e Botão. Neste caso, vamos escolher o Enviar modelo.
  4. Dê um nome ao botão, que será usado no código HTML e de manuseio do formulário para processar a solicitação do formulário. Os desenvolvedores da Web geralmente chamam esse campo de “enviar”
  5. Na caixa rotulada Valor, digite o texto que deve aparecer no botão. O texto deve ser curto, mas descritivo do que acontecerá quando o botão for pressionado. Algo como “Enviar”, “Enviar formulário” ou “Enviar” são bons exemplos.
  6. Clique OK e o botão aparece no formulário.

O Redefinir botão pode ser adicionado ao formulário usando o mesmo processo, mas escolha Redefinir de Modelo campo em vez de Enviar.

Editando um formulário com KompoZer

Editando um formulário com captura de tela KompoZer

Editar um formulário ou campo de formulário no KompoZer é muito fácil. Basta clicar duas vezes no campo que deseja editar e a caixa de diálogo apropriada aparecerá, onde você poderá alterar as propriedades do campo para atender às suas necessidades. O diagrama acima mostra um formulário simples usando os componentes abordados neste tutorial.