Formuláře 2

33. hodina WBA


Matěj Cajthaml — SSPŠ

©

Opakování

Jak vytvoříme formulář v HTML? Jaké používáme prvky? K čemu slouží atribut name?
Jak funguje responzivita na webových stránkách?
Jak se liší třída a identifikátor?
Co dělá pseudotřída :nth-child(3n)?
Jak zapisujeme CSS pravidlo? Jaké má části?

V jakých formátech můžeme odesílat data (ve formulářích)?

Výběr z možností — select

Výběr

Práce

Způsoby předávání dat

  • data se předávájí pomocí protokolu HTTP
  • formuláře znají dva typy a to GET a POST
  • názvy reflektují metody odesílání přímo v HTTP

Způsob GET

  • způsob předávání dat pomocí parametrů v URL
  • všechny prvky formuláře se předají v parametrech
  • jménem parametru bude atribut name
  • hodnota parametru bude vyplněná hodnota prvku

Jaké prvky nelze předávat pomocí URL parametrů?

Existuje nějaký limit velikosti URL adresy?

Způsob GET

Ukázka

Způsob POST

  • data se předávají v tělu požadavku, jsou více skrytá
  • lze předávat komplikovanější data (např. soubory)
  • data si můžeme prohlédnout např. v DevTools

Způsob POST

Ukázka

Jaký způsob předávání dat je bezpečnejší?

V jakých formátech můžeme odesílat data (ve formulářích)?

Jak můžeme nějaký element umístit nad prvek?

Pozicování

  • všechny prvky na stránce se pozicují různými způsoby
  • existuje: static, relative, absolute, fixed, sticky
  • jednotlivé typy si ukážeme

Umístění prvků

  • nové vlastnosti: top, bottom, left, right
  • říkají, jak se budou prvky umištovat ze stran
  • jak fungují, si ukážeme u jednotlivých typů pozicování

Pozicování — static

  • statické, neměnné
  • základní pozicování, co známe
  • prvky se umistují a řídí podle obyčejných vlastnosti (pomocí display) a místa na stránce
  • nefungují vlastnosti top, bottom, left, right

Pozicování — relative

  • relativní
  • prvek se umístí tam, jako při statickém ale můžeme ho posouvat
  • fungují vlastnosti top, bottom, left, right

Pozicování — fixed

  • fixované
  • prvek se na stránce nepohybuje, je vázán na velikost obrazovky
  • prvek je nad ostatními, na jiné vrstvě a neovlivňuje jiné prvky

Pozicování — absolute

  • absolutní
  • prvek se zachytí na nejbližší prvek, na kterém je nějaké pozicování přesně nastavené (relative, absolute, ...)
  • popř. na body
  • jiná vrstva

Pozicování — sticky

  • lepící
  • mění se mezi stavy relative a fixed
  • podle skrolování na stránce - dokud nenalezne dané odsazení
  • potom se přilepí a hýbe se během skrolování

Vrstva

  • vlastnost z-index
  • číslo určující vrstvu
  • čím vyšší číslo, tím bude vykresleno "ve předu"
  • i záporné hodnoty

Jak můžeme nějaký element umístit nad prvek?

K čemu pozicování slouží?

Srdíčko

Práce

Všechny strany

Práce

Proč my?

Práce

Profil

Práce

https://ssps.cajthaml.eu/2-wba/work/34-profil

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/