Tipuri de Input HTML
Acest capitol descrie diferitele tipuri pentru elementul HTML <input>. Tipul pe care îl alegi schimbă felul în care arată și se comportă câmpul.
Tipurile disponibile sunt: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url și week.
Sfat: Valoarea implicită a atributului type este text.
Tipul de Input Text
<input type="text"> creează un câmp de text pe o singură linie.
Exemplu
Un formular cu câmpuri de text pentru prenume și nume.
Output: 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>Tipul de input Text</title>
</head>
<body>
<form>
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Nume de familie:</label><br>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Tipul de Input Password
<input type="password"> creează un câmp de parolă. Caracterele introduse sunt mascate, afișate ca puncte sau asteriscuri.
Exemplu
Un formular cu un câmp de text pentru numele de utilizator și un câmp de parolă.
Output: 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>Tipul de input Password</title>
</head>
<body>
<form>
<label for="username">Nume de utilizator:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Parolă:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
</body>
</html>
Tipul de Input Submit
<input type="submit"> creează un buton care trimite datele formularului către un handler de formular. Handler-ul este de obicei o pagină pe server cu un script, setată în atributul action al formularului.
Dacă omiți atributul value al butonului de trimitere, butonul afișează textul implicit al browserului.
Cu o valoare
Un buton de trimitere cu eticheta „Submit”.
Output: 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>Tipul de input Submit</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nume de familie:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Trimite">
</form>
</body>
</html>
Text implicit al butonului
Același formular, dar butonul de trimitere nu are value, deci afișează textul implicit.
Output: 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>Text implicit pentru Submit</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nume de familie:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
</body>
</html>
Tipul de Input Reset
<input type="reset"> creează un buton de resetare care readuce toate câmpurile formularului la valorile lor implicite.
Dacă modifici valorile și apoi apeși „Reset”, datele formularului revin la valorile implicite.
Exemplu
Un formular cu un buton de trimitere și un buton de resetare.
Output: 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>Tipul de input Reset</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nume de familie:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Trimite">
<input type="reset" value="Resetează">
</form>
</body>
</html>
Tipul de Input Radio
<input type="radio"> creează un buton radio. Butoanele radio permit utilizatorului să aleagă DOAR UNA dintr-un set restrâns de opțiuni.
Exemplu
Butoane radio pentru alegerea unui limbaj web preferat.
Output: 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>Tipul de input Radio</title>
</head>
<body>
<p>Alege limbajul tău Web preferat:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</body>
</html>
Tipul de Input Checkbox
<input type="checkbox"> creează un checkbox. Checkbox-urile permit utilizatorului să aleagă zero sau mai multe opțiuni dintr-un set restrâns.
Exemplu
Trei checkbox-uri pe care utilizatorul le poate bifa independent.
Output: 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>Tipul de input Checkbox</title>
</head>
<body>
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> Am o bicicletă</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> Am o mașină</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> Am o barcă</label>
</form>
</body>
</html>
Tipul de Input Button
<input type="button"> creează un buton pe care se poate face click.
Exemplu
Un buton care afișează o alertă la apăsare.
Output: 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>Tipul de input Button</title>
</head>
<body>
<input type="button" onclick="alert('Salut, lume!')" value="Apasă-mă!">
</body>
</html>
Tipul de Input Color
<input type="color"> este pentru câmpuri care trebuie să conțină o culoare. În funcție de browser, poate apărea un selector de culoare.
Exemplu
Un câmp selector de culoare.
Output: 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>Tipul de input Color</title>
</head>
<body>
<form>
<label for="favcolor">Selectează culoarea ta preferată:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
</body>
</html>
Tipul de Input Date
<input type="date"> este pentru câmpuri care trebuie să conțină o dată. În funcție de browser, poate apărea un selector de dată.
Poți folosi atributele min și max pentru a limita datele permise.
Dată de bază
Un câmp de dată simplu.
Output: 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>Tipul de input Date</title>
</head>
<body>
<form>
<label for="birthday">Data nașterii:</label>
<input type="date" id="birthday" name="birthday">
</form>
</body>
</html>
Restricții de dată
Câmpuri de dată limitate cu min și max.
Output: 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>Restricții pentru dată</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">
</form>
</body>
</html>
Tipul de Input Datetime-local
<input type="datetime-local"> este un câmp de dată și oră fără fus orar. În funcție de browser, poate apărea un selector de dată.
Exemplu
Un câmp de dată și oră.
Output: 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>Tipul de input Datetime-local</title>
</head>
<body>
<form>
<label for="birthdaytime">Data nașterii (dată și oră):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
</body>
</html>
Tipul de Input Email
<input type="email"> este pentru câmpuri care trebuie să conțină o adresă de email. În funcție de browser, adresa poate fi verificată automat la trimiterea formularului. Unele telefoane adaugă „.com” la tastatură pentru câmpurile de email.
Exemplu
Un câmp de email.
Output: 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>Tipul de input Email</title>
</head>
<body>
<form>
<label for="email">Introdu adresa ta de email:</label>
<input type="email" id="email" name="email">
</form>
</body>
</html>
Tipul de Input Image
<input type="image"> folosește o imagine ca buton de trimitere. Calea către imagine se pune în atributul src.
Exemplu
O imagine care funcționează ca buton de trimitere.
Output: 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>Tipul de input Image</title>
</head>
<body>
<form>
<input type="image" src="img_submit.gif" alt="Trimite" width="48" height="48">
</form>
</body>
</html>
Tipul de Input File
<input type="file"> creează un câmp de selectare a fișierelor cu un buton „Browse” pentru încărcarea fișierelor.
Exemplu
Un câmp de selectare a fișierelor.
Output: 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>Tipul de input File</title>
</head>
<body>
<form>
<label for="myfile">Selectează un fișier:</label>
<input type="file" id="myfile" name="myfile">
</form>
</body>
</html>
Tipul de Input Hidden
<input type="hidden"> creează un câmp ascuns pe care utilizatorul nu îl vede. Le permite dezvoltatorilor să trimită date odată cu formularul pe care utilizatorul nu le poate vedea sau modifica, cum ar fi ce înregistrare din baza de date trebuie actualizată.
Notă: Valoarea este ascunsă din pagină, dar poate fi totuși văzută și editată folosind uneltele pentru dezvoltatori ale browserului sau „View Source”. Nu folosi input-uri ascunse pentru securitate.
Exemplu
Un formular cu un câmp vizibil plus un câmp ascuns ce conține un id de client.
Output: 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>Tipul de input Hidden</title>
</head>
<body>
<form>
<label for="fname">Prenume:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Trimite">
</form>
</body>
</html>
Tipul de Input Month
<input type="month"> permite utilizatorului să aleagă o lună și un an. În funcție de browser, poate apărea un selector de dată.
Exemplu
Un câmp lună-an.
Output: 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>Tipul de input Month</title>
</head>
<body>
<form>
<label for="bdaymonth">Data nașterii (lună și an):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
</body>
</html>
Tipul de Input Number
<input type="number"> creează un câmp de input numeric. Poți limita numerele permise cu atribute precum min și max.
Exemplu
Un câmp numeric care acceptă doar valori de la 1 la 5.
Output: 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>Tipul de input Number</title>
</head>
<body>
<form>
<label for="quantity">Cantitate (între 1 și 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
</body>
</html>
Restricții de Input
Iată câteva atribute comune pentru a limita ce se poate introduce într-un input:
checked— câmpul este preselectat la încărcarea paginii (pentrucheckboxsauradio).disabled— câmpul este dezactivat.max— valoarea maximă permisă.maxlength— numărul maxim de caractere.min— valoarea minimă permisă.pattern— o expresie regulată cu care valoarea trebuie să se potrivească.readonly— câmpul nu poate fi modificat.required— câmpul trebuie completat.size— lățimea câmpului în caractere.step— intervalele numerice permise.value— valoarea implicită.
Vei afla mai multe despre restricțiile de input în capitolul următor.
Exemplu
Un câmp numeric de la 0 la 100 cu pas de 10, cu o valoare implicită de 30.
Output: 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>Restricții pentru input</title>
</head>
<body>
<form>
<label for="quantity">Cantitate:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
</body>
</html>
Tipul de Input Range
<input type="range"> creează un cursor pentru un număr a cărui valoare exactă nu este importantă. Intervalul implicit este de la 0 la 100, iar tu îl poți schimba cu min, max și step.
Exemplu
Un cursor pentru o valoare de volum de la 0 la 50.
Output: 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>Tipul de input Range</title>
</head>
<body>
<form>
<label for="vol">Volum (între 0 și 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
</body>
</html>
Tipul de Input Search
<input type="search"> este pentru câmpuri de căutare. Un câmp de căutare funcționează ca un câmp de text normal.
Exemplu
Un câmp de căutare.
Output: 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>Tipul de input Search</title>
</head>
<body>
<form>
<label for="gsearch">Caută pe Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
</body>
</html>
Tipul de Input Tel
<input type="tel"> este pentru câmpuri care trebuie să conțină un număr de telefon. Poți folosi atributul pattern pentru a seta formatul așteptat.
Exemplu
Un câmp de număr de telefon cu un pattern.
Output: 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>Tipul de input Tel</title>
</head>
<body>
<form>
<label for="phone">Introdu numărul tău de telefon:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
</body>
</html>
Tipul de Input Time
<input type="time"> permite utilizatorului să aleagă o oră (fără fus orar). În funcție de browser, poate apărea un selector de oră.
Exemplu
Un câmp de oră.
Output: 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>Tipul de input Time</title>
</head>
<body>
<form>
<label for="appt">Selectează o oră:</label>
<input type="time" id="appt" name="appt">
</form>
</body>
</html>
Tipul de Input Url
<input type="url"> este pentru câmpuri care trebuie să conțină o adresă web. În funcție de browser, valoarea poate fi verificată automat la trimitere. Unele telefoane adaugă „.com” la tastatură pentru câmpurile url.
Exemplu
Un câmp URL.
Output: 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>Tipul de input Url</title>
</head>
<body>
<form>
<label for="homepage">Adaugă pagina ta principală:</label>
<input type="url" id="homepage" name="homepage">
</form>
</body>
</html>
Tipul de Input Week
<input type="week"> permite utilizatorului să aleagă o săptămână și un an. În funcție de browser, poate apărea un selector de dată.
Exemplu
Un câmp de săptămână.
Output: 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>Tipul de input Week</title>
</head>
<body>
<form>
<label for="week">Selectează o săptămână:</label>
<input type="week" id="week" name="week">
</form>
</body>
</html>