search

Cara menggunakan klik aku html

1 years ago
Komentar: 0
Dibaca: 109

HTML element button menunjukkan sebuah tombol yang secara umum memiliki style layaknya sebuah tombol yang dapat diklik untuk menjalankan tindakan tertentu.

Show

Konten/teks didalam element button merupakan label dari tombol tersebut. Pada <button> element, dapat pula dimasukkan gambar sebagai tampilan dari tombol itu sendiri, ini yang membedakan antara tombol yang dibuat dengan element <button> dan element <input>.

TIPS

Setiap browser memiliki tampilan (style) tombol yang berbeda-beda, yang dibuat oleh <button> element. Sebaiknya, tuliskan attribute type yang sesuai sebagaimana dijelaskan dibawah, ketika menuliskan element <button>.

Didalam sebuah element form, sebaiknya gunakan <input> sebagai pengganti dari <button> yang digunakan untuk mengirim data form, karena setiap browser memiliki perbedaan hasil submit form jika menggunakan element <button>.

AttributesAtribut HTML Tag <button>

autofocus

Ini merupakan HTML5 Boolean attribute yang digunakan untuk menentukkan bahwa button (tombol) mendapatkan fokus ketika halaman dimuat.

Value: autofocus

<!DOCTYPE html>

<html>
<head>
<title>Demo HTML button</title>
<style>
  /* style untuk contoh 3 */
  button.button-gue{
    padding: 0;
    background:none;
    border: 0;
    cursor: pointer;
  }
  button.button-gue:hover {
    opacity: .8;
  }

  /* dul button. style untuk contoh 4 */
   .btn-dul{display:inline-block;margin:.1em;cursor:pointer;-webkit-transition:.4s;-moz-transition:.4s;-ms-transition:.4s;-o-transition:.4s;transition:.4s;vertical-align:middle;min-height:1em;padding:10px 13px;text-decoration:none;border-radius:2px;outline:0;border-style:solid;border-width:1px}.btn-dul-default{color:#555;background-color:#f7f7f7;border-color:#f2f2f2;text-shadow:0 1px 0 #fafafa}.btn-dul-default:hover{background-color:#f2f2f2;border-color:#ebebeb}.btn-dul-primary{color:#fff;background-color:#00a9df;border-color:#00a9df;text-shadow:0 1px 0 #a3a3a3}.btn-dul-primary:hover{color:#fff;background-color:#009acb;border-color:#009acb}.btn-dul-info{background:#5ec8ff;color:#FFF;border-color:#44bfff}.btn-dul-info:hover{background:#2ab6ff;color:#FFF;border-color:#00a1f6}.btn-dul-success{color:#fff;background-color:#8dc838;border-color:#8dc838}.btn-dul-success:hover{color:#fff;background-color:#7fb532;border-color:#7fb532}.btn-dul-warning{color:#fff;background-color:#fcca03;border-color:#fcca03}.btn-dul-warning:hover{color:#fff;background-color:#fcb603;border-color:#fcb603}.btn-dul-danger{color:#fff;background-color:#dd1812;border-color:#dd1812}.btn-dul-danger:hover{color:#fff;background-color:#c90e08;border-color:#c90e08}.btn-dul-clean{color:#6f6f6f;background-color:white;border-color:#ccc}.btn-dul-clean:hover{color:#00a9df;border-color:#00a9df}
</style>
</head>

<body>
<h3>Contoh 1: button default</h3>
<button name="btn-kirim-pesan"
value="Kirim Pesan"
type="Submit">Kirim Pesan</button>

<hr>

<h3>Contoh 2: button dengan javascript</h3>
<button type="button"
  onclick="jalankanScript();">Klik Aku</button>

<hr>

<h3>Contoh 3: button dengan gambar (img)</h3>
<button class="button-gue">
  <img src="/media/images/content/button-download-katalog.png" alt="Download">
</button>

<!-- script untuk contoh 2 -->
<script>
function jalankanScript() {
alert('Hallo Sobat!')
}
</script>

<h3>Contoh 4: button yang diberi style CSS </h3>
<button class="btn-dul btn-dul-default">Default</button>
<button class="btn-dul btn-dul-primary">primary</button>
<button class="btn-dul btn-dul-success">success</button>
<button class="btn-dul btn-dul-info">info</button>
<button class="btn-dul btn-dul-warning">warning</button>
<button class="btn-dul btn-dul-danger">danger</button>
<button class="btn-dul btn-dul-clean">clean</button>

</body>
</html>
1

Digunakan untuk menunjukkan bahwa element button tersebut "disabled" (Tidak dapat diklik).

Value: 

<!DOCTYPE html>

<html>
<head>
<title>Demo HTML button</title>
<style>
  /* style untuk contoh 3 */
  button.button-gue{
    padding: 0;
    background:none;
    border: 0;
    cursor: pointer;
  }
  button.button-gue:hover {
    opacity: .8;
  }

  /* dul button. style untuk contoh 4 */
   .btn-dul{display:inline-block;margin:.1em;cursor:pointer;-webkit-transition:.4s;-moz-transition:.4s;-ms-transition:.4s;-o-transition:.4s;transition:.4s;vertical-align:middle;min-height:1em;padding:10px 13px;text-decoration:none;border-radius:2px;outline:0;border-style:solid;border-width:1px}.btn-dul-default{color:#555;background-color:#f7f7f7;border-color:#f2f2f2;text-shadow:0 1px 0 #fafafa}.btn-dul-default:hover{background-color:#f2f2f2;border-color:#ebebeb}.btn-dul-primary{color:#fff;background-color:#00a9df;border-color:#00a9df;text-shadow:0 1px 0 #a3a3a3}.btn-dul-primary:hover{color:#fff;background-color:#009acb;border-color:#009acb}.btn-dul-info{background:#5ec8ff;color:#FFF;border-color:#44bfff}.btn-dul-info:hover{background:#2ab6ff;color:#FFF;border-color:#00a1f6}.btn-dul-success{color:#fff;background-color:#8dc838;border-color:#8dc838}.btn-dul-success:hover{color:#fff;background-color:#7fb532;border-color:#7fb532}.btn-dul-warning{color:#fff;background-color:#fcca03;border-color:#fcca03}.btn-dul-warning:hover{color:#fff;background-color:#fcb603;border-color:#fcb603}.btn-dul-danger{color:#fff;background-color:#dd1812;border-color:#dd1812}.btn-dul-danger:hover{color:#fff;background-color:#c90e08;border-color:#c90e08}.btn-dul-clean{color:#6f6f6f;background-color:white;border-color:#ccc}.btn-dul-clean:hover{color:#00a9df;border-color:#00a9df}
</style>
</head>

<body>
<h3>Contoh 1: button default</h3>
<button name="btn-kirim-pesan"
value="Kirim Pesan"
type="Submit">Kirim Pesan</button>

<hr>

<h3>Contoh 2: button dengan javascript</h3>
<button type="button"
  onclick="jalankanScript();">Klik Aku</button>

<hr>

<h3>Contoh 3: button dengan gambar (img)</h3>
<button class="button-gue">
  <img src="/media/images/content/button-download-katalog.png" alt="Download">
</button>

<!-- script untuk contoh 2 -->
<script>
function jalankanScript() {
alert('Hallo Sobat!')
}
</script>

<h3>Contoh 4: button yang diberi style CSS </h3>
<button class="btn-dul btn-dul-default">Default</button>
<button class="btn-dul btn-dul-primary">primary</button>
<button class="btn-dul btn-dul-success">success</button>
<button class="btn-dul btn-dul-info">info</button>
<button class="btn-dul btn-dul-warning">warning</button>
<button class="btn-dul btn-dul-danger">danger</button>
<button class="btn-dul btn-dul-clean">clean</button>

</body>
</html>
1

form

Digunakan untuk menentukkan id element form yang dikaitkan dengan element button.

Value: id_form

<!DOCTYPE html>

<html>
<head>
<title>Demo HTML button</title>
<style>
  /* style untuk contoh 3 */
  button.button-gue{
    padding: 0;
    background:none;
    border: 0;
    cursor: pointer;
  }
  button.button-gue:hover {
    opacity: .8;
  }

  /* dul button. style untuk contoh 4 */
   .btn-dul{display:inline-block;margin:.1em;cursor:pointer;-webkit-transition:.4s;-moz-transition:.4s;-ms-transition:.4s;-o-transition:.4s;transition:.4s;vertical-align:middle;min-height:1em;padding:10px 13px;text-decoration:none;border-radius:2px;outline:0;border-style:solid;border-width:1px}.btn-dul-default{color:#555;background-color:#f7f7f7;border-color:#f2f2f2;text-shadow:0 1px 0 #fafafa}.btn-dul-default:hover{background-color:#f2f2f2;border-color:#ebebeb}.btn-dul-primary{color:#fff;background-color:#00a9df;border-color:#00a9df;text-shadow:0 1px 0 #a3a3a3}.btn-dul-primary:hover{color:#fff;background-color:#009acb;border-color:#009acb}.btn-dul-info{background:#5ec8ff;color:#FFF;border-color:#44bfff}.btn-dul-info:hover{background:#2ab6ff;color:#FFF;border-color:#00a1f6}.btn-dul-success{color:#fff;background-color:#8dc838;border-color:#8dc838}.btn-dul-success:hover{color:#fff;background-color:#7fb532;border-color:#7fb532}.btn-dul-warning{color:#fff;background-color:#fcca03;border-color:#fcca03}.btn-dul-warning:hover{color:#fff;background-color:#fcb603;border-color:#fcb603}.btn-dul-danger{color:#fff;background-color:#dd1812;border-color:#dd1812}.btn-dul-danger:hover{color:#fff;background-color:#c90e08;border-color:#c90e08}.btn-dul-clean{color:#6f6f6f;background-color:white;border-color:#ccc}.btn-dul-clean:hover{color:#00a9df;border-color:#00a9df}
</style>
</head>

<body>
<h3>Contoh 1: button default</h3>
<button name="btn-kirim-pesan"
value="Kirim Pesan"
type="Submit">Kirim Pesan</button>

<hr>

<h3>Contoh 2: button dengan javascript</h3>
<button type="button"
  onclick="jalankanScript();">Klik Aku</button>

<hr>

<h3>Contoh 3: button dengan gambar (img)</h3>
<button class="button-gue">
  <img src="/media/images/content/button-download-katalog.png" alt="Download">
</button>

<!-- script untuk contoh 2 -->
<script>
function jalankanScript() {
alert('Hallo Sobat!')
}
</script>

<h3>Contoh 4: button yang diberi style CSS </h3>
<button class="btn-dul btn-dul-default">Default</button>
<button class="btn-dul btn-dul-primary">primary</button>
<button class="btn-dul btn-dul-success">success</button>
<button class="btn-dul btn-dul-info">info</button>
<button class="btn-dul btn-dul-warning">warning</button>
<button class="btn-dul btn-dul-danger">danger</button>
<button class="btn-dul btn-dul-clean">clean</button>

</body>
</html>
7

Digunakan untuk menentukkan URL yang memproses data form ketika form dikirim. Berlaku untuk attribute 

<!DOCTYPE html>

<html>
<head>
<title>Demo HTML button</title>
<style>
  /* style untuk contoh 3 */
  button.button-gue{
    padding: 0;
    background:none;
    border: 0;
    cursor: pointer;
  }
  button.button-gue:hover {
    opacity: .8;
  }

  /* dul button. style untuk contoh 4 */
   .btn-dul{display:inline-block;margin:.1em;cursor:pointer;-webkit-transition:.4s;-moz-transition:.4s;-ms-transition:.4s;-o-transition:.4s;transition:.4s;vertical-align:middle;min-height:1em;padding:10px 13px;text-decoration:none;border-radius:2px;outline:0;border-style:solid;border-width:1px}.btn-dul-default{color:#555;background-color:#f7f7f7;border-color:#f2f2f2;text-shadow:0 1px 0 #fafafa}.btn-dul-default:hover{background-color:#f2f2f2;border-color:#ebebeb}.btn-dul-primary{color:#fff;background-color:#00a9df;border-color:#00a9df;text-shadow:0 1px 0 #a3a3a3}.btn-dul-primary:hover{color:#fff;background-color:#009acb;border-color:#009acb}.btn-dul-info{background:#5ec8ff;color:#FFF;border-color:#44bfff}.btn-dul-info:hover{background:#2ab6ff;color:#FFF;border-color:#00a1f6}.btn-dul-success{color:#fff;background-color:#8dc838;border-color:#8dc838}.btn-dul-success:hover{color:#fff;background-color:#7fb532;border-color:#7fb532}.btn-dul-warning{color:#fff;background-color:#fcca03;border-color:#fcca03}.btn-dul-warning:hover{color:#fff;background-color:#fcb603;border-color:#fcb603}.btn-dul-danger{color:#fff;background-color:#dd1812;border-color:#dd1812}.btn-dul-danger:hover{color:#fff;background-color:#c90e08;border-color:#c90e08}.btn-dul-clean{color:#6f6f6f;background-color:white;border-color:#ccc}.btn-dul-clean:hover{color:#00a9df;border-color:#00a9df}
</style>
</head>

<body>
<h3>Contoh 1: button default</h3>
<button name="btn-kirim-pesan"
value="Kirim Pesan"
type="Submit">Kirim Pesan</button>

<hr>

<h3>Contoh 2: button dengan javascript</h3>
<button type="button"
  onclick="jalankanScript();">Klik Aku</button>

<hr>

<h3>Contoh 3: button dengan gambar (img)</h3>
<button class="button-gue">
  <img src="/media/images/content/button-download-katalog.png" alt="Download">
</button>

<!-- script untuk contoh 2 -->
<script>
function jalankanScript() {
alert('Hallo Sobat!')
}
</script>

<h3>Contoh 4: button yang diberi style CSS </h3>
<button class="btn-dul btn-dul-default">Default</button>
<button class="btn-dul btn-dul-primary">primary</button>
<button class="btn-dul btn-dul-success">success</button>
<button class="btn-dul btn-dul-info">info</button>
<button class="btn-dul btn-dul-warning">warning</button>
<button class="btn-dul btn-dul-danger">danger</button>
<button class="btn-dul btn-dul-clean">clean</button>

</body>
</html>
8.

Value: URL

<!DOCTYPE html>

<html>
<head>
<title>Demo HTML button</title>
<style>
  /* style untuk contoh 3 */
  button.button-gue{
    padding: 0;
    background:none;
    border: 0;
    cursor: pointer;
  }
  button.button-gue:hover {
    opacity: .8;
  }

  /* dul button. style untuk contoh 4 */
   .btn-dul{display:inline-block;margin:.1em;cursor:pointer;-webkit-transition:.4s;-moz-transition:.4s;-ms-transition:.4s;-o-transition:.4s;transition:.4s;vertical-align:middle;min-height:1em;padding:10px 13px;text-decoration:none;border-radius:2px;outline:0;border-style:solid;border-width:1px}.btn-dul-default{color:#555;background-color:#f7f7f7;border-color:#f2f2f2;text-shadow:0 1px 0 #fafafa}.btn-dul-default:hover{background-color:#f2f2f2;border-color:#ebebeb}.btn-dul-primary{color:#fff;background-color:#00a9df;border-color:#00a9df;text-shadow:0 1px 0 #a3a3a3}.btn-dul-primary:hover{color:#fff;background-color:#009acb;border-color:#009acb}.btn-dul-info{background:#5ec8ff;color:#FFF;border-color:#44bfff}.btn-dul-info:hover{background:#2ab6ff;color:#FFF;border-color:#00a1f6}.btn-dul-success{color:#fff;background-color:#8dc838;border-color:#8dc838}.btn-dul-success:hover{color:#fff;background-color:#7fb532;border-color:#7fb532}.btn-dul-warning{color:#fff;background-color:#fcca03;border-color:#fcca03}.btn-dul-warning:hover{color:#fff;background-color:#fcb603;border-color:#fcb603}.btn-dul-danger{color:#fff;background-color:#dd1812;border-color:#dd1812}.btn-dul-danger:hover{color:#fff;background-color:#c90e08;border-color:#c90e08}.btn-dul-clean{color:#6f6f6f;background-color:white;border-color:#ccc}.btn-dul-clean:hover{color:#00a9df;border-color:#00a9df}
</style>
</head>

<body>
<h3>Contoh 1: button default</h3>
<button name="btn-kirim-pesan"
value="Kirim Pesan"
type="Submit">Kirim Pesan</button>

<hr>

<h3>Contoh 2: button dengan javascript</h3>
<button type="button"
  onclick="jalankanScript();">Klik Aku</button>

<hr>

<h3>Contoh 3: button dengan gambar (img)</h3>
<button class="button-gue">
  <img src="/media/images/content/button-download-katalog.png" alt="Download">
</button>

<!-- script untuk contoh 2 -->
<script>
function jalankanScript() {
alert('Hallo Sobat!')
}
</script>

<h3>Contoh 4: button yang diberi style CSS </h3>
<button class="btn-dul btn-dul-default">Default</button>
<button class="btn-dul btn-dul-primary">primary</button>
<button class="btn-dul btn-dul-success">success</button>
<button class="btn-dul btn-dul-info">info</button>
<button class="btn-dul btn-dul-warning">warning</button>
<button class="btn-dul btn-dul-danger">danger</button>
<button class="btn-dul btn-dul-clean">clean</button>

</body>
</html>
9

Menunjukkan form encoded type yang digunakan untuk menentukkan tipe content yang digunakan ketika mengirim form pada server. Berlaku untuk attribute 

<!DOCTYPE html>

<html>
<head>
<title>Demo HTML button</title>
<style>
  /* style untuk contoh 3 */
  button.button-gue{
    padding: 0;
    background:none;
    border: 0;
    cursor: pointer;
  }
  button.button-gue:hover {
    opacity: .8;
  }

  /* dul button. style untuk contoh 4 */
   .btn-dul{display:inline-block;margin:.1em;cursor:pointer;-webkit-transition:.4s;-moz-transition:.4s;-ms-transition:.4s;-o-transition:.4s;transition:.4s;vertical-align:middle;min-height:1em;padding:10px 13px;text-decoration:none;border-radius:2px;outline:0;border-style:solid;border-width:1px}.btn-dul-default{color:#555;background-color:#f7f7f7;border-color:#f2f2f2;text-shadow:0 1px 0 #fafafa}.btn-dul-default:hover{background-color:#f2f2f2;border-color:#ebebeb}.btn-dul-primary{color:#fff;background-color:#00a9df;border-color:#00a9df;text-shadow:0 1px 0 #a3a3a3}.btn-dul-primary:hover{color:#fff;background-color:#009acb;border-color:#009acb}.btn-dul-info{background:#5ec8ff;color:#FFF;border-color:#44bfff}.btn-dul-info:hover{background:#2ab6ff;color:#FFF;border-color:#00a1f6}.btn-dul-success{color:#fff;background-color:#8dc838;border-color:#8dc838}.btn-dul-success:hover{color:#fff;background-color:#7fb532;border-color:#7fb532}.btn-dul-warning{color:#fff;background-color:#fcca03;border-color:#fcca03}.btn-dul-warning:hover{color:#fff;background-color:#fcb603;border-color:#fcb603}.btn-dul-danger{color:#fff;background-color:#dd1812;border-color:#dd1812}.btn-dul-danger:hover{color:#fff;background-color:#c90e08;border-color:#c90e08}.btn-dul-clean{color:#6f6f6f;background-color:white;border-color:#ccc}.btn-dul-clean:hover{color:#00a9df;border-color:#00a9df}
</style>
</head>

<body>
<h3>Contoh 1: button default</h3>
<button name="btn-kirim-pesan"
value="Kirim Pesan"
type="Submit">Kirim Pesan</button>

<hr>

<h3>Contoh 2: button dengan javascript</h3>
<button type="button"
  onclick="jalankanScript();">Klik Aku</button>

<hr>

<h3>Contoh 3: button dengan gambar (img)</h3>
<button class="button-gue">
  <img src="/media/images/content/button-download-katalog.png" alt="Download">
</button>

<!-- script untuk contoh 2 -->
<script>
function jalankanScript() {
alert('Hallo Sobat!')
}
</script>

<h3>Contoh 4: button yang diberi style CSS </h3>
<button class="btn-dul btn-dul-default">Default</button>
<button class="btn-dul btn-dul-primary">primary</button>
<button class="btn-dul btn-dul-success">success</button>
<button class="btn-dul btn-dul-info">info</button>
<button class="btn-dul btn-dul-warning">warning</button>
<button class="btn-dul btn-dul-danger">danger</button>
<button class="btn-dul btn-dul-clean">clean</button>

</body>
</html>
8.

Value:

  • /* Tidak Ada. Element ini tidak ada default style yang berlaku */
    1 : default value apabila attribute formenctype tidak disebutkan.
  • /* Tidak Ada. Element ini tidak ada default style yang berlaku */
    2 : digunakan apabila menggunakan element <input type="file">
  • /* Tidak Ada. Element ini tidak ada default style yang berlaku */
    3

/* Tidak Ada. Element ini tidak ada default style yang berlaku */
4

Digunakan untuk menentukkan HTTP method yang dipakai oleh browser untuk mengirimkan data form. Berlaku untuk attribute 

<!DOCTYPE html>

<html>
<head>
<title>Demo HTML button</title>
<style>
  /* style untuk contoh 3 */
  button.button-gue{
    padding: 0;
    background:none;
    border: 0;
    cursor: pointer;
  }
  button.button-gue:hover {
    opacity: .8;
  }

  /* dul button. style untuk contoh 4 */
   .btn-dul{display:inline-block;margin:.1em;cursor:pointer;-webkit-transition:.4s;-moz-transition:.4s;-ms-transition:.4s;-o-transition:.4s;transition:.4s;vertical-align:middle;min-height:1em;padding:10px 13px;text-decoration:none;border-radius:2px;outline:0;border-style:solid;border-width:1px}.btn-dul-default{color:#555;background-color:#f7f7f7;border-color:#f2f2f2;text-shadow:0 1px 0 #fafafa}.btn-dul-default:hover{background-color:#f2f2f2;border-color:#ebebeb}.btn-dul-primary{color:#fff;background-color:#00a9df;border-color:#00a9df;text-shadow:0 1px 0 #a3a3a3}.btn-dul-primary:hover{color:#fff;background-color:#009acb;border-color:#009acb}.btn-dul-info{background:#5ec8ff;color:#FFF;border-color:#44bfff}.btn-dul-info:hover{background:#2ab6ff;color:#FFF;border-color:#00a1f6}.btn-dul-success{color:#fff;background-color:#8dc838;border-color:#8dc838}.btn-dul-success:hover{color:#fff;background-color:#7fb532;border-color:#7fb532}.btn-dul-warning{color:#fff;background-color:#fcca03;border-color:#fcca03}.btn-dul-warning:hover{color:#fff;background-color:#fcb603;border-color:#fcb603}.btn-dul-danger{color:#fff;background-color:#dd1812;border-color:#dd1812}.btn-dul-danger:hover{color:#fff;background-color:#c90e08;border-color:#c90e08}.btn-dul-clean{color:#6f6f6f;background-color:white;border-color:#ccc}.btn-dul-clean:hover{color:#00a9df;border-color:#00a9df}
</style>
</head>

<body>
<h3>Contoh 1: button default</h3>
<button name="btn-kirim-pesan"
value="Kirim Pesan"
type="Submit">Kirim Pesan</button>

<hr>

<h3>Contoh 2: button dengan javascript</h3>
<button type="button"
  onclick="jalankanScript();">Klik Aku</button>

<hr>

<h3>Contoh 3: button dengan gambar (img)</h3>
<button class="button-gue">
  <img src="/media/images/content/button-download-katalog.png" alt="Download">
</button>

<!-- script untuk contoh 2 -->
<script>
function jalankanScript() {
alert('Hallo Sobat!')
}
</script>

<h3>Contoh 4: button yang diberi style CSS </h3>
<button class="btn-dul btn-dul-default">Default</button>
<button class="btn-dul btn-dul-primary">primary</button>
<button class="btn-dul btn-dul-success">success</button>
<button class="btn-dul btn-dul-info">info</button>
<button class="btn-dul btn-dul-warning">warning</button>
<button class="btn-dul btn-dul-danger">danger</button>
<button class="btn-dul btn-dul-clean">clean</button>

</body>
</html>
8.

Value: 

/* Tidak Ada. Element ini tidak ada default style yang berlaku */
6 | 
/* Tidak Ada. Element ini tidak ada default style yang berlaku */
7

/* Tidak Ada. Element ini tidak ada default style yang berlaku */
8

Digunakan untuk menunjukkan bahwa data form tidak harus di-validasi terlebih dahulu sebelum dikirim. Berlaku untuk attribute 

<!DOCTYPE html>

<html>
<head>
<title>Demo HTML button</title>
<style>
  /* style untuk contoh 3 */
  button.button-gue{
    padding: 0;
    background:none;
    border: 0;
    cursor: pointer;
  }
  button.button-gue:hover {
    opacity: .8;
  }

  /* dul button. style untuk contoh 4 */
   .btn-dul{display:inline-block;margin:.1em;cursor:pointer;-webkit-transition:.4s;-moz-transition:.4s;-ms-transition:.4s;-o-transition:.4s;transition:.4s;vertical-align:middle;min-height:1em;padding:10px 13px;text-decoration:none;border-radius:2px;outline:0;border-style:solid;border-width:1px}.btn-dul-default{color:#555;background-color:#f7f7f7;border-color:#f2f2f2;text-shadow:0 1px 0 #fafafa}.btn-dul-default:hover{background-color:#f2f2f2;border-color:#ebebeb}.btn-dul-primary{color:#fff;background-color:#00a9df;border-color:#00a9df;text-shadow:0 1px 0 #a3a3a3}.btn-dul-primary:hover{color:#fff;background-color:#009acb;border-color:#009acb}.btn-dul-info{background:#5ec8ff;color:#FFF;border-color:#44bfff}.btn-dul-info:hover{background:#2ab6ff;color:#FFF;border-color:#00a1f6}.btn-dul-success{color:#fff;background-color:#8dc838;border-color:#8dc838}.btn-dul-success:hover{color:#fff;background-color:#7fb532;border-color:#7fb532}.btn-dul-warning{color:#fff;background-color:#fcca03;border-color:#fcca03}.btn-dul-warning:hover{color:#fff;background-color:#fcb603;border-color:#fcb603}.btn-dul-danger{color:#fff;background-color:#dd1812;border-color:#dd1812}.btn-dul-danger:hover{color:#fff;background-color:#c90e08;border-color:#c90e08}.btn-dul-clean{color:#6f6f6f;background-color:white;border-color:#ccc}.btn-dul-clean:hover{color:#00a9df;border-color:#00a9df}
</style>
</head>

<body>
<h3>Contoh 1: button default</h3>
<button name="btn-kirim-pesan"
value="Kirim Pesan"
type="Submit">Kirim Pesan</button>

<hr>

<h3>Contoh 2: button dengan javascript</h3>
<button type="button"
  onclick="jalankanScript();">Klik Aku</button>

<hr>

<h3>Contoh 3: button dengan gambar (img)</h3>
<button class="button-gue">
  <img src="/media/images/content/button-download-katalog.png" alt="Download">
</button>

<!-- script untuk contoh 2 -->
<script>
function jalankanScript() {
alert('Hallo Sobat!')
}
</script>

<h3>Contoh 4: button yang diberi style CSS </h3>
<button class="btn-dul btn-dul-default">Default</button>
<button class="btn-dul btn-dul-primary">primary</button>
<button class="btn-dul btn-dul-success">success</button>
<button class="btn-dul btn-dul-info">info</button>
<button class="btn-dul btn-dul-warning">warning</button>
<button class="btn-dul btn-dul-danger">danger</button>
<button class="btn-dul btn-dul-clean">clean</button>

</body>
</html>
8.

Value: 

/* Tidak Ada. Element ini tidak ada default style yang berlaku */
8

<button>...</button>1

Digunakan untuk menentukkan target tampilan setelah data form dikirim. Berlaku untuk attribute 

<!DOCTYPE html>

<html>
<head>
<title>Demo HTML button</title>
<style>
  /* style untuk contoh 3 */
  button.button-gue{
    padding: 0;
    background:none;
    border: 0;
    cursor: pointer;
  }
  button.button-gue:hover {
    opacity: .8;
  }

  /* dul button. style untuk contoh 4 */
   .btn-dul{display:inline-block;margin:.1em;cursor:pointer;-webkit-transition:.4s;-moz-transition:.4s;-ms-transition:.4s;-o-transition:.4s;transition:.4s;vertical-align:middle;min-height:1em;padding:10px 13px;text-decoration:none;border-radius:2px;outline:0;border-style:solid;border-width:1px}.btn-dul-default{color:#555;background-color:#f7f7f7;border-color:#f2f2f2;text-shadow:0 1px 0 #fafafa}.btn-dul-default:hover{background-color:#f2f2f2;border-color:#ebebeb}.btn-dul-primary{color:#fff;background-color:#00a9df;border-color:#00a9df;text-shadow:0 1px 0 #a3a3a3}.btn-dul-primary:hover{color:#fff;background-color:#009acb;border-color:#009acb}.btn-dul-info{background:#5ec8ff;color:#FFF;border-color:#44bfff}.btn-dul-info:hover{background:#2ab6ff;color:#FFF;border-color:#00a1f6}.btn-dul-success{color:#fff;background-color:#8dc838;border-color:#8dc838}.btn-dul-success:hover{color:#fff;background-color:#7fb532;border-color:#7fb532}.btn-dul-warning{color:#fff;background-color:#fcca03;border-color:#fcca03}.btn-dul-warning:hover{color:#fff;background-color:#fcb603;border-color:#fcb603}.btn-dul-danger{color:#fff;background-color:#dd1812;border-color:#dd1812}.btn-dul-danger:hover{color:#fff;background-color:#c90e08;border-color:#c90e08}.btn-dul-clean{color:#6f6f6f;background-color:white;border-color:#ccc}.btn-dul-clean:hover{color:#00a9df;border-color:#00a9df}
</style>
</head>

<body>
<h3>Contoh 1: button default</h3>
<button name="btn-kirim-pesan"
value="Kirim Pesan"
type="Submit">Kirim Pesan</button>

<hr>

<h3>Contoh 2: button dengan javascript</h3>
<button type="button"
  onclick="jalankanScript();">Klik Aku</button>

<hr>

<h3>Contoh 3: button dengan gambar (img)</h3>
<button class="button-gue">
  <img src="/media/images/content/button-download-katalog.png" alt="Download">
</button>

<!-- script untuk contoh 2 -->
<script>
function jalankanScript() {
alert('Hallo Sobat!')
}
</script>

<h3>Contoh 4: button yang diberi style CSS </h3>
<button class="btn-dul btn-dul-default">Default</button>
<button class="btn-dul btn-dul-primary">primary</button>
<button class="btn-dul btn-dul-success">success</button>
<button class="btn-dul btn-dul-info">info</button>
<button class="btn-dul btn-dul-warning">warning</button>
<button class="btn-dul btn-dul-danger">danger</button>
<button class="btn-dul btn-dul-clean">clean</button>

</body>
</html>
8.

Value: <button>...</button>3 | <button>...</button>4 | <button>...</button>5 | <button>...</button>6 | namaframe

<button>...</button>7

Digunakan untuk menentukkan nama button yang berkaitan dengan data form yang akan dikirim.

Value: namabutton

type

Digunakan untuk menentukkan tipe (Jenis) dari button.

Value: button | button0 | button1

button2

Digunakan untuk menentukkan initial value sebuah button.

Value: teks

Global AttributesAtribut Secara Global (Keseluruhan)

<button> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event AttributesAtribut event (Peristiwa)

<button> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

ExampleContoh HTML <button> element

HTML

<button type="button">Klik Aku!</button>

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

Cara Membuat Link di HTML Link pada HTML dapa dibuat dengan tag <a> , kemudian tag ini harus memiliki atribut href untuk menentukan alamat URL tujuan dari link. Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style standar dari setiap browser.

Bagaimana cara membuat komentar di HTML?

Cara Membuat Komentar di HTML.
<!– adalah Tag awal yang harus ditulis..
Setelah tag tersebut silahkan isikan catatan atau komentar..
Lalu akhiri dengan tag –>.
Cara Membuat Link Email Menggunakan HTML.
Ketik anchor tag beserta link email tujuan yaitu: <a href="mailto:[email protected]"> ... .
Ketik anchor text, bisa diisi dengan alamat email Anda atau teks lainnya. ... .
Tutup anchor tag </a> ..
Cara membuat link URL sendiri dengan Bitly..
Klik Create..
Masukkan link panjang..
Tempel link yang ingin dibuat..
Tampilan akan berubah ke mode edit..
Klik bagian Customize Back-Half..
Klik Save..
Edit link ke penamaan sendiri..
Tunggu notifikasi alamat link URL tersedia atau tidak..

kode html

Pos Terkait

Bagaimana cara membuat gambar transparan di html?
Bagaimana cara membuat gambar transparan di html?

Cara mengubah warna gambar dengan python
Cara mengubah warna gambar dengan python

Contoh dekorator patch mock python
Contoh dekorator patch mock python

Cara menggunakan html 5 adalah
Cara menggunakan html 5 adalah

Cara menggunakan mysql bit vs tinyint
Cara menggunakan mysql bit vs tinyint

Cara menggunakan formulir html dan css
Cara menggunakan formulir html dan css

Bagaimana cara membuat halaman rahasia di wordpress?
Bagaimana cara membuat halaman rahasia di wordpress?

Unduh .net framework windows 7 32 bit
Unduh .net framework windows 7 32 bit

Ratakan daftar daftar python
Ratakan daftar daftar python

Ubah ekstensi php menjadi html htaccess
Ubah ekstensi php menjadi html htaccess

Periklanan

BERITA TERKINI

Bisakah Anda mengaktifkan javascript di ponsel?
1 years ago . by AdorableMantra
Bagaimana Anda menghapus teks duplikat dengan python?
1 years ago . by DecreasingEmperor
Cara menghapus latar belakang video di CapCut
1 years ago . by SkepticalDugout
Apa itu rounddown dalam excel?
1 years ago . by JollyDollar
Dapatkan array multidimensi kunci php
1 years ago . by LuridRecognition
Cara mengeluarkan darah haid yang tidak keluar
1 years ago . by CuriousRedundancy
Dapatkan javascript bulan dengan 0
1 years ago . by NastyMedics
Python cetak daftar daftar secara vertikal
1 years ago . by DeviantColors
Cara membersihkan kacamata yang tergores
1 years ago . by Two-storyDealing
Cara menggunakan variable to dataframe python
1 years ago . by ThrobbingMetaphysics

Toplist Popular

#1
Top 10 berikut ini yang bukan merupakan penetapan tujuan visi perusahaan adalah 2022
1 years ago
#2
Top 10 sebuah bak air berbentuk balok dengan ukuran panjang 40 cm, lebar 30 cm, dan tinggi 35 cm 2022
1 years ago
#3
Top 9 banjir bukan sekadar bencana alam paragraf 3 gagasan utama 2022
1 years ago
#4
Top 10 diketahui himpunan himpunan sebagai berikut p bilangan ganjil yang kurang dari 15 2022
1 years ago
#5
Top 10 penyelesaian dari persamaan 3x 2 y 9 dan 2x y 3 adalah 2022
1 years ago
#6
Top 10 bagaimana cara memberi salam kepada orang tua dan guru yang benar brainly 2022
1 years ago
#7
Top 10 semakin tinggi nilai toleransi semakin tinggi nilai integrasi nasional 2022
1 years ago
#8
Top 10 benda kerajinan tidak boleh membahayakan pemakainya maka benda kerajinan memiliki prinsip 2022
1 years ago
#9
Top 9 bagian tutup sumbat termos biasanya terbuat dari benda berjenis brainly 2022
1 years ago
#10
Top 9 pernyataan yang sesuai dengan prinsipteori evolusi jb lamarck ditunjukkan oleh angka 2022
1 years ago

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeenfritzhtrjako
Copyright © 2024 idkuu.com Inc.