HomeJavascriptComo personalizar Forms Html rapidamente?

18

Jun

Como personalizar Forms Html rapidamente?
Escrito por Gonçalo Martins   

forms html
Ao criar a caixa de contacto do weblouca.com, o tempo que ia gastar nela era crucial. No entanto cria criar algo razoavelmente apelativo visualmente, mas em pouco tempo. Existem muitas formas e informação para personalizar Forms Html, no entanto optei por utilizar javascript, no meu caso o script Niceforms.

Neste artigo vou-lhe apresentar dois scripts que pode utilizar para personalizar as suas forms html. Ambos os scripts são simples de utilizar, e razoavelmente intuitivos. Um utiliza uma framework (Jquery) outro é nativo (Niceforms).

 

1. Niceforms

niceformnsO script niceforms vai substituir todos os elementos dentro de uma form que contenha a class "niceform", por elementos personalizados. Você pode optar por utilizar os que vêm por predefinição com o script ou desenhar novos.

Para implementar o script niceforms só tê que realizar o seguinte procedimento:


Realizar o load do script e do css:

javascript
  1. <link rel="stylesheet" href="niceforms-default.css" type="text/css" media="screen" />
  2. <script type="text/javascript" src="niceforms.js">
  3. </script>

 
Adicionar a respectiva class à form que deseja personalizar

html
  1. <form class="niceform">
  2. <!--(...)-->
  3. <form>

 

2. JqTransform

jqtransformO JqTransform ao contrário do script niceforms funciona através da Framework Jquery.

A unica coisa que terá que fazer é adicionar o plugin do jquery à secção <head> do seu website. E começar a desfrutar de Forms Html personalizadas.

javascript
  1. <script type="text/javascript" src="jquery.jqtransform.min.js">
  2. </script>


Tál como no script Niceforms têm que se identificar a form com uma class:

html
  1. <form class="jqTransform">
  2. <!--(...)-->
  3. <form>


E para aplicar a transformação têm que adicionar ainda as seguintes linhas de javascript à sua página web:

javascript
  1. <script type="text/javascript">
  2. $(function() {
  3. $("form.jqtransform").jqTransform();
  4.  
  5. });
  6.  
  7. </script>


Gostou deste Artigo?
Subscreva o feed RSS ou reguiste-se na Newsletter do WebLouca, agora!
Categoria:
Se preferir, pode ainda deixar um comentário

PATROCINADORES


cometarios
Trackback(0)
Danilo
Julho 21, 2009

Você não disponibiliza os scripts e os arquivos CSS para que possamos realizar o download?
GonçaloM
Julho 28, 2009
http://weblouca.com

@Danilo

Neste artigo não existe nada para disponiblizar. É só ir à pagina dos scripts e realizar download.

Escreva o seu Comentario
 
  pequeno | maior
 

busy
 

Patrocinadores do Site

Subscrever Feed

Artigos

Ultimos artigos
Crie facilmente miniaturas das suas imagens com PHP
phpthumbAtualmente praticamente todos os websites possuem a necessidade de listar os seus artigos...
Otimize as suas imagens com PunyPng
benchmarksA pouco mais de um ano falei sobre uma ferramenta para otimizar imagens (Artigos/optimize...
Como redimensionar imagens com PHP
phpimageredRedimensionar uma imagem com php pode ser um processo complicado. Quando por exemplo um wo...
Links de Afiliados com Javascript - Update
linksafiliadosNo inicio do ano escrevi um artigo onde dáva a conhecer uma forma de criar links de afili...
W3C o que é?
w3cqueeA internet e o HTML já por cá andam há algum tempo. O que você pode não saber é que...

Nuvem de Tags