Atributele HTML5 Textarea: Iată ce ar trebui să știți
Ce este <textarea> folosită pentru?
Majoritatea formularelor HTML sunt compuse dintr-un element de formular părinte, o mână de elemente de intrare (dintre care cel puțin unul va fi de tip submit) și una sau mai multe zone de text. Dacă aveți nevoie de câmpuri de formular care să accepte adrese de e-mail, numere de telefon și alt conținut ușor de definit, utilizați tipul de intrare corespunzător. Cu toate acestea, atunci când aveți nevoie de un câmp care poate accepta orice combinație și lungime de litere, numere și simboluri din text simplu, <textarea> este elementul pe care îl căutați.
Atributele textarea HTML5
HTML5 a introdus câteva atribute noi care pot fi utilizate cu elementele textarea. Iată câteva dintre cele mai importante:
-
form: Asociază textarea cu un formular. Utilizați atributul ID al formularului ca valoare pentru atributele formularului textarea. Acest lucru vă permite să plasați un textarea oriunde pe o pagină web, chiar și în afara elementului de formular, și totuși conținutul textarea să fie inclus atunci când formularul este trimis. -
maxlengthșiminlength: Utilizate pentru a specifica un număr minim sau maxim de caractere care pot fi introduse într-o textarea. -
placeholder: Adaugă text de tip placeholder în textarea care dispare imediat ce un utilizator plasează cursorul în interiorul elementului. -
required: Solicită ca textarea să conțină conținut înainte de a permite trimiterea formularului. -
wrap: Specifică dacă trebuie adăugate sau nu hard-returns la conținutul trimis într-o textarea.
Atribute în acțiune
Iată un exemplu despre cum pot fi utilizate unele dintre aceste noi atribute pentru a controla comportamentul unei textarea.
<p>This text area is limited to just 10 characters</p> <textarea cols="50" rows="3" maxlength="10" placeholder="Just 10 characters allowed"></textarea> <p>This text area is readonly and cannot be changed</p> <textarea cols="50" rows="3" readonly>This value can't be changed</textarea> If we pair those textarea elements with a simple script and button element, we get the following form:
