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.

15 2009 outubro

Ordem dos atributos HTML

Autor: g3 em HTML

Última modificação: 16 outubro 2009

Incrementamos o conteúdo do Checklist para HTML.

Assim como temos definido a ordem das propriedades CSS, também documentamos uma ordem para os atributos de HTML.

Agora o Checklist para HTML possui a seção sobre Ordem dos atributos HTML.

Última modificação: 13 março 2009

Porque utilizar botões expansíveis:

  • Reduz número de arquivos;
  • Reduz arquivos a serem baixados pelo usuário;
  • Carregamento da página mais rápido;
  • Reduz classes no HTML / linhas de CSS;
  • Uma classe = utilizado em todos* os botões (* todos com o mesmo estilo dentro do padrão do site).

Botão expansível CSS

Convencido disto, aprenda como fazer:

  1. Criar a imagem do botão:
  2. Dividir a imagem em 2 partes:
    • O botão será formado por duas peças: o lado esquerdo, e o direito.
    • Divida a imagem deixando o lado esquerdo contendo somente a borda esquerda, veja o exemplo (print do photoshop). Salve como botao_esquerdo.png:

      Botão expansível CSS - Passo 1

      Botão expansível CSS - Passo 1

      Para fazer o lado direito, recorde o restante do botão que não seja a borda esquerda. Abra um novo arquivo com dimensões maiores, por exemplo: Se o botão for WIDTH 100px por HEIGHT 20px, o lado direito terá que ter uma largura de 500px. Essa é a imagem que vai fazer a “expansão”. Siga os passos:

    • Selecione o lado direito
    • Abra um novo arquivo (só para ele) Criando a imagem do lado direito
    • Coloque a borda de um lado da imagem (cole no canto direito)
    • Selecione uma medida 1px(largura) por altura total da imagem. Vamos fazer esse pixel ser igual para todo o resto da imagem
    • Com esse pixel selecionado, (CTRL + T ou EDIT > Free Transform). Agora sim, exenta esse pixel até o outro lado da imagem.
      Photoshop Redimensionamento

      Photoshop Redimensionamento

    • Salve como: botao_direito.png
  3. HTML: Agora temos as duas imagens separadas. Chega de Photoshop, vamos para o o código:

          <a class="botao_expansivel" href="#" title="Botão expansível"><strong>Botão expansível</strong></a>
        

    – Além do link precisamos de um elemento dentro dele para colocar o outro lado da imagem. Pode ser um EM, SPAN ou STRONG. Como nós gostamos dos Webstandards, indicamos o STRONG, pois não ficará sem sentido como um SPAN, por exemplo.

  4. Código CSS*:

          .botao_expansivel { display: inline-block; padding-left: 5px; background: url(../imagens/botao_esquerdo.png) left no-repeat; }
          .botao_expansivel strong { display: inline-block; padding: 5px; background: url(../imagens/botao_direito.png) right no-repeat; }
        

Quem usa os botões expansíveis (HTML + CSS)?

*CSS: Utilizei no CSS do exemplo a Abreviação das propriedades CSS