Label je velmi důležitý prvek webové stránky, který vám umožňuje propojit textovou značku s určitým prvkem formuláře, jako je vstupní pole (input). Ve výchozím nastavení je však label umístěn nalevo od inputu a co když je nutné umístit štítek nad prvek?
Existuje jednoduchý a srozumitelný způsob, jak udělat label nad input. K tomu je třeba použít zvláštní přístup a techniky stylizace. K dosažení požadovaného výsledku je nutné použít HTML a CSS.
Nejprve je nutné zabalit input a label do nádoby, jako je div. Poté nastavíme nádobu na požadovanou šířku a výšku a vlastnost position: relative, která umožňuje umístit prvky v ní obsažené ve vztahu k němu samotnému. Dále pro label nastavíme vlastnost position: absolute a určíme umístění pomocí vlastností top a left. Tímto způsobem budeme moci přesunout štítek nad vstupní pole.
Co je label a input
Label je důležitou součástí dostupnosti formuláře a pomáhá uživatelům pochopit, co přesně je třeba zadat nebo vybrat do vstupního pole. Kromě toho kliknutí na textovou značku automaticky aktivuje příslušnou položku input zlepšení použitelnosti formy.
Input - je to prvek formuláře, který uživatelům umožňuje zadávat data. Může to být textové pole (input type="text"), pole pro zadání hesla (input type="password"), zaškrtávací políčko (input type="checkbox") a mnoho dalších typů.
Pro propojení značky label s prvkem input používá se atribut for pro label a ID id pro input. Nastavením atributu for ve významu id prvek input, můžeme vytvořit spojení mezi label a input.
Například pro vytvoření značky nad textovým vstupním polem vytvoříme prvek label s atributem for, který označuje id prvek input. Poté vytvoříme prvek input s jedinečným id, který odpovídá hodnotě atributu for do label. Tímto způsobem vytváříme spojení mezi štítkem a vstupním polem.
Metody vytváření label nad input
Existuje několik způsobů, jak vytvořit label přes input v HTML:
1. Pomocí značky: je možné zabalit prvky input a label do kontejneru nebo přivázat label k inputu prostřednictvím atributu for. Například:
2. Pomocí pseudoelementů CSS: můžete přidat pseudoelement:: before nebo:: after k prvku input a pomocí CSS jej stylizovat tak, aby vypadal jako label nad input. Například:
input::before3. Prostřednictvím polohování CSS: k umístění labelu nad input lze použít absolutní nebo relativní polohování. Například:
.label .label > input
Všechny tyto metody vám umožňují vytvořit label nad input a pomáhají zlepšit uživatelské rozhraní formuláře tím, že je přehlednější a přístupnější.
Metoda 1: Použití značky label s atributem for
Metoda použití značky label s atributem for umožňuje snadné propojení značky (label) se vstupním polem (input) na webové stránce.
K vytvoření takového spojení je nutné:
- Definovat značku label a umístit ji před vstupní pole.
- Zadejte uvnitř značky label text značky, který má být zobrazen nad vstupním polem.
- Nastavit atribut for na značku label a nastavit jeho hodnotu na hodnotu atributu id u vstupního pole, se kterým je třeba navázat spojení.
- Identifikujte značku input s atributem id, který musí odpovídat hodnotě atributu for U přidružené značky label.
V důsledku toho prohlížeč spojí štítek se vstupním polem a po kliknutí na štítek se zaostření automaticky nainstaluje do vstupního pole. To zvyšuje použitelnost formuláře a zlepšuje dostupnost pro uživatele.
V tomto příkladu je štítek " Název:"spojen se vstupním polem pomocí značky label s atributem for=" name " a atributovou značkou input .
Metoda 2: Umístění input uvnitř značky label
Druhou metodou, jak vytvořit label nad input, je umístit input do značky label. To je jedna z výhod používání značky label, protože vám umožňuje propojit štítek s prvkem tvaru, aniž byste museli používat atribut for.
Pro implementaci této metody stačí zabalit input do značky label následovně:
| HTML kód | Výsledek |
|---|---|
| Zadejte jméno: | Zadejte jméno: |
V takovém případě se nad vstupním polem zobrazí text "Zadejte název:" a bude s ním automaticky spojen. Když kliknete na text " Zadejte název:"zaměření bude Přesměrováno na vstupní pole.
Použití této metody usnadňuje označování a činí kód srozumitelnějším. Poskytuje také širší oblast klepnutí pro aktivaci vstupního pole, což zlepšuje uživatelský zážitek.
Příklady použití
Příklad 1:
Tento příklad ukazuje, jak vytvořit label nad input pomocí HTML:
V tomto příkladu se nad vstupním polem vytvoří štítek "uživatelské jméno". Značka se váže na vstupní pole pomocí atributu " for "- V tomto případě"username". Při kliknutí na značku se tak zaostření dostane na příslušné vstupní pole.
Příklad 2:
V případě, že je vstupní pole přímo uvnitř položky label, není nutné k propojení štítku se vstupním polem použít atribut "for":
Пароль: V tomto příkladu je vytvořen štítek " heslo "a vstupní pole typu" password " je umístěno přímo v prvku label. Když kliknete na značku, zaostření se dostane i do vstupního pole.
Příklad 3:
Pro zlepšení dostupnosti můžete do štítku přidat atribut "title" A přidat další informace:
V tomto příkladu je přidán atribut " title "s hodnotou"Zadejte svou e-mailovou adresu". Když umístíte kurzor na značku, zobrazí se vyskakovací výzva se zadaným textem.
Příklad 4:
Štítek může obsahovat i prvky formátování textu:
V tomto příkladu značka " komentář "obsahuje prvek formátování textu , který zvýrazňuje slovo"volitelné". Text se zobrazí kurzívou.