Escriu per cercar…

Form

Un formulari recull dades de qui llegeix el document i les envia a un servidor.

WebCodi
S'ensenya a
Llenguatges de marques i sistemes de gestió d’informacióDocuments estàticsASIXDAMDAWDAW-BIO

Introducció

Fins ara els teus documents només ensenyaven coses.

Un formulari fa el contrari: recull el que hi escriu qui el llegeix.

I després ho envia a un servidor.

És l’única part d’un document HTML que parla cap enfora.

En aquesta activitat el construiràs camp a camp, i veuràs amb els teus ulls què arriba a l’altra banda.

Entorn de treball

Per veure les dades que envia un formulari et cal un servidor que les rebi.

N’hi ha un d’engegat a https://xtec-form.netlify.app, i és prou petit per llegir-lo sencer.

No has d’instal·lar res.

Obre’l: a la pàgina d’inici hi ha un formulari amb un camp.

Escriu-hi el teu nom i fes clic a Envia:

El navegador porta les dades a la URL /form, i el servidor et torna un document nou amb el que ha rebut:

Aquestes dues línies són tot el que fa el servidor:

ts
app.get("/form", (c) => c.html(report("GET", c.req.queries())));

app.post("/form", async (c) =>
  c.html(report("POST", await c.req.parseBody({ all: true }))),
);

No cal que les entenguis ara: report només dibuixa la taula que acabes de veure.

Al final de l’activitat aquest servidor serà teu.

Formulari

Ara el formulari el faràs tu.

Es declara amb l’element <form>:

html
<form action="https://xtec-form.netlify.app/form">

</form>

Action

L’atribut action diu a quina URL s’han d’enviar les dades.

El teu document és un fitxer del teu ordinador, i el servidor que les rep és un altre lloc web: per arribar-hi cal l’adreça sencera.

És la diferència entre un enllaç relatiu i un d’absolut que vas veure a Enllaç.

Al final de l’activitat publicaràs el teu servidor, i llavors el formulari i el servidor seran el mateix lloc: l’adreça tornarà a ser /form.

Method

L’atribut method diu com hi viatgen les dades.

Si no el declares, el navegador fa servir GET i les enganxa al final de la URL, darrere d’un ?.

Envia aquest formulari:

html
GET
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <title>GET</title>
</head>
<body class="prose p-5">
  <form action="https://xtec-form.netlify.app/form">
    <input type="text" name="nom" value="Eva">
    <button type="submit" class="rounded bg-sky-700 px-3 py-1 text-white">Envia</button>
  </form>
</body>
</html>

Estàs llegint una vista prèvia.

Inicia sessió amb Google per llegir la pàgina completa.

Inicia sessió amb Google

Amb qualsevol compte de Google. Només et demanarem que acceptis les condicions del servei.