Jak stylovat formuláře pomocí CSS: Průvodce pro začátečníky

Aplikace primárně shromažďují data prostřednictvím formulářů. Vezměte si například obecný přihlašovací formulář: existuje několik polí, kde mohou uživatelé zadávat informace, jako je jejich jméno, e-mail atd.

Za starých časů měly webové stránky prosté nudné formuláře HTML s žádné styly. To bylo předtím, než CSS všechno změnilo. Nyní můžeme pomocí nejnovějších funkcí CSS vytvářet zajímavější a živější formuláře.

Nepoužijte jen moje slovo. Níže je ukázka toho, jak vypadá typická forma HTML bez jakéhokoli CSS.

Tady je stejná forma, která ladila s trochou CSS .

V tomto výukovém programu vám ukážeme, jak znovu vytvořit výše uvedený formulář a několik dalších úžasných úpravy, které můžete implementovat, abyste vytvořili vizuálně působivé a uživatelsky přívětivé formuláře.

Předvedeme, jak stylovat formuláře pomocí CSS v šesti krocích:

1. Nastavení box-sizing
2. Selektory CSS pro vstupní prvky
3. Základní stylovací metody pro pole pro zadávání textu
4. Styling jiných typů vstupu
5. pseudotřídy uživatelského rozhraní
6. Nepřizpůsobitelné vstupy

Než se ponoříme, je důležité si uvědomit, že pro formuláře neexistuje žádný konkrétní styl. Možnosti jsou omezeny pouze vaší fantazií. Tato příručka vám pomůže začít na cestě k vytváření vlastních jedinečných návrhů pomocí CSS.

Začněme!

Nastavení velikosti rámečku

Obvykle nastavuji * {box-sizing:border-box;} nejen pro formuláře, ale také pro webové stránky. Když jej nastavíte, šířka všech prvků bude obsahovat výplň.

Například šířku a výplň nastavte následujícím způsobem.

.some-class { width:200px; padding:20px;}

.some-class bez box-sizing:border-box bude mít šířku větší než 200px, která může být problém. Proto většina vývojářů používá border-box pro všechny prvky.

Níže je uvedena lepší verze kódu. Podporuje také :before a :after pseudoprvky.

*, *:before, *:after { box-sizing: border-box;}

Tip: Selektor * vybere všechny prvky v dokumentu.

Selektory CSS pro vstupní prvky

Nejjednodušší způsob výběru input elements is to use CSS attribute selectors.

Tyto selektory vyberou všechny vstupní prvky v dokumentu. Pokud potřebujete určit selektory, budete muset k prvkům přidat třídy.

<input type="text" class="signup-text-input" />

Potom:

.signup-text-input { // styles here}

Základní metody stylingu pro jednořádková pole pro zadávání textu

Jednořádková pole jsou nejběžnější vstupní pole použitá ve formulářích. Jednořádkový textový vstup je obvykle jednoduché pole s ohraničením (záleží na prohlížeči).

Zde je značka HTML pro jednořádkové pole se zástupným symbolem.

<input type="text" placeholder="Name" />

Bude to vypadat takto:

Můžete použít následující Vlastnosti CSS, aby bylo toto vstupní pole atraktivnější.

• Výplň (pro přidání vnitřních mezer)
• Okraj (pro přidání okraje kolem vstupního pole)
• Ohraničení
• Stín rámečku
• Poloměr ohraničení
• Šířka
• Písmo

Pojďme přiblížit v každé z těchto vlastností.

Výplň

Přidání určitého vnitřního prostoru do vstupního pole může pomoci zlepšit srozumitelnost. Toho můžete dosáhnout pomocí vlastnosti padding.

input { padding: 10px;}

Okraj

Pokud jsou poblíž vašeho vstupního pole další prvky, můžete kolem něj přidat okraj, abyste zabránili shlukování.

input { padding:10px; margin:10px 0; // add top and bottom margin}

Ohraničení

Ve většině prohlížečů mají pole pro zadávání textu hranice, které můžete přizpůsobit.

.border-customized-input { border: 2px solid #eee;}

Okraj můžete také zcela odstranit.

.border-removed-input { border: 0;}

Tip: Určitě přidat barvu pozadí nebo box-shadow po odstranění ohraničení. Jinak uživatelé vstup neuvidí.

Někteří návrháři webu dávají přednost zobrazení pouze spodního ohraničení, protože se trochu podobají psaní na řádek v poznámkovém bloku.

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

Stín rámečku

K přidání vrženého stínu můžete použít vlastnost CSS box-shadow. Řadu efektů můžete dosáhnout hraním s pěti hodnotami vlastnosti.

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

Poloměr ohraničení

Vlastnost border-radius může mít výrazný dopad na dojem vašich forem. Zakřivením okrajů políček můžete výrazně změnit vzhled svých vstupních polí.

.rounded-input { padding:10px; border-radius:10px;}

Jiného vzhledu a dojmu můžete dosáhnout společně pomocí box-shadow a border-radius dohromady.

Šířka

Pomocí vlastnosti width můžete nastavit šířku vstupů.

input { width:100%;}

Fonty

Většina prohlížečů používá pro prvky formuláře jinou rodinu a velikost písma. V případě potřeby můžeme z dokumentu zdědit písmo.

input, textarea { font-family:inherit; font-size: inherit;}

Styling dalších typů vstupu

Můžete stylovat i jiné typy vstupu, například textová oblast, přepínač, zaškrtávací políčko a další. Podívejme se blíže.

Textové oblasti

Textové oblasti jsou podobné textovým vstupům, kromě toho, že umožňují víceřádkové vstupy. Obvykle je použijete, když chcete sbírat data od uživatelů v delší formě, jako jsou komentáře, zprávy atd. Ke stylování textových oblastí můžete použít všechny základní vlastnosti CSS, o kterých jsme dříve hovořili.

Vlastnost resize je také velmi užitečná v textových oblastech. Ve většině prohlížečů lze ve výchozím nastavení měnit velikost textových oblastí podél os xa y (hodnota: both). Můžete jej nastavit na both, horizontal nebo vertical.

Podívejte se na tuto textovou oblast, kterou jsem vytvořil:

Podívejte se na Pen
dyomzez od Supuna Kavindy (@SupunKavinda)
na CodePen.

V tomto příkladu jsem resize:vertical povolil pouze vertikální změnu velikosti. Tato praxe se používá ve většině formulářů, protože brání otravným vodorovným posuvníkům.

Poznámka: Pokud potřebujete vytvořit textové oblasti s automatickou změnou velikosti, budete muset použít přístup JavaScriptu, který je mimo rozsah tento článek.

Zaškrtávací políčka a přepínače

Výchozí zaškrtávací políčko a přepínače se obtížně stylují a vyžadují složitější CSS (a HTML).

Chcete-li stylovat zaškrtávací políčko, použijte následující kód HTML.

<label>Name <input type="checkbox" /> <span></span></label>

Několik poznámek:

• Protože používáme <label> k zabalení <input>, pokud kliknete na libovolný prvek uvnitř <``label``>, <input> bude kliknuto
• Skryjeme <input>, protože prohlížeče nám to moc neumožňují
• <span> vytvoří vlastní zaškrtávací políčko
• Selektor pseudotřídy input:checked použijeme k získání zkontrolovaný stav a upravit vlastní zaškrtávací políčko

Zde je vlastní zaškrtávací políčko (další vysvětlení najdete v komentářích v CSS):

Podívejte se na pero
yLNKQBo od Supuna Kavindy ( @SupunKavinda)
na CodePen.

Zde je vlastní přepínač:

Podívejte se na pero
eYNMQNM od společnosti Supun Kavinda (@SupunKavinda)
na CodePen.

K vytvoření vlastních prvků v obou příkladech jsme použili stejný koncept (input:checked).

V prohlížečích jsou zaškrtávací políčka ve tvaru rámečku, zatímco přepínače jsou kulaté. Nejlepší je ponechat tuto konvenci ve vlastních vstupech, aby nedošlo k matení uživatele.

Výběr nabídek

Výběr nabídek umožňuje uživatelům vybrat položku z více možností.

Prvek <select> můžete upravit tak, aby vypadal atraktivněji.

select { width: 100%; padding:10px; border-radius:10px;}

Rozevírací seznam (nebo <option> prvky) však nemůžete stylovat, protože jsou ve výchozím nastavení stylizovány v závislosti na operačním systému. Jediným způsobem, jak stylovat tyto prvky, je použít vlastní rozbalovací nabídky s JavaScriptem.

Tlačítka

Stejně jako většina prvků mají tlačítka výchozí styly.

<button>Click Me</button>

Pojďme to trochu okorenit.

Pseudotřídy uživatelského rozhraní

Níže jsou uvedeny některé pseudotřídy uživatelského rozhraní, které se běžně používají s prvky formuláře.

Ty lze použít k zobrazení upozornění na základě atributů prvku:

• :required
• :valid a :invalid
• :checked (toto jsme již použili)

Mohou být použity vytvoření efektů pro každý stát:

• :hover
• :focus
• :active

Generované zprávy s: required

Chcete-li zobrazit zprávu, která vyžaduje zadání:

Pokud odeberete s JavaScriptem bude zpráva "Required" automaticky odstraněna.

Totéž můžeme udělat s :valid a :invalid pseudotřídy.

: hover and: focus

:hover vybere prvek, když nad ním umístíte ukazatel myši. :focus vybere prvek, když je zaměřen.

Tyto pseudotřídy se často používají k vytváření přechodů a drobných vizuálních změn. Můžete například změnit šířku, barvu pozadí, barvu ohraničení, sílu stínu atd.Použitím vlastnosti transition s těmito vlastnostmi jsou tyto změny mnohem plynulejší.

Zde jsou některé efekty přechodu na prvky formuláře (zkuste na ně přejet myší).

Podívejte se na pero
yLNKZqg od Supun Kavindy (@SupunKavinda)
na CodePen.

Když uživatelé vidí prvky, nenápadně se mění, když vznášejí se nad nimi, získávají pocit, že prvek je použitelný. To je důležité při navrhování prvků formuláře.

Všimli jste si, že (v některých prohlížečích) se při zaměření na prvky formuláře zobrazí modrý obrys? Pomocí pseudotřídy :focus ji můžete odstranit a přidat další efekty, když je prvek zaostřen.

Následující kód odstraní obrys zaměření u všech prvků.

*:focus {outline:none !important}

Chcete-li přidat obrys zaměření:

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

Viděli jste vyhledávací vstupy, které měřítko při zaměření? Zkuste tento vstup.

Podívejte se na Pen
KKpoJJa od Supun Kavinda (@SupunKavinda)
na CodePen.

Nepřizpůsobitelné vstupy

Stylizace formulářových prvků byla historicky vysoká objednávka. Existují některé prvky formuláře, které nemáme moc pod kontrolou stylingu. Například:

• <input type="color">
• <input type="file">
• <progress>
• <option>, <optgroup>, <datalist>

Tyto prvky poskytuje prohlížeč a jejich styl je založen na operačním systému. Jediným způsobem, jak tyto prvky stylovat, je použít vlastní ovládací prvky, které se vytvářejí pomocí stylovatelných prvků HTML, jako jsou div, span atd.

Například když stylujeme <input type="file">, můžeme skrýt výchozí vstup a použít vlastní tlačítko.

Vlastní ovládací prvky pro prvky formuláře jsou vyvinutý pro většinu hlavních knihoven JavaScriptu. Najdete je na GitHubu.

Závěr

Nyní byste měli rozumět tomu, jak stylovat jednoduché prvky formuláře a jak používat vlastní ovládací prvky, když je obtížné stylizovat vstupní pole prohlížeče. Jak jsem uvedl na začátku tohoto příspěvku, jedná se pouze o základní stavební kameny stylů CSS formulářů. Tyto tipy byste měli použít jako základ a nechat svou fantazii běžet divoce.

Jako závěrečný tip nezapomeňte zajistit, aby všechny vaše formuláře reagovaly.

Hledáte další inspiraci pro návrh formulářů? Podívejte se na tuto kolekci CodePen.