Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

22 2012 março

Padrão de formulários

Autor: g3 em HTML

Sempre utilizamos um estilo base para formulários quando trabalhamos com páginas de cadastro, login, etc. Consequentemente possuímos uma forma bem similar para escrever nossos códigos para formulários. Por isso com o passar do tempo fomos testando e incrementando nosso padrão para formulário. Tanto a parte de código HTML quando CSS.

Atualizamos o post do Documento base para CSS. Agora no arquivo “geral.css” contém os estilos necessários para estilizar um formulário default.

Abaixo está nosso HTML pré-definido para formulário:

<!-- abre form -->
<form action="#" method="post">
  <fieldset>

    <!-- abre #instrucoes_formulario -->
    <aside id="instrucoes_formulario">
      <p class="erro">Verifique os campos com asterisco e destaque vermelho.</p>
      <!-- <p>Preencha os campos obrigatórios (*).</p> -->
    </aside>
    <!-- fecha #instrucoes_formulario -->

    <ol>
      <li class="erro">
        <label for="nome">* Nome</label> <input type="text" name="nome" id="nome" /> <em>Apenas letras</em>
      </li>
      <li class="erro">
        <label for="senha">* Senha</label>
        <input type="password" name="senha" id="senha" />
        <em>Ex.: Asd@123</em>
      </li>
      <li>
        <label for="email">* E-mail</label>
        <input type="email" name="email" id="email" />
        <em>exemplo@exemplo.com</em>
      </li>
      <li class="erro">
        <label for="telefone">Telefone</label>
        <input type="tel" name="telefone" id="telefone" />
        <em>(xx) xxxx-xxxx</em>
      </li>
      <!-- input[type=date] é suportado apenas no Opera -->
      <!--
      <li>
        <label for="data">Data</label>
        <input type="date" name="data" id="data" />
        <em>yyyy-mm-dd</em>
      </li>
      -->
      <li>
        <label for="site">Site</label>
        <input type="url" name="site" id="site" value="http://www.exemplo.com/" />
        <em>http://www.exemplo.com/</em>
      </li>
      <li>
        <label>Números</label>
        <input type="number" name="campo_numero" id="campo_numero" />
        <em>Use apenas números</em>
      </li>
      <li>
        <!-- <p> parágrafo com title servindo como label dos campos da listagem a seguir -->
        <p title="Escolha alguma das opções XXXX">Opções</p>
        <!-- <ul> listagem de campos à parte do fluxo de preenchimento -->
        <ul>
          <li>
            <label title="Selecionar opção a"><input type="radio" name="#" /> Opção a</label>
          </li>
          <li>
            <label title="Selecionar opção b"><input type="radio" name="#" /> Opção b</label>
          </li>
          <li>
            <label title="Selecionar opção c"><input type="radio" name="#" /> Opção c</label>
          </li>
        </ul>
        <em>Mensagem de teste</em>
      </li>
      <li>
        <!-- <ol> listagem de campos que fazem parte do fluxo de preenchimento -->
        <ol>
          <li class="erro">
            <label for="campo_selecao">Campo seleção</label>
            <select name="campo_selecao" id="campo_selecao">
              <option>Selecione</option>
            </select>
            <p class="erro">Selecione algum xxxxx</p>
          </li>
          <li class="erro">
            <label for="campo_exemplo1">Campo exemplo 1</label>
            <input type="text" name="campo_exemplo1" id="campo_exemplo1" />
            <p class="erro">Mensagem de erro</p>
          </li>
        </ol>
        <em>Ex. vários campos na mesma linha.</em>
      </li>
      <li>
        <label for="mensagem">Mensagem</label>
        <textarea rows="3" cols="30" name="mensagem" id="mensagem"></textarea>
        <em>Mensagem de ajuda</em>
      </li>
      <li class="confirmacao">
        <label for="confirmar" title="Confirmar XXXXX"><input type="checkbox" name="confirmar" id="confirmar" /> Exemplo de campo de confirmação.</label>
      </li>
    </ol>
    <button type="submit">Botão de enviar</button>
  </fieldset>
</form>
<!-- fecha form -->

Este é um padrão que prevê várias possibilidades para formulários, portanto remova e inclua conforme sua necessidade os códigos HTML e CSS. Sempre fazemos esse procedimento no início de cada projeto.

Veja o exemplo do HTML para formulários implementado em nosso framework.

18 2010 novembro

Documento base para HTML

Autor: Carlitos em HTML, Web Standards

Última modificação: 13 junho 2012

Aqueles que acompanham o Blog Web Standards, sabem que já temos o Documento base para XHTML, que serve como o primeiro passo para qualquer projeto, inserindo meta tags e a estrutura necessária para iniciar um XHTML 1.1 Strict.

Agora, com a demanda cada vez maior pelo HTML5, estamos atualizando o Documento base para HTML5:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="pt-br"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="pt-br"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="pt-br"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="pt-br"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
  <link href="humans.txt" rel="author" />
  <link href="css/geral-min.css?v=1" rel="stylesheet" />
  <link href="css/mobile-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 479px)" />
  <link href="css/tablet-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 768px)" />
  <link href="css/desktop-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 769px)" />
  <link href="css/impressao-min.css?v=1" rel="stylesheet" media="print" />
  <!--[if lt IE 9]>
    <link href="css/desktop-min.css?v=1" rel="stylesheet" />
    <script src="js/selectivizr-min.js"></script>
  <![endif]-->
  <script src="js/modernizr.custom.83845.js"></script>
</head>
<body id="inicial">

<!-- abre .limites -->
<div class="limites">

<!-- abre .topo -->
  <header class="topo">
    
  </header>
<!-- fecha .topo -->

<!-- abre .conteudo -->
  <div class="conteudo">
    
  </div>
<!-- fecha .conteudo -->

<!-- abre .rodape -->
  <footer class="rodape">
    
  </footer>
<!-- fecha .rodape -->

</div>
<!-- fecha .limites -->

<!-- abre scripts finais, visando a melhor performance do site -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js">\x3C/script>')</script>
<script src="js/swfobject.js"></script>
<script src="js/funcionalidades.js"></script>
<!--[if lt IE 8]><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><![endif]-->
<!-- fecha scripts finais -->

</body>
</html>

Scripts usados

Faça download do Framework padrão e veja os arquivos, organização das pastas e ajuste conforme sua necessidade.