1.html-form.md

title
HTML og form

HTML og form

Vefforritun

Ólafur Sverrir Kjartansson, [email protected]

---

HTTP aðferðir og <form>

• Þegar við búum til <form> getum við skilgreint hvort við notum GET eða POST með method attribute
• <form method="get"> sendir gögn með GET og setur allar breytur í query-string, t.d. http://example.org/?data=123
• <form method="post"> sendir gögn með POST og setur allar breytur í request body

---

<form method="get">

<form method="get" action="/get">
  <input type="text" name="data">
  <button>Senda</button>
</form>

---

app.get('/get', (req, res) => {
  res.send(`GET gögn: ${req.query.data}`);
});

---

Express og POST

• POST gögn koma sem straumur
  • req er EventEmitter
• Ekki jafn handhægt og að lesa GET gögn

---

<form method="post">

<form method="post" action="">
  <label>
    Nafn:
    <input type="text" name="name">
  </label>
  <button>Senda</button>
</form>

---

app.use((req, res, next) => {
  const chunks = [];
  req.on('data', (c) => chunks.push(c));
  req.on('end', () => {
    req.body = chunks.join();
    next();
  });
});

app.post('/post', (req, res) => {
  res.send(`POST gögn: ${req.body}`);
});

---

enctype

enctype (encoding type) á formi segir til um hvernig gögn í formi eru enkóðuð

• application/x-www-form-urlencoded er sjálfgefið
• gögn eru URL enkóðuð (t.d. ó verður %C3%B3) með & á milli reita (<input>, <select>, <textarea>)

---

• text/plain, ekki er átt við gögnin, þau eru sett sem key=value með \n á milli reita
• multipart/form-data, gögnum er streymt yfir með boundaries, notum þegar við höfum <input type="file">

---

body-parser middleware

• Vesen að vinna með POST gögn gegnum straum í hvert skipti
• Express 4.16+ hefur urlencoded parser middleware til að vinna með application/x-www-form-urlencoded gögn
  • app.use(express.urlencoded({ extended: true }));

---

• Styður líka application/json en við getum ekki útbúið <form> sem sendir JSON, en getum prófað með cURL
  • curl -H "Content-Type: application/json" -d '{"data": 123}' http://localhost:3000/
• Byggt á body-parser
• Oft notað þegar við smíðum og sendum gögn á vefþjónustur