Textarea tag razotkriven

Textarea je HTML oznaka koja se uglavnom koristi za poruke i komentare. Veoma je sličan input-u, ali zato što pruža mogućnost da sadrži više od jednog reda teksta, nije predstavljen kao input [type = "textarea"].

U ovom tekstu će biti predstavljene sve opcije ove oznake, zajedno sa često postavljanim pitanjima, i to će biti sve što verujem da postoji vezano za tekstualnu površinu.

Zapamtite ta je ovaj teks drugi po redu, posle input [type="text"].

O Textarea

Podrazumevana textarea oznaka je predstavljena granicom i grafikom u desnom donjem uglu. Dobra je praksa da dodate placeholder mesto, kao u svako polje za unos.

 <textarea>
 </textarea>

Podrazumevana veličina textarea-e definisana je s font-size teksta unutar nje. Dakle, ako nije drugačije definisano, visina tekstualnog područja definisana je sa 2 reda teksta, a širina sa 20 tekstualnih znakova.

Atributi

Jedna od najkorisnijih opcija za textarea element može biti definisana sa njenim atributima. Tu je lista najupotrebljivanihih:

autofocus,
readonly,
required,
disabled

Sva ova 4 atributa prilično su samorazumljiva: autofokus fokusira textarea kada se stranica učitava, readonly, required i disabled atributi dodaju upravo to stanje tekstualnom području.

placeholder
maxlength
cols
rows
wrap

Ovih 5 atributa se koriste za stilizovanje i preciznije definisanje textarea

Pomoću atributa placeholder možete dodati placeholder, kao u sva polja za unos. Maxlength određuje maksimalan broj dozvoljenih znakova. cols definiše „širinu“ textarea brojem prosečne širine karaktera (podrazumevana vrednost je 20), a rows definišu visinu tekstualnog područja brojem linija teksta (podrazumevana vrednost je 2).

Atribut wrap definiše prezentaciju novog reda na dostavljenom tekstu. Vrednosti za ove atribute su soft (podrazumevano), off i hard.

Ako odlučite da isključite wrap, tekst u textarea neće se prekidati dok ne pritisnete return / enter.

Odabirom hard, poslati tekst sadrži nove redove, a odabirom soft ne. Za bolje razumevanje ovog atributa pogledati html.com post.

 <textarea autofocus required placeholder="type your message" maxlength="180"  cols="50" rows="6" wrap="hard">
 </textarea>

Za dalji stil treba da koristite CSS, samo imajte na umu da opcija white-space: nowrap; ne radi.

Resize Problem

Postoji nekoliko problema sa promenom veličine u vezi sa textarea. Da biste definisali visinu i širinu textarea, možete koristiti atribute kolona i redova ili CSS standardni stil (bolji).

Sledeći problem uključuje uklanjanje upravljanja za promenu veličine. Dakle, vi kreirate super lep dizajn i svako ima mogućnost da razvuče textarea preko toga. Ne! Ovo je izuzetno lako popraviti:

 textarea{
     resize:none;
 }

Takođe, mala, ali dosadna stvar u vezi sa ovom oznakom o kojoj govorimo je podrazumevani klizač na textarea u svim verzijama IE. Srećom, rešenje je samo nekoliko redova.

 textarea{
     overflow:auto;
 }

Problem koji je najčešće povezan sa promenom veličine je automatska promena veličine. Nažalost, još uvek ne postoji opcija za automatsko određivanje veličine teksture, ali ovde je to jedan od hakova koje možete koristiti.

Reset Dizajna

Specifične opcije stila za textarea su iste kao i one za input. Dakle, možete oblikovati ivice, pozadinu, tekst, placeholder, stanja. Pronašao sam nekoliko primera nestandardna za textarea i bilo je teško, pa to dokazuje da je textarea jedan od ok-to-be-standard elemenata.

Zatvarajuća linija

Textarea tag je često korišten i njegove opcije su jako jednostavne. Nakon što pročitate tekst siguran sam da da ćete to masterirati.

Za još brzih obuka iz CSS-a proverite sledeći Kolosek bilten