Jump to content


Gabriel Medina

Member Since 31/10/2011
Offline Last Active 11/01/2012, 08:37
-----

#1014501 Formulários Simples E Funcionais

Posted by Gabriel Medina on 31/10/2011, 16:28

Olá pessoal, sou Gabriel Medina – Web Developer e hoje vou deixar um código que provavelmente ira mudar sua vida formularia ;)

Esse código é simples e de fácil formatação, seguindo todas as regras estabelecidas pela W3C, qualquer duvida é só posta aqui em baixo.

HTML
<div id="formulario_contato">
    <form action="" method="post">
        <fieldset>
            <legend>Informações Cadastrais</legend>
            <label>
                Nome: <input type="text" name="nome" id="nome" />
            </label>
            <label>
                Email: <input type="text" name="email" id="email" />
            </label>
            <label>
                Telefone: <input type="text" name="telefone" id="telefone" />
            </label>
            <label>
                Mensagem: <textarea rows="4" cols="4" name="mensagem" id="mensagem"></textarea>
            </label>
            <label>
                <input type="submit" name="enviar" value="enviar" class="btn_enviar" />
            </label>
        </fieldset>
    </form>
</div>

Vai um exemplo de formatação com CSS abaixo:

CSS
#formulario_contato fieldset { border: 0; margin: 10px; width: 320px; }
#formulario_contato legend { border: 0; text-align: left; padding: 0 0 4px 0; font-weight: bold; }
#formulario_contato label { display: block; width: 300px; padding: 4px 0; clear: both; }
#formulario_contato label input { float: right; width: 220px; }
#formulario_contato label textarea { float: right; width: 220px; }
input.btn_enviar { position: absolute; width: 60px; height: 28px; }

Forte abraço a todos, espero que tenham curtido.

Este post lhe ajudou? Retribua ;D


IPB Skin By Virteq