Butoane HTML
Butoanele permit utilizatorilor să interacționeze cu o pagină. Ele pot trimite formulare, rula JavaScript sau declanșa alte acțiuni la apăsare.
Buton HTML
Elementul <button> creează un buton pe care se poate face click. De unul singur, nu face nimic până când nu îi dai o acțiune.
Exemplu
Un buton 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>Buton De Bază</title>
</head>
<body>
<button>Click aici</button>
</body>
</html>
Stilizarea Butoanelor HTML
Butoanele sunt adesea stilizate cu CSS.
Exemplu
Un buton verde stilizat cu CSS.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mytestbtn {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="mytestbtn">Buton Verde</button>
</body>
</html>
Butoane Dezactivate
Folosește atributul disabled pentru a face un buton neapăsabil.
Sfat: Butoanele dezactivate nu pot fi apăsate și de obicei arată estompate.
Exemplu
Un buton dezactivat.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buton Dezactivat</title>
</head>
<body>
<button disabled>Buton Dezactivat</button>
</body>
</html>
Buton cu JavaScript
Poți rula JavaScript la apăsarea unui buton folosind atributul onclick.
Notă: Vei afla mai multe despre JavaScript în capitolul HTML JavaScript.
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>Buton Js</title>
</head>
<body>
<button onclick="alert('Salut!')">Click aici</button>
</body>
</html>
Tipuri de Butoane
Atributul type setează ce face un buton. Există trei tipuri: type="button" este un buton normal care implicit nu face nimic, type="submit" trimite un formular, iar type="reset" șterge toate câmpurile formularului.
Butoanele sunt adesea folosite în interiorul formularelor: un buton de trimitere trimite datele formularului către server, iar un buton de resetare golește formularul.
Notă: Setează întotdeauna atributul type. Într-un formular, tipul implicit este submit, iar browserele se pot comporta diferit dacă este omis.
Exemplu
Butoane de trimitere și de resetare într-un formular.
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>Buton Formular</title>
</head>
<body>
<form action="/action_page.php">
Prenume: <input type="text" name="fname">
<button type="submit">Trimite</button>
<button type="reset">Resetează formularul</button>
</form>
</body>
</html>
Cele trei tipuri de buton
Un buton normal, unul de trimitere și unul de resetare.
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>