Como personalizar Forms Html rapidamente?

Escrito por Gonçalo Martins

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

niceformns O 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
<link rel="stylesheet" href="niceforms-default.css" type="text/css" media="screen" />
<script type="text/javascript" src="niceforms.js">
</script>

Adicionar a respectiva class à form que deseja personalizar

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

2. JqTransform

O 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
<script type="text/javascript" src="jquery.jqtransform.min.js">
</script>

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

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

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

javascript
<script type="text/javascript">
$(function() {
$("form.jqtransform").jqTransform();
 
});
 
</script>

Gostou deste Artigo?

Subscreva o feed RSS ou reguiste-se na Newsletter do WebLouca, agora!

Tags:

forms html, javascript, niceforms, jqtransform, scripts

Categoria:

Se preferir, pode ainda deixar um comentário

PATROCINADORES

ARTIGOS RELACIONADOS

Trackback(0)

TrackBack URI for this entry



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.


Thiago Moreira Abril 11, 2010	Bom dia companheiro. Gostaria de saber qual plugin pra destacar os códigos você usa. Obrigado


GonçaloM Abril 15, 2010	@Thiago Moreira Não utilizo nenhum plugin, foi algo que desenvolvi e coloquei no weblouca