Butoane

Butoanele sunt reprezentate de elementul button. Acestea dispun de largi posibilități de configurare. Astfel, în funcție de valoarea atributului type, putem crea diferite tipuri de butoane:

submit: buton utilizat pentru trimiterea formularului
reset: buton pentru resetarea valorilor formularului
button: buton fără niciun scop special

Dacă butonul este folosit pentru trimiterea formularului, adică are atributul type="submit", atunci putem să-i stabilim o serie de atribute suplimentare:

form: definește formularul la care este atașat butonul de trimitere
formaction: stabilește adresa la care se trimite formularul. Dacă elementul form are atributul action, acesta este suprascris
formenctype: stabilește formatul de trimitere a datelor. Dacă elementul form are atributul enctype, acesta este suprascris
formmethod: stabilește metoda de trimitere a formularului (post sau get). Dacă elementul form are atributul method, acesta este suprascris

De exemplu, definim pe formular un buton de trimitere și un buton de resetare:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Formulare în HTML5</title>
   </head>
   <body>
       <form>
           <p><input type="text" name="login"/></p>
           <p><input type="password" name="password"/></p>
           <p>
               <button type="submit" formmethod="get" formaction="index.html">Trimite</button> 
               <button type="reset">Anulează</button>
           </p>
       </form>
   </body>
</html>

În afară de elementul button pentru crearea butoanelor, se poate folosi elementul input, având atributul setat la submit sau reset. De exemplu:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Formulare în HTML5</title>
   </head>
   <body>
       <form>
           <p><input type="text" name="login"/></p>
           <p><input type="password" name="password"/></p>
           <p>
               <input type="submit" value="Trimite" /> 
               <input type="reset" value="Anulează" />
           </p>
       </form>
   </body>
</html>

Și un alt element input cu atributul type="image" permite utilizarea unei imagini ca buton:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Forma de introducere în HTML5</title>
   </head>
   <body>
       <form>
           <p>
               <input type="text" name="search" />
               <input type="image" src="search.png" name="submit" />
           </p>
       </form>
   </body>
</html>

În afară de prezența imaginii, în rest acest buton va fi similar cu butonul standard de trimitere input type="submit" sau button type="submit".