Formularis

Index

Associar label a input

ASSOCIACIÓ MÉS COMUNA D'UN LABEL AMB UN INPUT

En l'apartat anterior hem vist que l'etiqueta <label> té un atribut for. En el valor de l'atribut for és on posem el valor de atribut id de l'etiqueta <input> que volem connectar. En aquest cas, solem posar el valor "name" a l'atribut id de <input> i, per tant, també posem el valor "name" a l'atribut for de <label>.

        
            <form>
                <label for="name">Nom</label>
                <input id="name">
                <button>Enviar formulari</button>
            </form>
        
    

Si anem a la pàgina html podem posar el nostre nom en el input com abans, però si fem un clic sobre la paraula Nom del element HTML label s'activa el cursor en el camp input amb el qual està connectat.

ASSOCIACIÓ MENYS COMUNA D'UN LABEL AMB UN INPUT

Hi ha una altra forma d'associar un element label amb un element input. Aquesta forma la veureu poques vegades però s'ha de conèixer.

        
            <form action="">
                <label>
                    Nom
                    <input>
                </label>
                <button>Enviar formulari</button>
            </form>
        
    

Si escrivim el codi d'aquesta alternativa per connectar un label amb un input, el resultat visual és exactement el mateix i si cliquem sobre Nom també s'activa el cursor en el camp input. Aquesta alternativa s'utilitza menys perquè si volem donar estils diferents al label i al input no podem fer-ho. Aquesta alternativa és completament vàlida i l'especificació HTML5 diu que es pot fer d'aquesta manera.