Vzhled formulářových polí

Pod otevírací dobu jsme přidali kontaktní formulář: jméno, e-mailovou adresu, zprávu a tlačítko „Odeslat“. Tlačítko „Odeslat“ už má stejné třídy jako tlačítko na kartě Mourka.

Kde jsou ale pole? Jejich popisy tam jsou, samotná pole však vidět nejsou. Klikněte kousek pod popis Jméno a něco napište: pole tam je, jen je neviditelné. Může za to Preflight, základní styly Tailwindu. Stejně jako odstavcům bere okraje a nadpisům jejich vzhled, odebírá i formulářovým polím rámeček a pozadí, aby každé pole začínalo úplně holé a vy jste ho nastylovali po svém.

Pole potřebuje přinejmenším rámeček, aby lidé viděli, kam kliknout, a polstrování, aby se text nedotýkal rámečku. Všechny třídy, které k tomu potřebujete, znáte z předchozích lekcí:

<input type="text" id="jmeno" name="jmeno" class="w-full rounded-lg border border-stone-300 px-3 py-2">

• w-full: pole je stejně široké jako formulář,
• rounded-lg: zaoblené rohy,
• border border-stone-300: světle šedý rámeček široký 1 px,
• px-3 py-2: polstrování 12 px vlevo a vpravo a 8 px nahoře a dole.

Prvek textarea pro zprávu dostane stejné třídy jako oba prvky input.

Prázdné pole může také ukazovat nápovědu: text svého atributu placeholder (anglicky zástupný text). Zobrazí se v poli světlejší barvou a zmizí, jakmile začnete psát. Hodí se pro příklad toho, co do pole patří, třeba placeholder="jana@example.cz". Prvek label ale nenahrazuje: popis zůstane vidět, i když píšete, zástupný text ne.

Barvu zástupného textu nastavíte variantou placeholder:. Funguje stejně jako varianty pro stavy: placeholder:text-stone-400 obarví jen zástupný text, ne text, který lidé napíšou. V CSS je zástupný text pseudoelement ::placeholder, tedy část prvku, kterou lze stylovat samostatně. (Preflight dává zástupnému textu barvu textu, jen napůl průhlednou. Barva z palety k ostatní stránce ladí lépe.)