Atributele HTML pentru Input
Acest capitol descrie diferitele atribute pe care le poți folosi pentru elementul HTML <input>.
Atributul value
Atributul value setează o valoare inițială (implicită) pentru un câmp de input.
Exemplu
Câmpuri de text care încep cu valori implicite.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul value</title>
</head>
<body>
<form>
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nume:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
Atributul readonly
Atributul readonly face un câmp de input doar-pentru-citire, astfel încât nu poate fi modificat. Utilizatorul poate în continuare naviga la el cu Tab, îl poate selecta și copia textul. Valoarea sa este totuși trimisă la trimiterea formularului.
Exemplu
Un câmp „prenume” doar-pentru-citire.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul readonly</title>
</head>
<body>
<form>
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Nume:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
Atributul disabled
Atributul disabled dezactivează un câmp de input, astfel încât nu poate fi folosit sau apăsat. Valoarea unui câmp dezactivat nu este trimisă la trimiterea formularului.
Exemplu
Un câmp „prenume” dezactivat.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul disabled</title>
</head>
<body>
<form>
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Nume:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
Atributul size
Atributul size setează lățimea vizibilă a unui câmp de input, măsurată în caractere. Valoarea implicită este 20.
Notă: size funcționează cu aceste tipuri de input: text, search, tel, url, email și password.
Exemplu
Un câmp „prenume” lat și un câmp „PIN” îngust.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul size</title>
</head>
<body>
<form>
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
</body>
</html>
Atributul maxlength
Atributul maxlength setează numărul maxim de caractere pe care un câmp le va accepta.
Notă: Când maxlength este setat, câmpul pur și simplu nu va accepta mai multe caractere, dar nu afișează niciun mesaj. Pentru a avertiza utilizatorul, ai nevoie de JavaScript.
Exemplu
Un câmp „PIN” limitat la patru caractere.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul maxlength</title>
</head>
<body>
<form>
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
</body>
</html>
Atributele min și max
Atributele min și max setează cea mai mică și cea mai mare valoare pe care un câmp le va accepta.
Funcționează cu aceste tipuri de input: number, range, date, datetime-local, month, time și week. Folosește-le împreună pentru a crea un interval de valori permise.
Exemplu
Câmpuri de dată cu limite min și max, plus un câmp numeric pentru o cantitate de la 1 la 5.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributele min și max</title>
</head>
<body>
<form>
<label for="datemax">Introdu o dată înainte de 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Introdu o dată după 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Cantitate (între 1 și 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
</body>
</html>
Atributul multiple
Atributul multiple permite utilizatorului să introducă mai multe valori într-un câmp. Funcționează cu tipurile de input email și file.
Exemplu
Un câmp de fișier care acceptă mai multe fișiere.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul multiple</title>
</head>
<body>
<form>
<label for="files">Selectează fișiere:</label>
<input type="file" id="files" name="files" multiple>
</form>
</body>
</html>
Atributul pattern
Atributul pattern setează o expresie regulată cu care valoarea câmpului este verificată la trimiterea formularului.
Funcționează cu aceste tipuri de input: text, date, search, url, tel, email și password.
Sfat: Folosește atributul global title pentru a descrie modelul, astfel încât utilizatorul să știe ce se așteaptă.
Exemplu
Un câmp care acceptă doar un cod de țară din trei litere.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul pattern</title>
</head>
<body>
<form>
<label for="country_code">Cod de țară:</label>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Cod de țară din trei litere">
</form>
</body>
</html>
Atributul placeholder
Atributul placeholder afișează o scurtă sugestie în interiorul câmpului înainte ca utilizatorul să scrie, precum un exemplu de valoare sau formatul așteptat.
Funcționează cu aceste tipuri de input: text, search, url, number, tel, email și password.
Exemplu
Un câmp de telefon cu o sugestie placeholder.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul placeholder</title>
</head>
<body>
<form>
<label for="phone">Introdu un număr de telefon:</label>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
</body>
</html>
Atributul required
Atributul required înseamnă că un câmp trebuie completat înainte ca formularul să poată fi trimis.
Funcționează cu aceste tipuri de input: text, search, url, tel, email, password, selectoare de dată, number, checkbox, radio și file.
Exemplu
Un câmp obligatoriu pentru numele de utilizator.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul required</title>
</head>
<body>
<form>
<label for="username">Nume de utilizator:</label>
<input type="text" id="username" name="username" required>
</form>
</body>
</html>
Atributul step
Atributul step setează intervalele numerice permise pentru un câmp. De exemplu, cu step="3", numerele valide sunt -3, 0, 3, 6 și așa mai departe.
Funcționează cu aceste tipuri de input: number, range, date, datetime-local, month, time și week. Poți să-l folosești împreună cu min și max pentru a crea un interval de valori permise.
Notă: Restricțiile de input nu sunt infailibile, iar JavaScript poate fi folosit pentru a adăuga input invalid. Pentru siguranță, serverul trebuie de asemenea să verifice input-ul.
Exemplu
Un câmp numeric care permite doar intervale de trei.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul step</title>
</head>
<body>
<form>
<label for="points">Puncte:</label>
<input type="number" id="points" name="points" step="3">
</form>
</body>
</html>
Atributul autofocus
Atributul autofocus face ca un câmp să primească automat focus la încărcarea paginii.
Exemplu
Câmpul „prenume” primește focus imediat ce se încarcă pagina.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul autofocus</title>
</head>
<body>
<form>
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Nume:</label><br>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Atributele height și width
Atributele height și width setează dimensiunea unui element <input type="image">.
Sfat: Setează întotdeauna ambele. Când dimensiunea este cunoscută, browserul rezervă spațiu pentru imagine în timp ce pagina se încarcă, astfel încât aspectul (layout-ul) nu „sare” pe măsură ce imaginile apar.
Exemplu
Un buton de trimitere cu imagine, cu înălțime și lățime setate.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributele height și width</title>
</head>
<body>
<form>
<label for="fname">Prenume:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Nume:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Trimite" width="48" height="48">
</form>
</body>
</html>
Atributul list
Atributul list conectează un input cu un element <datalist> care conține opțiuni predefinite pentru acesta.
Exemplu
Un input cu valori predefinite ale browserului într-o datalist.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul list</title>
</head>
<body>
<form>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
</body>
</html>
Atributul autocomplete
Atributul autocomplete spune dacă un formular sau un singur câmp trebuie să aibă completarea automată activată sau dezactivată. Când este activată, browserul poate sugera valori pe baza a ceea ce utilizatorul a scris anterior.
Funcționează cu <form> și aceste tipuri de input: text, search, url, tel, email, password, selectoare de dată, range și color.
Sfat: În unele browsere, s-ar putea să fie nevoie să activezi funcția de completare automată din setări pentru ca aceasta să funcționeze.
Exemplu
Un formular cu completarea automată activată, dar dezactivată pentru câmpul de email.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul autocomplete</title>
</head>
<body>
<form action="/action_page.php" autocomplete="on">
<label for="fname">Prenume:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Nume:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Trimite">
</form>
</body>
</html>