Botão com a tag botão

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”>
email: <INPUT type=”text” name=”email”>
<BUTTON name=”submit” value=”submit” type=”submit”>
<span>E</span>nviar
<IMG src=”legal.gif” alt=”wow”> <IMG src=”forum.gif” alt=”forum”>
</BUTTON> <BUTTON name=”reset” type=”reset”>
Re<span>s</span>et <IMG src=”oops.gif” alt=”oops”>

<IMG src=”forum.gif” alt=”forum”> </BUTTON> </P> </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>

Acho q pode ser muito util em algumas situações, diminuindo o tamanho do código e ajudando a semântica da pagína.

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