Moderní tvorba webových aplikací

O webu

Formuláře

Návody a tipy ohledně tvorby a vylepšování formulářů.

Poskakování obsahu akčních tlačítek

Jak vyřešit problém s poskakováním obsahu, když se změní textace nebo tučnost tlačítka.

9 minut

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

Odeslání formuláře tlačítkem mimo něj

Jak odeslat formulář tlačítkem, které je mimo formulář.

3 minuty

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Stylování <input type=range>

Jak docílit vlastního vzhledu range „slideru“.

7 minut

UX políčka pro datum narození

Jak usnadnit uživatelům zadávání data narození.

7 minut

Jak udělat <input> pro zadávání adresy webu

Jak vytvořit políčko pro URL webové stránky a správně ho validovat.

4 minuty

Barva ukazatele caret-color

CSS vlastnost caret-color dokáže obarvit blikající ukazatel ve formulářových polích.

2 minuty

Zadávání kalendářního data

Pohodlné zadávání kalendářního data ve formulářích.

5 minut

Resetování <input type=file>

Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.

3 minuty

Jak používat CSS stav :focus

Proč je důležité stylovat stav :focus. Jak toho automaticky docílit a jaké jsou s tím problémy.

12 minut

HTML značka <input>

Všechny varianty značky <input>, možné atributy, vysvětlení a ukázky.

13 minut

Přihlašování pomocí PINu

Kdy a proč používat ve webových aplikacích přihlašování pomocí PIN kódu.

6 minut

Automatická výška <textarea>

Jak zajistit, aby se výška textového pole přizpůsobovala délce textu.

4 minuty

Upload obrovských souborů v JS/PHP

Jak umožnit návštěvníkům nahrát soubory jako videa v řádech MB/GB s progress barem.

7 minut

Napovídání poskytovatele e-mailu

Jak usnadnit vyplňování e-mailové adresy automatickým napovídáním poskytovatele.

6 minut

Kam umístit popisky formuláře

Jak umístit popisky formulářových prvků, aby bylo vyplňování formuláře co nejpohodlnější.

7 minut

Uložení stavu před opuštěním stránky

Jakým způsobem uložit stav aplikace/formuláře před opuštěním stránky.

7 minut

Tlačítko na webu

Jaké HTML značky používat pro tlačítka na webových stránkách a aplikacích.

7 minut

Responsivní hledací formulář

Jak vytvořit responsivní vyhledávací formulář, kde se políčko a tlačítko přizpůsobuje šířce.

6 minut

Umístění kursoru v poli

Jak v JavaScriptu zjistit posici, na které je kursor v textovém poli.

3 minuty

Maskování a zobrazování hesla ve formuláři

Je lepší heslo ve formuláři zobrazovat, nebo ho maskovat pomocí hvězdiček?

13 minut

Atribut autocapitalize

HTML atribut autocapitalize slouží k nastavení automatického přepnutí na velká písmena u dotykových klávesnic.

6 minut

Mezera v PSČ

Jak a zda vůbec automaticky odsazovat uživatelem zadané znaky PSČ do formulářového políčka.

4 minuty

Proč nepoužívat <select>

Proč se snažit vyhnout používání rozbalovací nabídky <select> za každou cenu.

16 minut

Popisek formulářového pole

Jakým způsobem řešit popisky formulářových prvků.

6 minut

Before a after u <input>u

Funguje, nebo nefunguje použití :before a :after u <input>ů?

3 minuty

Automatické vyplňování formulářů

Pomocí atributu autocomplete jde usnadnit a zrychlit vyplňování formulářů.

4 minuty

Hodnota zaškrtnutého radio <input>u

Jak v JavaScriptu zjistit hodnotu označeného radio políčka.

3 minuty

Validace po zadávání znaků

Jak okamžitě reagovat na zadávání znaků do pole během psaní.

6 minut

Atribut minlength

HTML atribut minlength stanovuje minimální počet znaků, který musí být v políčku.

2 minuty

Atribut novalidate

HTML atribut novalidate zabrání výchozí HTML 5 validaci formulářů.

3 minuty

Maximální počet znaků

HTML atribut maxlength omezuje počet znaků ve formulářovém poli.

4 minuty

Přidání dalšího textového pole

Jak umožnit kopírování/přidávání dalších textových polí do formuláře.

5 minut

HTML značka <output>

Značka <output> slouží k vypsání výsledku závislého na předchozí uživatelské akci.

5 minut

Jak zakázat psaní do <input>u

V jakých případech a jak zamezit psaní do formulářového políčka.

6 minut

Tabindex

Atribut tabindex slouží k uspořádání položek pro procházení klávesnicí.

4 minuty

Označení povinných položek

Jak elegantně ve formuláři označit povinné položky atributem required.

6 minut

Textarea

HTML značka <textarea> – jaká jsou její specifika.

6 minut

20 největších chyb formulářů na webu

Jakým chybám se vyvarovat při tvorbě formulářů na webu.

13 minut

CSS selektory :valid a :invalid

CSS selektory :valid a :invalid umí rozpoznat správně nebo špatně vyplněné formulářové políčko.

3 minuty

Přístup k prvkům formuláře v JS

Jakými způsoby je možné získávat hodnoty prvků formuláře v JavaScriptu.

5 minut

Zvyšování hodnoty inputů

Jak zpříjemnit zadávání číselných hodnot nebo času do <input>ů tlačítky plus a mínus.

4 minuty

Značka <button>

Tlačítko <button> v HTML, možné problémy v Internet Exploreru a jak je vyřešit.

4 minuty

Stylování formulářových políček a tlačítek

Které CSS vlastnosti si ohlídat při dosahování perfektního stylu vstupní políček a odesílacích tlačítek.

4 minuty

Plynulý přesun focusu

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

2 minuty

Našeptávání značkou <datalist>

Pro napovídání možností při vyplňování <input>u lze v HTML 5 použít značku <datalist>.

3 minuty

Formuláře a CSS reset

Dopad * {margin: 0; padding: 0} na formulářové prvky.

2 minuty

Událost onclick na různých elementech

Test události onclick na různých elementech při vyvolání myší i klávesnicí.

4 minuty

HTML značka <select>

Popis, možnosti a vylepšení rozbalovacího výběru, HTML značky <select>.

3 minuty

Automatické zapamatování formulářů

Při vyplňování delších formulářů se je hodí obsah průběžně ukládat. Jak na to?

4 minuty

Odkaz vypadající jako tlačítko

Odkaz jako tlačítko, nebo tlačítko jako odkaz? Postup, jak z odkazu vyrobit tlačítko a naopak.

3 minuty

Upload souborů bez obnovení stránky

Jak vytvořit ajaxové nahrávání souborů na server bez obnovení stránky.

3 minuty

Vlastní vzhled formulářů

Jak vytvořit originálně vypadající formulář, aniž by házel uživatelům klacky pod nohy?

5 minut

Atribut pattern pro formulářové prvky

Validace formulářů regulárními výrazy na straně klienta bez JavaScriptu.

1 minuta

Značka <label> a atribut for

Značka <label> slouží ke svázání popisku s formulářovým prvkem. Kdy použít atribut for?

2 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025