Cara Membuat Tombol di HTML

Dipublikasikan oleh Muhammad Zen pada

Halo teman-teman semua. apa kabar?. semoga dalam keadaan sehat dan bahagia. Kali ini kita akan membahas tag button di html. Jika kamu belum mengikuti materi sebelumnya, silahkan kunjungi halaman kursus.

Pengertian Button

Button atau tombol adalah objek berbentuk persegi yang bisa di klik. Tombol yang kita bahas tentunya berupa tampilan dilayar. Yang sering disebut widget atau screen control.

Jenis-jenis Button

Ada tiga jenis button di html yang harus kamu ketahui.

  1. Submit
  2. Button
  3. Reset

Button Submit

Button jenis ini fungsinya untuk memulai aksi pada form. Sehingga tanpa di submit data pada form tidak akan diproses.

<form>
<button type="submit"> Kirim</button>
</form>

Button Biasa

Button jenis ini tidak berfungsi apa-apa jika tidak diberi aksi atau link. Paling sering button jenis ini digunakan sebagai link. Contoh button atau tombol cancel.

<form>
<button type="button"> Cancel</button>
</form>

Button ini tidak akan bereaksi jika tidak dijadikan objek link.

Button Reset

Button Jenis ini berfungsi mereset value elemen form.

<form>
<input type="text">
<button type="reset"> Cancel</button>
</form>

Coba kamu isi input field. Kemudian klik tombol cancel.

Membuat Tag Button Dengan Bootstrap

Untuk membuat tampilan button lebih bagus. Mari kita gunakan css dari bootstrap.

<!-- CSS only --> 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<form>
<button class="btn btn-primary" type="button"> Tambah</button>
<button class="btn btn-success" type="button"> Lihat</button>
<button class="btn btn-warning" type="button"> Edit</button>
<button class="btn btn-danger" type="button"> Hapus</button>
<button class="btn btn-success" type="button"> Cancel</button>
<button class="btn btn-warning" type="button"> Simpan</button>
</form>

Membuat Tag Button Dengan Bootstrap dan Font Awesome.

Selanjutnya, kita ganti teks dengan icon.

<!-- CSS only --> 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<form>
<button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i></button>
<button class="btn btn-success" type="button"> <i class="fa fa-eye"></i></button>
<button class="btn btn-warning" type="button"><i class="fa fa-edit"></i></button>
<button class="btn btn-danger" type="button"> <i class="fa fa-trash"></i></button>
<button class="btn btn-success" type="button"> <i class="fa fa-arrow-left"></i></button>
<button class="btn btn-warning" type="button"> <i class="fa fa-save"></i></button>
</form>

Kesimpulan

Button submit berfungsi memulai pengiriman data dari form menuju aksi. Button biasa untuk dijadikan link. Button reset digunakan untuk mereset value elemen form. Namun button reset jarang digunakan.

Sekian untuk materi kali ini. Jika kamu ingin kursus secara langsung, kami membuka kelas baru. Silahkan hubungi kontak kami di menu.


0 Komentar

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *