Fyrirlestur — Töflur, listar, og form

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Töflur

• Við notum töflur þegar við vinnum með töfluleg gögn
  • Gögn sem endurtaka sömu dálka yfir margar raðir, t.d. skráningar, listar af svipuðum hlutum, eða samantektir.
• Skilgreint í töflumódeli í staðli

---

• <table> skilgreinir töflu
• <caption> lýsir gögnum í töflu
• <thead> fyrirsagnir í haus töflu, t.d. listi af dálkum
• <tbody> meginmál töflu
• <tfoot> fótur töflu, samantekt, t.d. samtölur

---

• <tr> er röð af reitum í töflu
• <th> er reitur með fyrirsögn í töflu, getur komið fyrir innan <tr> bæði í haus og í byrjun raða
• <td> er reitur með gögnum

---

Attributes á töflum

• colspan á <th> og <td> — tala, stærri en 0 sem skilgreinir hversu marga dálka reitur nær
• rowspan á <th> og <td> — tala, stærri en 0 sem skilgreinir hversu margar raðir reitur nær
• scope á <th> — skilgreinir hvort <th> eigi við röð (row) eða dálk (col)

---

Dæmi um töflu

• Tafla

---

Raðaðir listar

• <ol> lýsir röðuðum lista (ordered list)
• <ul> lýsir óröðuðum lista (unordered list)
• <li> skilgreinir hlut í <ol> eða <ul> (list item)

---

<dl>

• <dl> lýsir nafngildis lista (description list), t.d. skilgreiningar, spurningar & svör
• notað með <dt> (term) og <dd> (definition)

---

Valmynd

Oftast er <nav>, <ul> (<menu> sem hagar sér eins og <ul> en merkingarfræðilega skilgreinir valmynd) og <a> notað saman til að útbúa valmynd:

<nav>
  <menu>
    <li><a href="/">Forsíða</a></li>
    <li><a href="/about">Um</a></li>
  </menu>
</nav>

---

Dæmi um lista

• Listar

---

Form

• <form> stendur fyrir samansafn af gögnum sem hægt er að vinna með og senda á þjón til úrvinnslu, hefur nokkur attribute, t.d.
  • method attribute skilgreinir hvort GET eða POST HTTP aðgerð (notum yfirleitt GET nema við séum að senda á bakenda)
  • action attribute skilgreinir hvert form sendir, á URL

---

Form element

• <input> er gagna reitur sem leyfir notanda að slá inn eða eiga við gögn
• <label> merkir reiti í formi
  • Skilgreinum hérumbil alltaf

---

• <textarea> er reitur fyrir margar línur af texta
• <fieldset> hópar hluta af formi saman, t.d. fyrir persónuupplýsingar
• <legend> er heiti á <fieldset>

---

Tegundir af input

• — <input type="text">
• — <input type="radio">
• — <input type="checkbox">, hópað saman eftir name
• — <input type="search">
• — <input type="email">

---

• — <input type="url">
• — <input type="tel">
• — <input type="number">
• — <input type="range">
• — <input type="date">

---

• — <input type="week">
• — <input type="time">
• — <input type="datetime-local">
• — <input type="color">

---

Attributes á input

• name — nafn á breytu, það sem sendist á bakenda til úrvinnslu
• required — innsláttar krafist
• placeholder — texti sem er til staðar þar til slegið er inn

---

• disabled hvort hægt sé að skrá gögn eða ekki.
• novalidate — ekki keyra villutjékk
• o.fl.

---

Fellilistar

• <select> skilgreinir fellilista þar sem hægt er að velja atriði
• <option> skilgreinir hvert atriði, hefur value attribute ef gildið á að vera ólíkt því sem birt er
• <optgroup> innan <option> hópar möguleikum saman

---

• <datalist> getur einnig innihaldið <option>
• Vísum í úr <input> með list attribute
• Fáum reit með „auto complete“

---

Dæmi um form

• Form