Como editar o estilo do formulário

Como eu disse em outro post, vou mostrar como editar seu formulário e deixa-lo com uma melhor aparência, o que será necessário apenas editar o css de algumas tags.

O primeiro passo é criar o formulário como no exemplo:

<form action="enviar.php" method="post">

<input name="nome" type="text" size="69">< br/>
<input name="email" type="text" size="69"/>< br/>
<input name="assunto" type="text" size="69"/>< br/>
<textarea name="mensagem" cols="70" rows="10"></textarea>< br/>

 <input type="submit" value="Enviar!" />
</form>

Size é o tamanho do input.

O segundo passo é criar o css para editar as tags. Vou editar a tag <input> e <textarea>:

<style type="text/css">

input, textarea{
    background-color:#f7f7f7;
    padding: 6px;
    border: #dedede solid 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
}

</style>

Na linha 3, foi definido que serão editadas as tags <input> e <textarea>;
Na linha 4 o background, que é o fundo;
Na linha 5 paddind define um valor para os espaçamentos entre o conteúdo e as bordas dos elementos;
Na linha 6 define uma borda para os elementos;
Na linha 7 é definida qual font sera usada no formulário;
Na linha 8 é definida o tamanho da funt.

Você poderá alterar os valores de acordo com o seus gostos e necessidades, além de acrescentar mais definições, o que se torna mais fácil tendo uma base.

Boa sorte!

Share on Google Plus