Introducere în Web Development

<input>

Cel mai întâlnit element din formularele HTML de fapt ascunde mai multe elemente. Toate, însă, au în comun faptul că sunt elemente pe care utilizatorul le folosește pentru a introduce date.

Diferitele elemente ascunse pot fi activate folosind atributul type. Unele dintre acestea funcționează împreună cu alte atribute.

Dacă avem deja date de afișat, cum ar fi atunci când edităm ceva, putem folosi atributul value.

Text

                    <input 
  type="text" 
  minlength="3"
  maxlength="33"
/>
                

Cel mai simplu de înțeles și probabil folosit tip de input este text. Acesta pur-și simplu permite utilizatorului să introducă orice fel de text. Se mai pot folosi atributele minlength și maxlength, care primesc numărul minim, respectiv maxim, de caractere ce pot fi introduse.

Oarecum asemănător unui <input type="text" /> sunt afișate și următoarele tipuri:

Number

Un input de tip number permite introducerea de numere.

Pe unele browsere, pot apărea butoane pentru creșterea sau scăderea numărului.

Pe lângă cifre, mai poate fi introdus o singură dată litera e, pentru cazul în care se vrea introducerea unui număr extrem cu exponențial. Sau se poate introduce punct, pentru numere fracționare.

Se pot seta atributele min și max pentru a seta limitele numărului, dar acestea funcționează doar atunci când numărul se modifică din butoanele de incrementare și decrementare, sau din săgețile sus-jos de pe tastatură.
Cu atributul step, se poate seta cu cât crește sau scade numărul atunci când apăsăm pe buton sau săgeată.

Dacă vrem să împiedicăm total utilizatorul de la a seta numere nepermise, va trebui un eveniment în JS care să impună limite mai rigide.

                    <input
  type="number"
  min="9000"
  max="9001"
  step="0.01"
/>
                

Date

Există câteva tipuri de input ce permit introducerea de informații legate de data calendaristică. Ce se afișează arată diferit pe diferite browsere, așa că eu recomand să punem aceste tipuri doar pentru a le înlocui apoi din JS, poate folosind o bibliotecă de componente.

Deși inputul poate arăta diferit în funcție de limba sistemului de operare, valorile produse sunt standardizate.

Legenda:

• YYYY - Anul în format de 4 cifre (ex. 2024)

• MM - Luna, din două cifre (ex. 08)

• DD - Ziua (ex. 09)

• hh - Ora (ex. 14)

• mm - Minutul (ex. 20)

• ww - Numărul săptămânii. Săptămâna 1 este prima plină din an

Orice alte caractere sunt fixe.

<textarea>

                    <textarea minlength="">
  Input on

  multiple lines
</textarea>
                

Acest element permite introducerea de text pe mai multe linii. Tag-urile dinainte de încheierea elementului vor fi transformate în text, dar caracterele speciale vor fi afișate.

Ca și la inputurile de text, se pot folosi atributele minlength și maxlength pentru a limita câte caractere pot fi introduse.

Se poate controla numărul de linii ce vor fi afișate, fie din CSS (proprietatea height., sau derivatele min-height și max-height), fie din atributul rows.

În browserele moderne, un textarea poate fi redimensionat, dar acest fapt le poate da utilizatorilor ocazia să ne strice site-ul.
Putem limita direcțiile în care se poate dimensiona, folosind proprietatea CSS resize, care poate primi valorile both, horizontal, vertical, sau none.

                    textarea {
  min-height: 3lh;
  resize: vertical;
}