Obrazci in validacija¶

Zakaj so obrazci tako pomembni¶

Obrazci so trenutek, ko spletna stran iz pasivne predstavitve postane interaktivna aplikacija. Prek obrazca uporabnik:

vnese podatke,
izbere možnosti,
pošlje zahtevo strežniku,
sproži spremembo stanja sistema.

Zato je obrazec eden najpomembnejših mostov med HTML, HTTP, Flaskom in bazo.

Osnovna zgradba obrazca¶

<form action="/dodaj" method="post">
  <div>
    <label for="naslov">Naslov</label>
    <input id="naslov" name="naslov" type="text" required>
  </div>

  <div>
    <label for="avtor">Avtor</label>
    <input id="avtor" name="avtor" type="text" required>
  </div>

  <div>
    <label for="leto">Leto izida</label>
    <input id="leto" name="leto" type="number" min="0">
  </div>

  <button type="submit">Shrani</button>
</form>

Ta primer je majhen, a vsebuje skoraj vse bistvene ideje.

Ključni deli obrazca¶

`form`¶

Element form pove, da gre za skupino polj, ki se bodo oddala skupaj.

`action`¶

Pove, kam se podatki pošljejo.

`method`¶

Pove, kako se bodo podatki poslali. Pri tem predmetu sta ključni metodi:

get
post

`name`¶

To je ime polja, prek katerega ga bo strežnik prepoznal. Če name manjka, se vrednost običajno ne pošlje tako, kot pričakujemo.

`label`¶

label je izjemno pomemben. Ni samo vizualni napis. Pomaga pri:

dostopnosti,
boljšem kliku na polje,
bolj razumljivem vnosu.

`button`¶

Gumb naj bo gumb. Za oddajo obrazca uporabi button type="submit".

Povezava med `label` in poljem¶

Zelo pomembna praksa:

<label for="naslov">Naslov</label>
<input id="naslov" name="naslov" type="text">

Atribut for naj se ujema z id polja. To je ena najbolj uporabnih in hkrati najpogosteje zanemarjenih malenkosti.

Pogosti tipi polj¶

Besedilo¶

<input type="text" name="naslov">

Število¶

<input type="number" name="leto">

E-pošta¶

<input type="email" name="email">

Geslo¶

<input type="password" name="geslo">

Večvrstično besedilo¶

<textarea name="opis"></textarea>

Izbira ene možnosti¶

<select name="zanr">
  <option value="roman">Roman</option>
  <option value="poezija">Poezija</option>
</select>

Potrditev¶

<input id="strinjam" type="checkbox" name="strinjam">
<label for="strinjam">Strinjam se s pogoji</label>

`GET` in `POST` pri obrazcih¶

To je zelo pomembna razlika.

Kdaj uporabiti `GET`¶

iskanje,
filtriranje,
navigacija po rezultatih,
dejanja, ki ne spreminjajo podatkov.

Primer:

<form action="/iskanje" method="get">
  <label for="q">Išči</label>
  <input id="q" name="q" type="search">
  <button type="submit">Išči</button>
</form>

Pri GET se parametri običajno vidijo v URL-ju.

Kdaj uporabiti `POST`¶

dodajanje podatkov,
urejanje,
prijava,
pošiljanje sporočil,
dejanja, ki spreminjajo stanje.

To ni samo stvar stila. Gre za razumevanje pomena zahteve.

Klientska validacija¶

HTML ponuja osnovno pomoč pri preverjanju podatkov:

required
min
max
minlength
maxlength
type="email"
pattern

Primer:

<input
  id="uporabnisko_ime"
  name="uporabnisko_ime"
  type="text"
  required
  minlength="3"
  maxlength="20">

To je koristno, ker uporabnik hitreje dobi povratno informacijo.

Strežniška validacija¶

Tu je treba biti zelo direkten: klientska validacija ni dovolj.

Strežnik mora podatke preveriti znova, ker:

uporabnik lahko pošlje zahtevo mimo obrazca,
polja se lahko izklopijo ali spremenijo,
podatki so lahko nepopolni ali zlonamerni.

Minimalna strežniška validacija pomeni vsaj:

ali polje obstaja,
ali je prazno,
ali je tip smiselno pravilen,
ali je vrednost v dovoljenem območju.

Povratna informacija uporabniku¶

Slab obrazec je tak, ki ob napaki samo “tiho ne dela”. Uporabnik mora razumeti:

katero polje je problem,
zakaj je problem,
kaj mora popraviti.

Primer sporočila:

<p class="error">Naslov in avtor sta obvezna.</p>

Dobre prakse za uporabnost¶

polja naj bodo jasno poimenovana,
ne zahtevaj nepotrebnih podatkov,
združi sorodna polja,
označi obvezna polja,
gumb naj ima jasen napis,
po uspehu uporabnika ne pusti v negotovosti.

Dobre prakse za dostopnost¶

vsak vhod naj ima label,
ne zanašaj se samo na placeholder,
napake naj bodo razumljive tudi brez barve,
logični vrstni red polj naj sledi normalni rabi,
izogibaj se nepotrebni kompleksnosti.

Po oddaji obrazca¶

Zelo koristna praksa je, da po uspešni oddaji uporabnika preusmeriš drugam. To prepreči ponovno oddajo ob osvežitvi strani.

Ta vzorec je znan kot:

POST -> Redirect -> GET

Ni nujno, da ga poimenuješ z angleško kratico, je pa dobro, da pokažeš logiko.

Pogoste napake¶

Manjka `name`¶

Potem Flask pogosto ne dobi podatkov, čeprav dijak misli, da jih bo.

`label` ni povezan s poljem¶

To zmanjšuje kakovost obrazca in dostopnost.

Vse se dela z `GET`¶

To je klasična začetniška napaka.

Samo HTML preverjanje¶

Če strežnik ničesar ne preveri, je rešitev krhka.

Gumb nima jasnega pomena¶

Pošlji, Shrani, Dodaj knjigo niso povsem ista sporočila. Jasnost pomaga.

Kontrolni seznam¶

1. Ali ima vsako polje name?
2. Ali ima vsako polje ustrezen label?
3. Ali sem pravilno izbral GET ali POST?
4. Ali ima obrazec smiseln action?
5. Ali so obvezna polja jasno označena?
6. Ali strežnik podatke preveri še enkrat?
7. Ali uporabnik vidi razumljivo napako?

Kaj naj dijak zna po tem poglavju¶

sestaviti osnovni obrazec,
povezati label in input,
izbrati med GET in POST,
uporabiti osnovno HTML validacijo,
razumeti, zakaj je strežniška validacija nujna,
pripraviti obrazec, ki je uporabniku dovolj prijazen.

Najbolj pomembno sporočilo

Obrazec ni samo skupek polj. Je dogovor med uporabnikom, brskalnikom, strežnikom in aplikacijo. Če dijak to razume, bo kasnejši backend precej manj skrivnosten.