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”>
<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

Anúncios

7 Respostas para “Botão com a tag botão

  1. Você não tem um exemplo feito?

    da uma olahda no http://wwwhatsnew.com , tem um monte de aplicacões que ainda não sei como foram programadas…

  2. Não entendi! Aliás, copiei, todavia, não consegui fazer funcionar em meus testes?

  3. ok pessoal, vamos tentar com outro exemplo:

    Uma calculadora on-line. Primeiro pensei como poderia fazer um formulário sem utilizar a tab button, e depois refiz o form utilizando button.

    1º CHECKBOX para as operações matemáticas da calculadora

    <form id="calculadora" action="calcular.html">
    <fieldset class="valores">
    <legend>1º - Digite os valores que deseja calcular !</legend>
    <label for="num_1">1º valor: <input name="num_1" value="" id="num_1" /></label><br />
    <label for="num_2">2º valor: <input name="num_2" value="" id="num_2" /></label>
    </fieldset>

    <fieldset class="operadores">
    <legend>2º - Selecione a operação matemática</legend>
    <label for="som"><input type="checkbox" name="operacao" value="somar" id="somar" />+ </label>
    <label for="sub"><input type="checkbox" name="operacao" value="subtrair" id="sub" />- <img src="ico.subracao.jpg" /> </label>
    <label for="mul"><input type="checkbox" name="operacao" value="multiplicar" /><img src="ico.multiplicacao.jpg" /> </label>
    <label for="div"><input type="checkbox" name="operacao" value="dividir" /><span>/</span> <img src="ico.divisao.jpg" /> </label>
    </fieldset>

    <input type="submit" value="Executar" />
    </form>

    – BUTTON para as operações matemáticas da calculadora

    <form id="calculadora" action="calcular.html">
    <fieldset>
    <legend>1º - Digite os valores que deseja calcular</legend>
    <label for="num_1">1º valor: </label><input name="num_1" value="" id="num_1" /><br />
    <label for="num_2">2º valor: </label><input name="num_2" value="" id="num_2" />
    </fieldset>

    <fieldset>
    <legend>2º - Selecione a operação matemática para executar</legend>
    <button name="operacao" type="submit" value="somar">+ </button>
    <button name="operacao" type="submit" value="subtrair">- <img src="ico.subracao.jpg" /></button>
    <button name="operacao" type="submit" value="multiplicar"><img src="ico.multiplicacao.jpg" /> </button>
    <button name="operacao" type="submit" value="dividir"><span>/</span> <img src="ico.divisao.jpg" /> </button>
    </fieldset>
    </form>

    As duas maneira estão corretas, poderíamos utilizar qualquer uma das duas, algumas vantagens utilizando BUTTON :

    Diminuição de um click para o usuário enviar o formulário
    O código HTML diminui
    Poderiamos colocar uma animação nos botões das operações

    : -D

  4. http://br.geocities.com/renaissancehaslam – esta é minha página formatada pela CSS. Vale a pena vcs visitarem pois a vocalista ANNIE HASLAM é a maior do gênero progressivo. Pra quem gosta de música de bom gosto. Segue. Mande comentários pra mim: acervopaim@hotmail.com

  5. Does your website have a contact page? I’m having a tough time locating it but, I’d like to send you an e-mail.
    I’ve got some recommendations for your blog you might be interested in hearing. Either way, great blog and I look forward to seeing it develop over time.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s