Formuláře

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

Všechny články z kategorie

Stylování inputu range

Stylování <input type=range>

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

UX políčka pro datum narození

UX políčka pro datum narození

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

Ověřování inputu pro zadávání URL webu

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

Barva ukazatele caret-color

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

Jak zadávat datum?

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

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

Reset políčka pro nahrávání souboru

Resetování <input type=file>

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

Proč a jak používat :focus stav

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.

Input

HTML značka <input>

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

Přihlašování pomocí PINu

Přihlašování pomocí PINu

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

Textarea s automatickou výškou

Automatická výška <textarea>

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

Upload velkých souborů v JS/PHP

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í e-mailu

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

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

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

Tlačítko na webu

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

Responsivní vyhledávání

Responsivní hledací formulář

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

Posice kursoru v poli

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

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

Atribut autocapitalize

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

Mezera v PSČ

Mezera v PSČ

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

Proč nepoužívat selectbox

Proč nepoužívat <select>

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

Popis formulářového políčka

Popisek formulářového pole

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

Before a after u inputu

Before a after u <input>u

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

Autocomplete

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

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

Hodnota vybraného radio inputu

Hodnota zaškrtnutého radio <input>u

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

Okamžitá validace po zadání znaku

Validace po zadávání znaků

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

Minlength

Atribut minlength

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

Atribut novalidate

Atribut novalidate

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

Maximální délka pole

Maximální počet znaků

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

Duplikování položek formuláře v JS

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

HTML značka <output>

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

Zablokování psaní do <input>u

Jak zakázat psaní do <input>u

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

Tabindex

Tabindex

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

Označení povinných položek

Označení povinných položek

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

Textarea

Textarea

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

20 nejhorších chyb HTML formulářů

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

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

Selektory :valid a :invalid

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

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ů

Zvyšování hodnoty inputů

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

HTML tlačítko <button>

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

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řesun focusu

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

Napodívání přes <datalist>

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>.

CSS reset formulářů

Formuláře a CSS reset

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

Onclick z klávesnice

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í.

Rozbalovací nabídka <select>

HTML značka <select>

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

Zapamatování formulářových polí

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 jako tlačítko

Odkaz vypadající jako tlačítko

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

AJAX upload souborů

Upload souborů bez obnovení stránky

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

Stylování formulářových prvků

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áře

Atribut pattern pro formulářové prvky

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

Tag <label> a atribut for

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?