Curso Web Design | Validação de campos de formulário com Dreamweaver

Link to Blog do Curso Web Design - Microcamp SP

Validação de campos de formulário com Dreamweaver

Posted: 22 May 2014 11:29 AM PDT

Trabalhar com formulários é uma das partes mais importantes do web design. Afinal, praticamente todo site que você fizer vai precisar de uma página que contenha uma sessão onde o usuário deve preencher seus dados, seja para dar sugestões, fazer observações, solicitar algo ou somente para fins de cadastro. E todos nós sabemos que nem sempre o usuário irá preencher os campos do modo como você deseja, certo? Por isso, é comum criarmos regras de validação para o preenchimento desses campos, com avisos e dicas para que as informações que serão enviadas estejam no formato correto.

No entanto, se você é um web designer iniciante e ainda não tem conhecimento das técnicas para fazer essa validações (comumente feitas em JavaScript e CSS, por exemplo), saiba que o Dreamweaver possui uma ferramenta muito prática e útil, que o auxiliará na criação de validações para os campos de seus formulários de maneira rápida e simples. E o Blog do web Design vai te ajudar nessa tarefa e mostrar como realmente esse método de trabalho é muito intuitivo e prático para quem está começando.

As ferramentas de SPRY do Dreamweaver

Se você já trabalha com o Dreamweaver e é minimamente curioso, já percebeu que o programa conta com uma guia de ferramentas SPRY em sua barra de ferramentas (lembramos que para que essa barra esteja visível, é necessário que você esteja no modo de visualização CLÁSSICO, como se vê na figura a seguir):

Os SPRY são frameworks no formato de bibliotecas que contém trechos de códigos e arquivos de Java Script e CSS. Através desses frameworks os profissionais de Design e de Programação necessitam apenas de conhecimentos básicos para a criação de determinados recursos, uma vez que praticamente todo o trabalho de configuração é feito pelo Dreamweaver. Nos SPRY, cada um dos arquivos criados desempenha um papel específico: os arquivos Java Script, por exemplo, são os responsáveis pela interatividade que o recurso proporciona à página e os arquivos CSS são responsáveis em estilizar visualmente o recurso produzido.

Do que você vai precisar para testar esse recurso?

Você vai precisar do Adobe Dreamweaver, é claro. Em especial a versão CS4 ou posterior, já que em versões anteriores esse recurso inexiste. E vai precisar de um formulário também, já que não será possível mostrar os recursos de validação se não tivermos um, certo?

Para facilitar sua vida, vamos mostrar como fazer as duas coisas: o formulário e a validação.

Abra o programa e na tela de abertura escolha a opção Criar Novo > Documento em HTML:

Escolha o MODO DESIGN de visualização:

Em seguida, começaremos a criação de nosso formulário. Para isso iremos utilizar a guia “Formulário”, presente na barra de ferramentas do programa:

Para iniciar a criação do Formulário, devemos clicar na primeira opção da guia, também chamada “Formulário”. Ao clicar nessa ferramenta, irá aparecer uma linha pontilhada vermelha em nosso documento. Ela indica a área de atuação de nosso formulário e portanto devemos inserir todos os campos que criaremos a seguir dentro desse espaço ( e se olhar na parte de código, verá que ela inseriu a as tags <form> e </form>, que abrem e fecham uma área de formulário). Na sequência, clique na SEGUNDA opção de ferramenta da guia, chamada “Campo de Texto”:

Uma janela de atributos da tag Input que você está inserindo irá abrir e nela você deve preencher os seguintes atributos:

ID (que é como o campo será identificado dentro do formulário e não aparecerá na tela)
RÓTULO (que é a palavra que aparece antes do campo e indica ao usuário o que deve ser preenchido, essa palavra estará visível no navegador). O restante das opções pode deixar como na figura abaixo:

Assim que clicar em OK, um campo de preenchimento de texto de formulário irá aparecer no documento. Ele não vem configurado, por isso devemos clicar nesse campo selecionando-o e, na Barra de Propriedades do Dreamweaver, informar seus atributos básicos, a saber:

Largura em caracteres: o tamanho que o campo deve ter, quantos caracteres visíveis ele irá comportar;
Caracteres (máx.): quantos caracteres o usuário pode preencher dentro deste campo. É imprescindível controlar também esse atributo.

No meu caso, preenchi com 50 caracteres nos 2 campos, mas você poderá colocar a quantidade que desejar…

Agora, repita esse mesmo passo para incluir a linha de Endereço:

Nosso formulário será bem simples, o que está sendo proposto aqui é como fazer a validação desses campos, então não me preocuparei em formatar com CSS ou criar uma grande quantidade de detalhes. Você poderá fazê-lo se desejar. Nesse modelo que proponho, nosso formulário terá os seguintes campos:

Nome;
Endereço;
E-mail;
Telefone residencial;
Cidade;
CEP;
Observações.

Portanto, o que você deverá fazer é uma repetição dos passos acima até chegarmos no campo de “Observações“, que será diferente pois necessita comportar mais caracteres e por isso terá mais linhas. Para inserí-lo, clique na quarta ferramenta da Guia Formulário, chamada “Área de Texto”:

Formate-o nas opções da Barra de Propriedades na parte inferior do Programa, o resultado de seu trabalho deve ser parecido com a figura a seguir:

Nosso formulário está pronto! Agora, iremos iniciar a parte de validação com as ferramentas de SPRY do Dreamweaver, indicando que campos devem ser obrigatoriamente preenchidos e que campos possuirão regras para o preenchimento.

Para iniciarmos, clique no campo “Nome” selecionando-o, e em seguida clique na aba “SPRY” na Barra de ferramentas do programa, como se vê a seguir:

Em seguida, clique na opção chamada “Validação Spry – Campo de Texto”. Uma pequena aba azul irá surgir em cima do campo, indicando que o SPRY foi aplicado nele. Na Barra de Propriedades na parte inferior do Programa, vamos encontrar algumas sugestões de validação. Pelo fato desse campo ter um preenchimento que não possui nenhuma regra específica, iremos escolher “Tipo: nenhum(a)” nas opções de validação.

Ao lado dessa caixa, escolheremos a opção “Necessário” dentro da caixa de Estados de Visualização. Isso fará com que, apesar de não haver nenhuma regra específica para o preenchimento do Nome, ele não deverá ficar em branco, forçando o usuário a preenche-lo. Outro detalhe importante é marcar caixa “onBlur” na opção VALIDAR EM , pois essa função vai fazer surgir um aviso assim que a pessoa clicar FORA do campo de texto sem preenche-lo ou se preenche-lo da maneira errada.

Na sequência, veja que a mensagem de validação “Um valor é necessário” aparece ao lado do campo Nome. Você pode até modifica-la livremente, basta seleciona-la e digitar a mensagem que desejar…

Agora, que tal repetirmos o mesmo procedimento com o campo de Endereço? Repare que na imagem a seguir já personalizei a mensagem exibida:

No campo de E-mail, repetiremos o procedimento, mas faremos uma alteração na Barra de Propriedades do Dreamweaver. Em TIPO, iremos escolher a opção “Endereço de E-mail”, e em Estado de Visualização escolha “Formato inválido”. Isso significa que se alguém tentar digitar um formato de endereço de e-mail sem o símbolo da arroba ou ponto.com no final, ele não será aceito como um endereço de e-mail verdadeiro. Não esqueça também de validar OnBlur.

No campo de Telefone, siga as configurações da imagem a seguir. Repare que existe um campo chamado FORMATO, onde você deve escolher a opção “Personalizado”. E logo abaixo, demonstre com caracteres como o campo deve ser preenchido (como se vê na imagem, utilizei (00)0000-0000 como referência para o preenchimento).

No campo de CEP, utilizei-me do mesmo raciocínio, adaptando as informações para o formato do CEP:

Por fim criaremos uma validação para a caixa de texto de Observações. Não há muito a ser feito aqui, apenas iremos colocar uma limitação de caracteres (no meu caso, escolhí 300 caracteres como o máximo a ser preenchido) e um pequeno contador que irá mostrar quantas letras já foram digitadas pelo usuário. Siga as instruções nas imagens a seguir: selecione a caixa de Observações e mãos à obra:

Está na hora de salvar seu formulário e testar se está tudo funcionando como se espera. Dê Control+S para salva-lo com o nome que desejar e uma pequena janela irá aparecer, indicando que o Dreamweaver está anexando ao seu trabalho os arquivos de SPRY:

Abra o navegador e preencha os campos (ou não, caso queira ver as mensagens de alerta). Você vai perceber que o funcionamento está perfeito, e mais: sempre que acerta a informação no formato que programou, o campo fica verde; se errar, perceba que ele fica vermelho. É o CSS do SPRY em ação modificando a propriedade do campo de acordo com o que está sendo preenchido…

Considerações finais

Como pode perceber, essa é uma maneira prática e sem dores de cabeça para validar seus formulários no Dreamweaver. É claro que você deve continuar estudando CSS e Javascript e criar seus próprios códigos… mas de uma maneira geral, essa é uma ótima opção para quando estiver sem tempo ou se ainda não domina as técnicas para fazer as suas próprias validações.

Espero que o recurso tenha sido útil para vocês… não esqueçam de divulgar o Blog para os amigos do curso e também nas Redes Sociais. Escreva-nos contando nos comentários abaixo dizendo o que achou e faça sugestões de posts futuros. A Equipe do Blog agradece!

Páginas

quinta-feira, 22 de maio de 2014