Elemen Button merupakan salah satu elemen penting dalam HTML yang sering digunakan sebagai tombol interaktif yang memungkinkan pengguna untuk berinteraksi dengan halman web tersebut. pada artikel ini kita akan membahas mengenai elemen button, jenis-jenis elemen button beserta atributnya.
 |
| Elemen Button HMTL |
Elemen Button HTML
Elemen button didefinisikan dengan tag <button> yang umum digunakan sebagai tombol untuk berinteraksi pada suatu halaman website. tombol ini memiliki banyak fungsi tergantuk peruntukannya contohnya memulai aksi javascript, mengarahkan pengguna ke halaman lain, mengunduh resouces atau mengirim form.
contoh penggunaan tag button pada HTML:
<button>My Button</button>
Jenis-Jenis Penggunaan Button HTML
Berikut adalah beberapa jenis elemen button html yang umum digunakan:
Button sederhana
Jenis elemen button ini digunakan untuk membuat tombol dasar tanpa mengguna atribut apapun.
berikut contoh penggunaanya:
<button>My Button</button>
Button dengan Atribut Disabled
Jenis button dengan atribut disabled digunakan untuk membuat tombol tidak dapat di klik. fungsi ini sangat berguna jika ingin menonaktifkan tombol sampai pada suatu kondisi tertentu.
contoh penggunaanya:
<button disabled>My Button (Nonaktif)</button>
Button dengan atribut Type
Jenis button dengan atribut type umum digunakan sebagai fungsi dasar tombol. beberapa nilai yang digunakan pada atribut type ini adalah reset, submit dan button.
contoh penggunaannya:
<button type="reset">Reset</button>
<button type="submit">Kirim</button>
<button type="button">Tombol Biasa</button>
Button dengan atribut onclick
Jenis button atribut onclick ini digunakan untuk menentukan kode javascript yang akan di jalankan ketika tombol tersebut diklik oleh pengguna.
contoh penggunaannya:
<button onclick="klikSaya()">Klik Saya</button>
Penggunaan Elemen Button pada Form
Penggunaan elemen button pada form ini sering digunakan sebagai peranan tombol reset atau pengiriman formulir tersebut.
contoh penggunaannya:
<form action="/submit" method="post">
<input type="text" name="username" placeholder="Masukkan Nama Pengguna">
<input type="password" name="password" placeholder="Masukkan Kata Sandi">
<button type="submit">Kirim</button>
</form>
Memberikan Style pada Button dengan CSS
Kita akan mencoba memberika style pada button yang sudah dibuat. kita bisa mengatur dari mulai warna button, warna teks, ukuran dan gaya teks button untuk membuat tombol button menjadi lebih menarik.
contoh kode CSS untuk memberikan style pada button:
button {
background-color: #1b7cad;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 6px 3px;
cursor: pointer;
border-radius:10px;
}
Kesimpulan
Pada artikel ini kita telah membahas mengenai elemen button dari contoh beberapa penggunaan elemen button, mengenal atribut elemen button yang umum digunakan dan penggunaanya pada form. yang terakhir kita mencoba memberikan style atau gaya pada tombol button. semoga bermanfat dan dapat menggunakannya di projectnya sendiri.
Posting Komentar