INPUTS PELS BOTONS

L'element HTML input pot portar l'atribut type i aquest pot tenir 22 valors diferents. Ara, analitzarem el primer tipus de valor, el <input type="button">.

<input type="button"> vs <button>

Existeixen dues maneres de construir botons dins d'un element HTML form: (1) fent servir un <input type="button"> i (2) utilitzant l'element HTML button que es crea amb <button></button>.

Dos botons sense text

Aquí sota teniu el codi per crear dos botons sense text: (1) un input de tipus button i (2) un button. A sota el codi, teniu el resultat en el fitxer html.

        
            <form>
                <input type="button">
                <button></button>
            </form>

Dos botons amb el mateix text

Posem text als dos botons. Fem servir l'atribut value i el valor "Enviar" per posar el text "Enviar" al input de tipus button. En l'element HTML button posem "Enviar" entre les dues etiquetes button. Aquí sota teniu el codi i el seu resultat.

        
            <form>
                <input type="button" value="Enviar">
                <button>Enviar</button>
            </form>

Un input de tipus text i dos botons amb el mateix text però amb funció diferent

Posem un element HTML input amb atribut type i valor "text" per posar text. Si envieu el text fent servir el primer botó construit amb <input type="button" value="Enviar"> la pagina web no recarrega i si ho feu amb l'element HTML button, sí que ho fa. Pera tant, el primer element HTML no envia el formulari i el segon element sí. Aquí sota teniu el codi i el seu resultat.

        
            <form>
                <input type="text">
                <input type="button" value="Enviar">
                <button>Enviar</button>
            </form>

Un input i dos botons amb diferent text i mateixa funció

Si posem un atribut type amb valor "submit" a <input> fa exactement la mateixa funció que l'element HTML button. Per convenció, se sol utilitzar el segon cas. Aquí sota teniu el codi i el seu resultat.

        
            <form>
                <input type="text">
                <input type="submit" value="Enviar input amb submit">
                <button>Enviar amb button</button>
            </form>