Agenda
Struktur
Styling
Tilgængelighed
Håndtering af data
Øvelser
Agenda
Agenda
Struktur
Styling
Tilgængelighed
Håndtering af data
Øvelser
I denne uge
Forms
Forms i HTML
Hvorfor skal vi bekymre os om webformularer?
-
De driver internettet (interaktion)
-
login, køb, kontakt, søgning, tilmelding osv.
-
-
De påvirker bundlinjen
-
De er komplekse i praksis
-
De er allestedsnærværende
-
osv.
De er grænsefladen mellem mennesker og systemer. Hvis vi laver dem dårligt, mister vi data, brugere og tillid.
Sikre sig, at de rigtige data er angivet
Standardiseret
Vi stiller ingen spørgsmål, vi udfylder bare formularen
Fysisk modpart
Struktur
Papirblanketten viser, at vi altid har haft brug for struktur og overskrifter. I webformularer handler det bare om at omsætte de samme principper til kode – men med ekstra fordele som autofyld, validering og tilgængelighed.
Hvor støder vi på forms?
Hvilke udfordringer – hvis nogle – har vi oplevet?
Sæt jer sammen med sidemakkeren...
Eksempler
Login
Search
Facebook post
Checkout
<label>Anatomien
<label>form lingo
Anatomien
Indsaml data og send til server
Form
<form>
</form>Form
<form>
<label>Label</label>
</form>Form
<form>
<label>Label</label>
<input>
</form>Form
<form>
<label>Label</label>
<input>
<p>Error message</p>
</form>Form
<form>
<label>Label</label>
<input>
<p>Error message</p>
<button>Submit button</button>
</form>Form
<form>
<label>Label</label>
<input>
<p>Error message</p>
<button>Submit button</button>
</form>
Form
->
"secret"
Input type
<input type=" ">text
number
radio
checkbox
tel
date
<input type=" ">text
number
radio
checkbox
tel
date
Enkelt linje tekstfelt (standard)
Input type
<input type=" ">text
number
radio
checkbox
tel
date
Numre/cifre
Input type
<input type=" ">text
number
radio
checkbox
tel
date
Input type
<input type=" ">text
number
radio
checkbox
tel
date
Radioknap
Input type
<input type=" ">text
number
radio
checkbox
tel
date
Afkrydsningsfelt
Input type
<input type=" ">text
number
radio
checkbox
tel
date
Telefonnummer
Input type
<input type=" ">text
number
radio
checkbox
tel
date
Dato
Input type
Input type
Radios & checkboxes
Radios & checkboxes
radio buttons
checkboxes
Radio eller checkbox?
Vælg din favorit
- Spider-man
- Superman
- Batman
radio buttons
Vælg toppings
- Ost
- Tomater
- Skinke
checkboxes
Radio eller checkbox?
Checkbox
<input type="checkbox">
<label>Accept terms</label>?
Checkbox
<input type="checkbox">
<label>Accept terms</label><label>
<input type="checkbox">
Accept terms
</label>vs.
øvelse 1
Sæt de rigtige typer
Sæt de rigtige typer på hvert input-felt
(Lad den være åben)
Sammenkobling
Label ↔ Input
Dette gør feltet tilgængeligt for skærmlæsere og giver brugeren en større klik-flade, da man kan klikke på <label> for at fokusere input-feltet.
Sammenkobling
Label ↔ Input
Label/input association
Label/input association
<input type="checkbox" id="my-id">
<label for="my-id">Whole row</label>Label/input association
<label for="my-id">
<input id="my-id" type="checkbox">
Whole row
</label>
øvelse 2
Forbind labels og inputs
Brug for og id til at forbinde de respektive labels og input-felter
HTML tags gør det klart for browseren, hvad betydningen af en side og dens indhold er
og skærmlæsere
Semantik
HTML
<header>
<search>
<nav>
<main>
<article>
<aside>
<footer>Ikke-semantisk
Semantisk
vs.
<div class="list">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div><ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Ikke-semantisk
Semantisk
vs.
<div class="article">
<div>Artikel Titel</div>
<div>Skrevet af Forfatter</div>
<div>Artikel indhold her...</div>
</div><article>
<header>
<h1>Artikel Titel</h1>
<p>Skrevet af Forfatter</p>
</header>
<p>Artikel indhold her...</p>
</article>Ikke-semantisk
Semantisk
vs.
<div class="nav">
<a href="/">Home</a>
<a href="/about">about</a>
<a href="/contact">Contact</a>
</div><nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Det rigtige tag og de rigtige attributter sikrer en funktionsdygtig og tilgængelig formular
Gruppér relaterede inputs
Når flere inputs hører sammen (fx radioknapper eller checkboxes), skal de pakkes i et <fieldset> med en <legend>.
Skærmlæsere forstår, at felterne hører til samme overskift.
<form>
<fieldset>
<legend>
<h3>Choose your favorite superhero</h3>
</legend>
<label for="spiderman">
<input type="radio" id="spiderman">
Spider-man
</label>
...
</fieldset>
<button>Submit</button>
</form>
Giv felterne et navn
Alle felter i en formular skal have tilknyttet et unikt navn via name-attributten.
Radios og checkbokse, der hører sammen skal dele navn og have en værdi via value-attributten.
<form>
...
<label for="spiderman">
<input
type="radio"
id="spiderman"
name="superhero"
value="spiderman">
Spider-man
</label>
<label for="spiderman">
<input
type="radio"
id="superman"
name="superhero"
value="superman">
Superman
</label>
...
<button>Submit</button>
</form>
øvelse 3
Fieldset/Legend
Tilføj nedenstående HTML-attributter og -tags til den eksisterende form
- fieldset/legend
- name="superhero"
- value
Vigtig attribut
bruges til at identificere felterne i formularindsendelser
nameNogle input-typer deler også det samme navn, hvilket er vigtigt at bemærke, fordi det tillader den samme dataværdi at have flere værdier.
name=value
Det, der samles op...
øvelse 4
Angiv navn for alle inputs
Brug name til at navngive de respektive input-felter
Andre form-controls
<form>
<select></select>
<textarea></textarea>
</form>m.fl.
Textarea
Textarea
Textarea
<form>
<label for="message">Besked</label>
<textarea name="message" id="message"> </textarea>
</form>rows, cols, resize etc.
Ligesom tekst-input – bare med flere linjer
start-tag
slut-tag
Select
Select
<form>
<label for="pet-select">Yndlingsdyr</label>
<select id="pet-select" name="pet">
<option value="">--Vælg et dyr--</option>
<option value="dog">Hund</option>
<option value="cat">Kat</option>
</select>
</form>plenum-øvelse
Spot fejlene
Sæt jer sammen i små grupper og find så mange fejl som muligt. Vi kigger på det i plenum efterfølgende.
