Při vytváření webové stránky je často potřeba přenášet data z uživatele na server a zpět. K tomu slouží formuláře, které uživatelům umožňují vyplňovat pole a odesílat data ke zpracování.
Možnosti formuláře jsou souborem dat, která jsou odesílána na server při odesílání formuláře. Každý parametr se skládá z názvu a hodnoty rozdělené znaménkem. Název parametru určuje, do kterého pole tvaru se hodnota vztahuje. Hodnota parametru je data zadaná nebo vybraná uživatelem v příslušném poli.
S přístupem k možnostem formuláře na Serveru je možné je zpracovat a provádět různé akce se získanými daty: ukládat do databáze, odesílat e-maily, aktualizovat další stránky a další.
Parametry polohy jsou zase údaje o aktuální poloze položky na webové stránce. Umožňují určit souřadnice prvku vzhledem k levému horním rohu stránky, stejně jako jeho rozměry a další vlastnosti. Nastavení polohy se často používá při vytváření interaktivních prvků a animací na webových stránkách.
V tomto článku se podíváme blíže na to, jak pracovat s parametry formuláře a parametry polohy, a také poskytneme příklady jejich použití v praxi.
Základní pojmy
Při práci s formuláři na webových stránkách je důležité porozumět dvěma základním pojmům: parametrům formuláře a parametrům polohy.
Parametry formuláře určete, která data budou odeslána pomocí formuláře na server. Zahrnují následující atributy:
| Atribut | Popis |
| action | Určuje adresu, na kterou jsou data odeslána po odeslání formuláře |
| method | Určuje způsob přenosu dat-GET nebo POST |
| enctype | Určuje způsob kódování dat před odesláním |
| name | Určuje jedinečný název pro formulář |
Nastavení polohy určují umístění a vzhled tvarových prvků. Zahrnují následující atributy a vlastnosti:
| Atribut / vlastnost | Popis |
| id | Identifikuje jedinečný identifikátor prvku formuláře |
| class | Určuje třídu (skupinu) prvku tvaru pro stylizaci |
| style | Určuje inline styly pro tvarový prvek |
| placeholder | Určuje textovou nápovědu do vstupního pole |
Znalost a správné použití parametrů tvaru a parametrů polohy pomáhá vytvářet funkční a esteticky atraktivní webové formuláře.
Analýza parametrů formuláře
action - je to atribut formuláře, který určuje adresu, na kterou musí být formulář odeslán. Obvykle je na serveru uvedena adresa URL obslužné rutiny formuláře.
method - je to atribut formuláře, který označuje metodu, která by měla být použita při odesílání dat formuláře na server. Nejčastějšími metodami jsou GET a POST.
name - je to atribut tvarových prvků, který udává jedinečný název pro každý tvarový prvek. Tento název se používá k odkazování na hodnotu položky formuláře na serveru.
value - je to atribut tvarových prvků, který určuje výchozí hodnotu prvku tvaru. Hodnotu lze předem vyplnit uživatelem nebo programově nastavit na straně serveru.
Příklady použití parametrů formuláře
Nastavení formuláře se používá k přenosu informací z uživatele na server při odesílání dat. Zvažte několik příkladů použití parametrů formuláře:
Příklad 1: Registrace uživatele
Registrační formulář na webu může obsahovat následující parametry:
- name-Uživatelské jméno
- e-mail-e-mail
- heslo-heslo
Uživatel vyplní pole formuláře a odešle data na server. Na serveru lze tyto možnosti použít k vytvoření nového uživatele v databázi.
Příklad 2: vyhledávací formulář
Vyhledávací formulář na webu může obsahovat následující možnosti:
- query - vyhledávací dotaz
- kategorie-kategorie vyhledávání (např. "vše", "zprávy","blogy")
Uživatel zadá vyhledávací dotaz a vybere kategorii vyhledávání, poté odešle formulář. Na serveru lze tyto možnosti použít k provedení vyhledávání v příslušné kategorii.
Příklad 3: recenze a komentáře
Formulář pro zasílání recenzí a komentářů na webu může obsahovat následující možnosti:
- name-jméno autora
- message - text zprávy
- parent-ID rodičovského komentáře (pokud je to odpověď na existující komentář)
Uživatel vyplní pole formuláře a odešle data. Na serveru lze tyto možnosti použít k uložení zprávy do databáze a jejímu zobrazení na stránce.
To jsou jen některé příklady použití parametrů formuláře. V závislosti na konkrétních úkolech a požadavcích se mohou parametry formuláře lišit a mohou mít jiné názvy.
Analýza parametrů polohy
Parametry polohy se používají k určení umístění prvků webové stránky vůči sobě navzájem. Existuje několik základních parametrů, které lze nastavit pro položky:
| Parametr | Popis |
|---|---|
| position | Určuje typ umístění prvku (static, relative, absolute, fixed nebo sticky). |
| top, right, bottom, left | Definují odsazení vzhledem k okrajům nadřazeného prvku (lze použít spolu s position: relative nebo position: absolute). |
| z-index | Určuje pořadí překrytí prvků (lze použít spolu s position: absolute nebo position: relative). |
| float | Určuje obtékání prvků jinými prvky (left, right nebo none). |
Pomocí těchto možností můžete vytvářet komplexní rozvržení a spravovat umístění položek na stránce.
Příklady použití parametrů polohy
Nastavení polohy umožňuje spravovat umístění položek na webové stránce. Zde je několik příkladů použití těchto parametrů:
1. Nastavení " position: absolute;"
S tímto parametrem lze prvek absolutně umístit vzhledem k jeho nadřazenému prvku. Můžete například vytvořit prvek, který bude vždy přitlačen na pravý horní roh stránky, bez ohledu na posouvání:
2. Možnost " float: left;"
Tato možnost umožňuje" obtékat " prvky, tj. umístit je kolem jiných prvků. Můžete například vytvořit dva prvky bloku, které budou umístěny v řadě:
3. Možnost " display: flex;"
S tímto parametrem můžete vytvářet flexibilní kontejnery, které vám umožní snadno spravovat umístění prvků v sobě. Můžete například vytvořit kontejner, ve kterém budou prvky umístěny v řadě:
To jsou jen některé příklady použití parametrů polohy. S jejich pomocí lze dosáhnout různých efektů na webové stránce a vytvořit jedinečný design.
Výsledky
Příklad: Pokud máme formulář pro zanechání komentáře, můžeme nastavit možnost "required" pro pole pro zadání názvu, aby jej uživatel před odesláním povinně vyplnil.
Nastavení polohy - jsou to hodnoty, které určují umístění prvků formuláře na stránce. Umožňují upravit umístění prvků vzhledem k jiným prvkům nebo vzhledem k okrajům stránky.
Příklad: Můžeme nastavit možnost "margin" pro tlačítko odeslat formulář, aby ustoupil od ostatních prvků na stránce a vytvořil kolem sebe prázdný prostor.
Znalost možností formuláře a nastavení polohy vám pomůže vytvářet a konfigurovat formuláře na vašem webu flexibilněji a uživatelsky přívětivěji.