Dec-07 04

Mudando o layout dos formulários HTML

Enviado por: Thales RB. .     13 comentários.     Categorias: HTML-CSS, Javascript

Os comandos html para formulários(input, button, etc) tem um layout que não pode ser mudado com CSS, mas existe alguns scripts em javascript que permitem alterar esse layout um deles é o niceform. Veja só a diferença:

o normal: usando o niceform:

bem melhor não ??

Para usa-lo é simples, primeiro faça o download dele aqui, ele vem com um arquivo de exemplo para poder dar uma olhada, mas para aplica-lo em suas paginas é só adicionar:

<script language=”javascript” type=”text/javascript” src=”niceforms.js”></script>
<style type=”text/css” media=”screen”>@import url(niceforms-default.css);</style>

e em seu formulário coloque class=”niceform” ex: <form action=”pagina.php” method=”post” class=”niceform”>

E pronto ele já irá alterar todos os comandos para o novo layout. O ueba usa esse sistema na sua pagina de enviar noticias http://ueba.com.br/NovoLink

Obs: na pasta imagens tem todas as imagens que ele usa(tudo que é visto são imagens), ou seja é possível mudar elas para se adaptar ao layout do seu site =D

Compartilhe nos Sites Sociais: Adicionar esta notícia no Linkk Adicionar esta notícia no Rec6 Adicionar esta notícia no Ueba
Pingback on December 14th, 2007.

[...] ter a sua aparencia alterada, mudada somente CSS, mas existe um jeito de alterar eles usando um script em javascript. Criando um [...]

Comment on April 20th, 2008.

Estou a tentar aplicar este estilo aos meus formulários. Fiz exactamente como diz aqui, mas não está a funcionar. Será que me pode ajudar?

Comment on April 21st, 2008.

mas qual o problema ? simplesmente nao aparece ele ?

vc sabe usar o javascript ??

Comment on April 21st, 2008.

Não sei se tem a ver com as outras folhas de estilo que tenho na página, mas não muda nada.

Não percebo nada de javascript.

Comment on June 30th, 2008.

Tambem nao estou a conseguir usar o estilo…

Henrique
Comment on July 12th, 2008.

Também naum consegui usar o estilo. :(

Nailton Gomes
Comment on August 14th, 2008.

Parabéns Cara!!

Muito bom esse seu site!

Comment on January 19th, 2009.

Eu coloco o codigo ”
@import url(niceforms-default.css);” aonde? :s

rs
Comment on March 4th, 2009.

re

Comment on July 4th, 2009.

O problema que esses arquivos niceforms-default.css e niceforms.js nao estao ai para baixar esse foi o problema

Comment on July 6th, 2009.

ricardo

atualizei os links do post, vc pode baixar ele aqui
http://www.emblematiq.com/projects/niceforms/download/

Luis Carlos
Comment on December 2nd, 2009.

“Os comandos html para formulários(input, button, etc) tem um layout que não pode ser mudado com CSS”
isso é falso, não é verdade, vejam os campos input no site http://www.institutoaguaviva.org.br

mais informacoes em http://www.w3schools.com/css/
estudem css, mais especificamente as propriedades border e background para mudar o layout dos input e textarea, select e outros

Comment on February 24th, 2010.

nao consegui

Deixe um comentário

Os campos nome e e-mail são obrigatorios(o e-mail não será exibido), a URL é opcional.

Os comentários podem ter os seguintes comandos:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>