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 la sessió amb Google per llegir la pàgina sencera.

Inicia la sessió amb Google

Només et demanarem que acceptis les condicions del servei.