Introdução
Salve Pessoal! nesse tutorial vamos aprender a construir formulários utilizando o Framewrks Spry, garanto que é muito bom esse tutorial, fiz um formulário utilizando o spry clique aqui para ver
Pré-requisito
Dreamweaver CS3, para baixar a versão trial clique aqui
Conteúdo
Os botões para construir formulários utilizando o spry fica na guia Spry da barra inserir do dreamweaver 
As opções de configuraão dos campos ficam na janela de Propriedades
Text Field 
Type: Tipos de validação:
None: Nenhum tipo de validação
Intereger: Intereger
Email Address: Endereço de e-mail
Date: Datas, suporta diversos formatos de datas, para escolher selecione os tipos disponíveis na caixa Format
Time: Hora, suporta diversos formatos de datas, para escolher selecione os tipos disponíveis na caixa Format
Credit Card: Cartão de credito, suporta todos os tipos de cartão de credito, ou se preferir pode personalizar para valida somente cartão da MasterCard, Visa, American Express, Discover ou Diner´s Club,
Zip Code: Código Postal, suporta o padrão US-5, US-9, UK, Canadá, ou pode ser personalizar qualquer tipo utilizando o Pattern
Phone Number: Numero de Telefone, suporta o padrão US/Canadá ou pode ser personalizado para aceitar qualquer tipo utilizando o Pattern
Social Security Number: Número de segurança social
Currency: Moeda corrente
Real Number: Número real
IP Address: Numero de IP, suporta IPv4, IPv6 ou os dois tipos de IP
URL: URL ou Link
Custon: Personalizada
Pattern
Adiciona uma mascara que permite personalizar a validação do campo, estabelece um padrão de como o campo deve ser preenchido, disponíveis somente para os campo do tipo código postal, número telefônico e custom. Na caixa Pattern você escreve um modelo de como deve ser preenchido o campo, para campos que utilizam números utilize o numeral zero para escrever o modelo. Como por exemplo quero personalizar a caixa para exibir um número telefônico no padrão brasileiro com DDD, para isso na caixa Pattern eu escrevo 000 0000-0000, ele só vai aceita números de telefone que sigam exatamente esse modelo, ou seja, ele só vai aceitar ser o usuário digitar o número assim 011 5858-6354 ou eu posso escreve no Patern (000) 0000-0000 e marca a opção Enforce pattern, quando o usuário for digitar no formulário já pronto ele só vai precisar digitar os número em seguencia sem a necessidade de adicionar espaço, traço ou parentesês, já que conforme ele for digitando o Spry vai acrescentar os parênteses nos três primeiros números e depois dar espaço e ainda com o usuário digitando ele acrescenta o traço depois do quarto número digitado, deixando o campo exatamente como você escreveu na caixa Pattern.
Hint
Mostrar uma sugestão de como o campo deve ser preenchido, disponível em todos os tipos de campo. Ele mostrar um valor inicial e quando o usuário clicar no campo para preencher ele é apagado automaticamente.
Preview State
Visualiza como o campo vai ser comporta e qual a mensagem o usuário vai ver, podendo ser:
Initial: Inicial, como o campo será mostrado no inicio, antes do usuário preenche-lo
Requerid: Requerido, mensagem que será mostrada quando o campo for requerido e não for preenchido.
Invalid Format; Formato invalido, mensagem que será mostrada quando o campo for preenchido de forma errada.
Valid: Formato valido, mensagem que será mostrada quando o campo for preenchido de forma correta
Validade on:
Blur: O campo será validado instantaneamente ainda quando o usuário estiver preenchendo.
Change: O campo será validado somente quando o usuário tentar enviar o formulário
Opções:
Enforce Pattern: Quando o usuário preencher o campo ele vai instantaneamente convertendo os caracteres iguais ao escrito na caixa Pattern, podendo acrescentar números ou caractertes especiais conforme digitado na caixa Pattern, para que fiquei igual ao especificado no Pattern
Requeride: Requerido, campos de preenchimento obrigatório, o formulário não vai ser enviado sem o preenchimento do campo
Quantidade de caracteres
Min chars: Quantidade mínima de caracteres devem ser digitado
Max chars: Quantidade máxima de caracteres devem ser digitado
Textarea
Opções adicionais para o campo textarea
Counter
Opção para contar os caracteres que são digitados
None: Não conta os caracteres digitado
Chars Couter: Mostrar e conta os caracteres digitado
Chars remaining: Mostrar a contagem regressiva dos caracteres que restam para preencher
Block extra caracteres: bloqueia os caracteres que forem digitados além do limite informado
Checkbox 
Opções adicionais para o campo checkbox:
Requerid: Selecionamento obrigatório
Enforce range: Ativa a opção para que seja selecionada uma quantidade mínima de checkbox ou uma quantidade máxima de checkbox a ser selecionado
Postagens
0 comentários:
Postar um comentário