Návody a tipy ohledně tvorby a vylepšování formulářů.
Formuláře
Všechny články z kategorie
Stylování <input type=range>
Jak docílit vlastního vzhledu range „slideru“.
UX políčka pro datum narození
Jak usnadnit uživatelům zadávání data narození.
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.
Barva ukazatele caret-color
CSS vlastnost caret-color dokáže obarvit blikající ukazatel ve formulářových polích.
Zadávání kalendářního data
Pohodlné zadávání kalendářního data ve formulářích.
Resetování <input type=file>
Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.
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.
HTML značka <input>
Všechny varianty značky <input>, možné atributy, vysvětlení a ukázky.
Přihlašování pomocí PINu
Kdy a proč používat ve webových aplikacích přihlašování pomocí PIN kódu.
Automatická výška <textarea>
Jak zajistit, aby se výška textového pole přizpůsobovala délce textu.
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.
Napovídání poskytovatele e-mailu
Jak usnadnit vyplňování e-mailové adresy automatickým napovídáním poskytovatele.
Kam umístit popisky formuláře
Jak umístit popisky formulářových prvků, aby bylo vyplňování formuláře co nejpohodlnější.
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.
Tlačítko na webu
Jaké HTML značky používat pro tlačítka na webových stránkách a aplikacích.
Responsivní hledací formulář
Jak vytvořit responsivní vyhledávací formulář, kde se políčko a tlačítko přizpůsobuje šířce.
Umístění kursoru v poli
Jak v JavaScriptu zjistit posici, na které je kursor v textovém poli.
Maskování a zobrazování hesla ve formuláři
Je lepší heslo ve formuláři zobrazovat, nebo ho maskovat pomocí hvězdiček?
Atribut autocapitalize
HTML atribut autocapitalize slouží k nastavení automatického přepnutí na velká písmena u dotykových klávesnic.
Mezera v PSČ
Jak a zda vůbec automaticky odsazovat uživatelem zadané znaky PSČ do formulářového políčka.
Proč nepoužívat <select>
Proč se snažit vyhnout používání rozbalovací nabídky <select> za každou cenu.
Popisek formulářového pole
Jakým způsobem řešit popisky formulářových prvků.
Before a after u <input>u
Funguje, nebo nefunguje použití :before a :after u <input>ů?
Automatické vyplňování formulářů
Pomocí atributu autocomplete jde usnadnit a zrychlit vyplňování formulářů.
Hodnota zaškrtnutého radio <input>u
Jak v JavaScriptu zjistit hodnotu označeného radio políčka.
Validace po zadávání znaků
Jak okamžitě reagovat na zadávání znaků do pole během psaní.
Atribut minlength
HTML atribut minlength stanovuje minimální počet znaků, který musí být v políčku.
Atribut novalidate
HTML atribut novalidate zabrání výchozí HTML 5 validaci formulářů.
Maximální počet znaků
HTML atribut maxlength omezuje počet znaků ve formulářovém poli.
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.
HTML značka <output>
Značka <output> slouží k vypsání výsledku závislého na předchozí uživatelské akci.
Jak zakázat psaní do <input>u
V jakých případech a jak zamezit psaní do formulářového políčka.
Tabindex
Atribut tabindex slouží k uspořádání položek pro procházení klávesnicí.
Označení povinných položek
Jak elegantně ve formuláři označit povinné položky atributem required.
Textarea
HTML značka <textarea> – jaká jsou její specifika.
20 největších chyb formulářů na webu
Jakým chybám se vyvarovat při tvorbě formulářů na webu.
CSS selektory :valid a :invalid
CSS selektory :valid a :invalid umí rozpoznat správně nebo špatně vyplněné formulářové políčko.
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.
Zvyšování hodnoty inputů
Jak zpříjemnit zadávání číselných hodnot nebo času do <input>ů tlačítky plus a mínus.
Značka <button>
Tlačítko <button> v HTML, možné problémy v Internet Exploreru a jak je vyřešit.
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.
Plynulý přesun focusu
Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.
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>.
Formuláře a CSS reset
Dopad * {margin: 0; padding: 0} na formulářové prvky.
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í.
HTML značka <select>
Popis, možnosti a vylepšení rozbalovacího výběru, HTML značky <select>.
Automatické zapamatování formulářů
Při vyplňování delších formulářů se je hodí obsah průběžně ukládat. Jak na to?
Odkaz vypadající jako tlačítko
Odkaz jako tlačítko, nebo tlačítko jako odkaz? Postup, jak z odkazu vyrobit tlačítko a naopak.
Upload souborů bez obnovení stránky
Jak vytvořit ajaxové nahrávání souborů na server bez obnovení stránky.
Vlastní vzhled formulářů
Jak vytvořit originálně vypadající formulář, aniž by házel uživatelům klacky pod nohy?
Atribut pattern pro formulářové prvky
Validace formulářů regulárními výrazy na straně klienta bez JavaScriptu.
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?