Câmpuri text
Un câmp text pe o singură linie este creat folosind elementul input, când atributul său type are valoarea text:
<input type="text" name="login" />Prin intermediul unei serii de atribute suplimentare se poate configura câmpul text:
- dir: stabilește direcția textului
- list: stabilește o listă de sugestii pentru introducerea în câmp
- maxlength: numărul maxim permis de caractere în câmpul text
- pattern: definește un șablon pe care trebuie să-l respecte textul introdus
- placeholder: stabilește textul care este afișat în mod implicit în câmpul text
- readonly: face câmpul text disponibil doar pentru citire
- required: indică faptul că câmpul text trebuie neapărat completat
- size: stabilește lățimea câmpului text în numărul de caractere vizibile
- value: stabilește valoarea implicită în câmpul text
Aplicăm unele dintre aceste atribute:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Câmpuri text în HTML5</title>
</head>
<body>
<form>
<p><input type="text" name="userName" placeholder="Introduceți numele" size="18" /></p>
<p><input type="text" name="userPhone" placeholder="Introduceți numărul de telefon" size="18" maxlength="11" /></p>
<p>
<button type="submit">Trimite</button>
<button type="reset">Anulează</button>
</p>
</form>
</body>
</html>
În acest exemplu, în al doilea câmp text sunt stabilite direct atributele maxlength și size. Astfel, size - adică numărul de caractere care se încadrează în spațiul vizibil al câmpului, este mai mare decât numărul permis de caractere. Totuși, nu vom putea introduce mai multe caractere decât cele permise de maxlength.
Este important să diferențiem între atributele value și placeholder, deși ambele setează text vizibil în câmp. Însă, placeholder stabilește un fel de sugestie sau invitație la introducere, de aceea este de obicei marcat cu gri. Pe când valoarea value reprezintă textul introdus în mod implicit în câmp:
<p><input type="text" name="userName" value="Tom" /></p>
<p><input type="text" name="userPhone" placeholder="Numărul de telefon" /></p>
Atributele readonly și disabled fac câmpul text inaccesibil, dar sunt însoțite de efecte vizuale diferite. În cazul disabled, câmpul text este estompat:
<p><input type="text" name="userName" value="Tom" readonly /></p>
<p><input type="text" name="userPhone" value="+12345678901" disabled /></p>
Printre atributele câmpului text merită menționat și atributul list. Acesta conține o referință la elementul datalist, care definește un set de valori ce apar sub formă de sugestie la introducerea în câmpul text. De exemplu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Câmpuri text în HTML5</title>
</head>
<body>
<form>
<p><input list="phonesList" type="text" name="model" placeholder="Introduceți modelul" /></p>
<p>
<button type="submit">Trimite</button>
</p>
</form>
<datalist id="phonesList">
<option value="iPhone 6S" label="54000"/>
<option value="Lumia 950">35000</option>
<option value="Nexus 5X"/>
</datalist>
</body>
</html>
Atributul list al câmpului text indică id-ul elementului datalist. Elementul datalist, prin intermediul elementelor option incluse, definește elementele listei. Și la introducerea în câmpul text, această listă este afișată sub formă de sugestie.
Direcția textului
Atributul dir stabilește direcția de introducere a textului. Poate lua două valori: ltr (de la stânga la dreapta) și rtl (de la dreapta la stânga):
<input type="text" name="username" dir="rtl" />Câmpul de căutare
Pentru crearea câmpurilor de căutare este destinat elementul input cu atributul type="search". Formal, reprezintă un simplu câmp text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Căutare în HTML5</title>
</head>
<body>
<form>
<input type="search" name="term" />
<input type="submit" value="Căutare" />
</form>
</body>
</html>
Câmpul de introducere a parolei
Pentru introducerea parolei se folosește elementul input cu atributul type="password". Caracteristica sa distinctivă este că simbolurile introduse sunt mascate de puncte:
<form>
<p><input type="text" name="login" /></p>
<p><input type="password" name="password" /></p>
<input type="submit" value="Autorizare" />
</form>