ESTRUCTURA BÀSICA D'UN FORMULARI

L'estructura bàsica d'un formulari es compon de 4 elements HTML que tenen aquestes etiquetes:

<form>
<label>
<input>
<button>

ETIQUETES

<form>

L'element HTML form té una etiqueta d'obertura <form> i una de tancament </form>. Les etiquetes form engloben tot el formulari. Accepta atributs globals que podeu trobar a MDN web docs o W3schools.

<label>

L'element HTML label té una etiqueta label que serveix per escriure el nom del camp a emplenar. Té etiqueta d'obertura i tancament.

<input>

L'element input és el que serveix perquè l'usuari pugui introduir una informació. Depenent del atribut que porti es veurà d'una manera o d'una altra. L'atribut per defecte és un camp de tipus text en una sola linia. Hi ha 22 tipus diferents de valors de l'atribut type.

<button>

L'element HTML button crea un botó que permet enviar el formulari. Té etiqueta button d'obertura i tancament.

EXEMPLE

Aquí us deixo el codi per muntar el vostre primer formulari. A sota, teniu el resultat en el fitxer html.

        
            <form>
                <label>Nom</label>
                <input>
                <button>Enviar formulari</button>
            </form>

De moment, esborrem l'atribut "action" de <form> que ens proposa emmet de VSC, també esborrem l'atribut "for" de <label> i l'atribut "type" de <input>. Aquests atributs els veurem més endavant.

Si emplenem el formulari amb el nostre nom i cliquem enviar el formulari, el comportament per defecte d'un formulari és enviar el contingut i recarregar la pàgina i, per tant, s'esborra el contingut. Aquest comportament es pot evitar amb JavaScript.

On s'envia el formulari? Si poseu l'atribut action a l'etiqueta <form> i com a valor poseu "enviar.html" veureu que us surt un error que posa "Cannot GET /enviar.html". Aquest fitxer no està creat i si el creeu tampoc us funcionarà. El que es fa normalment es posar un document de servidor php i bloquejar-ho amb JavaScript de moment.