Arquivo da categoria: html

Uma tag subestimada, pois com a tag “button” temos mais controle sobre o formulário e sobre o design do botão .
Usualmente em um formulário utilizamos a tag input com o type= submit|reset, com o button obtemos o mesmo funcionamento, para enviar e dar o reset.
Ex de submit|reset com button:

<button  type=”submit”>Enviar</button>
<button  type=”reset”>Enviar</button>

Até aqui está tudo igual, agora duas vantagens com o button.

Aspecto visual: podemos adicionar dentro de uma tag “button” uma imagem, dai vc pensa ‘na tag input também’, certo mas com button você coloca quantas imagens quiser e até mesmo outras tags .

Ex:
<FORM action=”seuform”>
<label for='email'>email:</label> <INPUT type=”text” name=”email” id="email">
<BUTTON name=”submit” value=”submit” type=”submit”>
  <span>E</span>nviar
  <IMG src=”legal.gif” alt=”wow”> <IMG src=”send.gif” alt=”send”>
</BUTTON>
<BUTTON name=”reset” type=”reset”>
  Re<span>s</span>et <IMG src=”oops.gif” alt=”oops”>
  <IMG src=”forum.gif” alt=”forum” />
</BUTTON>
</FORM>

Quando em um formulário o usuário precisa selecionar uma entre várias opções, podemos utilizar um select box ou vários formulários ou várias tags “a” dentro de uma mesma pagína. Neste caso é utilizado o button para adicionar apenas um formulário e enviar apenas um valor para o servidor.

Ex de uma pagínação:

<form class="pagination" action="paginate.php" method="get">
<ol>
<li class=”prev”>
  <button type=”submit” name=”submit” value=”1″>
    1
    <span></span>
  </button>
</li>
<li class=”curr”>
  <button type=”submit” name=”submit” value=”2″>2</button>
</li>
<li class=”next”>
  <button type=”submit” name=”submit” value=”3″>3</button>
</li>
<li>
  <button type=”submit” name=”submit” value=”4″>4</button>
</li>
<li>
  <button type=”submit” name=”submit” value=”5″>5</button>
</li>
</ol>
</form>

É util em algumas situações, diminuindo o tamanho do código HTML e melhorando a semântica da pagína.

http://del.icio.us/marco.moura/button