Formulářový element

<textarea>

Víceřádkové pole. Na zprávy, komentáře a všechno, co se nevejde na jeden řádek.

V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.

Zápis

Párový tag

Na rozdíl od input je textarea párová. Text mezi tagy je výchozí obsah pole. Většinou tam nenecháme nic.

Prohlížeč ji bez stylů ukáže malou a strojovým písmem. To za chvíli spravíme.

Atributy

Velikost a limit

rows nastaví výšku v řádcích. maxlength nepustí víc znaků, než chceme. A jako u ostatních polí funguje placeholder i required.

Šířku by nastavil atribut cols, ale tu je lepší řídit stylem.

Pozor

Každá mezera se počítá

Všechno mezi tagy je obsah pole, i odřádkování a odsazení. Když tagy rozdělíte na dva řádky, pole nebude prázdné a placeholder se neukáže.

Styl

Stejné písmo jako stránka

Přes font: inherit převezme pole písmo stránky. V gridu se samo roztáhne na celou šířku, takže zbývá vzduch a border.

Styl

Táhnout jen dolů

Pravý dolní roh pole jde chytit a táhnout. Do šířky by ale rozbil rozvržení, proto povolíme jen výšku. min-height zajistí, že pole nikdo nezmenší na nudli.

Další hodnoty: none (nejde táhnout vůbec) a both (výchozí, oběma směry).

Styl

Pole, které roste s textem

Novinka field-sizing: content nechá pole růst, jak uživatel píše. Žádný scrollbar uvnitř, celý text je pořád vidět.

Zatím to neumí všechny prohlížeče. Kde to nefunguje, zůstane obyčejné pole se scrollbarem, takže nic nepokazíte.

Styl

Zpráva vedle kontaktu

V kontaktním formuláři dáme na široké obrazovce jméno a e-mail do levého sloupce a zprávu do pravého. Zpráva se natáhne na výšku obou polí.

Druhý řádek gridu 1fr zabere všechno volné místo, a pole v něm se roztáhne.

Responzivita

Na telefonu pod sebou

Na úzké obrazovce by byla zpráva vedle kontaktu příliš úzká. Sloupce proto složíme pod sebe: nejdřív jméno a e-mail, pod nimi zpráva.

Pole s field-sizing: content se na telefonu hodí dvojnásob: klávesnice zabere půl obrazovky a scrollbar v malém poli by se špatně ovládal.

Shrnutí

Jak používat textarea

Ano

otevírací a uzavírací tag hned vedle sebe
font: inherit, jinak bude strojové písmo
resize: vertical a rozumná min-height
na telefonu pole přes celou šířku

Ne

šířka přes atribut cols
textarea na jednořádkové údaje, jako je jméno

Další: <select> →