euconectei web: Criando formulários com CSS

Formatar um formulário semântico e com CSS não tem mistério.

Utilizaremos somente as tags próprias para o formulário. Sem a necessidade de <br>, ou <div>, ou qualquer outra tag que não seja própria do formulário.

Todo e qualquer estilo (tamanho, espaçamento, cores, etc) será dado pelo CSS.

Então vamos ao código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Documento sem título</title>
     <link href="css/estilo.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
     <form action="">
        <fieldset>
           <legend>Dados Pessoais</legend>
           <label>Nome:
              <input type="text" name="nome" id="nome" />
           </label>
           <label>Sobrenome:
              <input type="text" name="sobrenome" id="sobrenome" />
           </label>
           <label>Data de Nascimento:
              <input type="text" name="dtnasc" id="dtnasc" />
           </label>
           <label>CPF:
              <input type="text" name="cpf" id="cpf" />
           </label>
        </fieldset>
        <fieldset>
           <legend>Endereço</legend>
           <label>Logradouro:
              <input type="text" name="logradouro" id="logradouro" />
           </label>
           <label>Número:
              <input type="text" name="numero" id="numero" />
           </label>
           <label>Bairro:
              <input type="text" name="bairro" id="bairro" />
           </label>
           <label>Cidade:
              <input type="text" name="cidade" id="cidade" />
           </label>
           <label>UF:
              <input type="text" name="uf" id="uf" />
           </label>
        </fieldset>
        <fieldset>
           <legend>Mensagem</legend>
           <label>Assunto:
              <input type="text" name="assunto" id="assunto" />
           </label>
           <label>Corpo:
              <textarea name="corpo" id="corpo"></textarea>
           </label>
        </fieldset>
        <input type="submit" value="Enviar" />
        <input type="reset" value="Limpar" />
     </form>
  </body>
  </html>

Com esse código pronto, temos agora um formulário básico ~~e desorganizado~~.

Começa entao, uma ~~batalha árdua~~ nova fase de criação dos estilos. Como vemos abaixo:

@charset "utf-8";
/* CSS Document */

* {
 font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;
 margin:0;
 padding:0;
}
fieldset {
 border:1px dotted #CCC;
 margin:5px 0;
 padding:5px;
 width:200px;
}
input[type=reset] {
 background-color:#FC0;
 border:none;
 width:100px;
}
input[type=submit] {
 background-color:#0C0;
 border:none;
 margin:0 0 0 3px;
 width:100px;
}
legend {
 background-color:#333;
 color:#CCC;
 font-size:14px;
 padding:5px 10px;
}
label {
 display:block;
 width:200px;
}
label input {
 border:1px solid #AEAEAE;
 margin:0 5px;
 width: 190px;
}
label input:focus {
 border:1px solid #000;
}
textarea {
 border:1px solid #AEAEAE;
 margin:0 5px;
 height:100px;
 width:190px;
}

Como final temos o seguinte ~~desastre~~ resultado:

Bons estudos e divirta-se! ;-)

euconectei web

terça-feira, 22 de fevereiro de 2011

Criando formulários com CSS

Um comentário: