Jika pada tutorial sebelumnya kita telah mempelajari tag fieldset dan tag legend, pada tutorial kali ini kita akan mempelajari tag button yang digunakan untuk membuat button pada HTML. Tag tombol ini dapat digunakan di dalam formulir, maupun di luar formulir Show
Fungsi Tag Tombol dalam pembuatan Formulir HTMLDalam tutorial Belajar HTML Dasar. Cara Membuat Form di HTML (form tag), kita sudah menggunakan input tag type=”submit” untuk membuat button di form HTML, namun HTML menyediakan tag khusus yang fungsinya sama yaitu button tag Tag tombol berfungsi untuk membuat tombol baik di dalam formulir maupun di luar formulir. Dibandingkan dengan tombol yang dibuat dengan tag input type="submit", tag tombol menawarkan lebih banyak fleksibilitas Cara Menggunakan Tag Tombol HTMLUntuk menggunakan button tag, kita cukup menuliskannya dengan struktur dasar sebagai berikut <button>text untuk tombol</button> Tag tombol juga tidak harus berbentuk, dan ini memberikan fleksibilitas yang tinggi. Anda dapat memprogramnya menggunakan javascript untuk membuat fungsi lain yang akan berjalan saat tombol diklik Atribut tipe. Mengubah fungsi tombol tag tombolJika digunakan dalam form, kita bisa menambahkan atribut type untuk mengubah fungsi tombol. Nilai yang dapat digunakan untuk atribut ini adalah reset, submit, dan button. Contoh penulisannya adalah <button type="reset">Text untuk tombol</button>_ Jika menuliskan type=”submit”, maka ketika tombol di klik, HTML akan mengirimkan nilainya untuk diproses (misalkan dengan PHP), namun jika type=”reset”, maka jika tombol tersebut di klik, efeknya akan mengosongkan isian form. Type=”button” tidak akan berefek apa-apa kedalam fungsi tombol, bahkan mungkin akan sedikit membingungkan menulis : Atribut dinonaktifkan. Nonaktifkan tag tombolSalah satu atribut penting untuk tag tombol ini adalah atribut yang dinonaktifkan. Atribut ini digunakan untuk mengontrol apakah tombol dapat digunakan oleh pengguna atau tidak. Atribut ini hanya memiliki 1 nilai yaitu disable, sehingga ditulis dengan disabled=”disabled”. Cara penulisannya adalah sebagai berikut <button disabled="disabled">Text untuk tombol</button> Jika Anda menjalankan contoh dalam HTML, tombol akan berwarna abu-abu dan tidak dapat diklik oleh pengguna Atribut yang dinonaktifkan ini dapat diterapkan ke hampir semua objek formulir, dan biasanya akan diprogram menggunakan javascript untuk mengaktifkan tombol. Misalkan kita memprogram sebuah tombol yang hanya bisa diaktifkan ketika pengguna telah mengisi seluruh formulir Atribut id dan class. CSS dan JavascriptSelain atribut tipe dan dinonaktifkan, kita dapat menggunakan atribut seperti id dan kelas di tag tombol. Atribut id dan class akan dibutuhkan untuk pemrograman HTML menggunakan Javascript dan CSS Contoh penggunaan tag tombol dalam HTMLKesimpulannya, berikut adalah contoh kode HTML dalam penulisan dan penggunaan tag button <!DOCTYPE html> <html> <head> <title>Belajar Tag Button HTML</title> </head> <body> <button>Silahkan Klik Saya</button> <br /> <button disabled="disabled">Tombol ini tidak bisa di-klik</button> <br /> <h4>Formulir isian duniailkom:</h4> <form action=" formulir.html" method="get"> Nama : <input type="text" name="nama_user" id="nama_user"/> <button type="submit">Mulai Proses!</button> <button type="reset">Reset Form</button> </form> </body> </html>  Pada tutorial form HTML berikutnya, kita akan membahas tentang metode dan fungsi dari input type text tag pada HTML. Objek formulir ini banyak digunakan dalam bentuk html Jika nilai atribut pada tombol kirim dihilangkan, tombol akan menampilkan teks default, seperti ini <!DOCTYPE html> <html> <body> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama Belakang:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit"> </form> </body> </html>_ Atur Ulang Jenis Input<!DOCTYPE html> <html> <body> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama Belakang:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit"> </form> </body> </html>7 mendefinisikan tombol reset yang akan mengatur ulang semua nilai formulir ke nilai defaultnya Contoh <!DOCTYPE html> <html> <body> <h2>Reset Button</h2> <p><strong>input type="reset"</strong> dmendefinisikan tombol reset yang akan mengatur ulang semua nilai formulir ke nilai defaultnya.</p> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama Belakang:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> <input type="reset"> </form> <p>Jika Anda mengubah nilai input dan kemudian mengklik tombol "Reset", data formulir akan disetel ulang ke nilai default.</p> </body> </html>_ Jika Anda mengubah nilai input dan kemudian mengklik tombol "Reset", data formulir akan diatur ulang ke nilai default Radio Jenis Masukan<!DOCTYPE html> <html> <body> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama Belakang:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit"> </form> </body> </html>_5 mendefinisikan tombol radio Tombol radio memungkinkan pengguna untuk memilih HANYA SATU dari sejumlah opsi Contoh <!DOCTYPE html> <html> <body> <h2>Radio Buttons</h2> <p><strong>input type="radio"</strong> mendefinisikan radio button.</p> <form action="/action_page.php"> <input type="radio" id="male" name="gender" value="male"> <label for="male">Laki-laki</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Perempuan</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Lainnya</label><br><br> <input type="submit" value="Submit"> </form> </body> </html>_ Kotak centang Jenis Masukan<!DOCTYPE html> <html> <body> <h2>Submit Button</h2> <p><strong>input type="submit"</strong> mendefinisikan tombol untuk mengirimkan data dari form ke form-handler.</p> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama Belakang</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> <p>Jika Anda klik "Submit", data form akan dikirim ke halaman bernama "/action_page.php".</p> </body> </html>_4 mendefinisikan kotak centang Kotak centang memungkinkan pengguna untuk memilih opsi ZERO atau MORE dari sejumlah opsi Contoh <!DOCTYPE html> <html> <body> <h2>Checkboxes</h2> <p><strong>input type="checkbox"</strong> mendefinisikan checkbox.</p> <form action="/action_page.php"> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> Aku punya sepeda</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> Aku punya mobil</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> Aku punya kapal</label><br><br> <input type="submit" value="Submit"> </form> </body> </html> Tombol Jenis Masukan<!DOCTYPE html> <html> <body> <h2>Submit Button</h2> <p><strong>input type="submit"</strong> mendefinisikan tombol untuk mengirimkan data dari form ke form-handler.</p> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama Belakang</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> <p>Jika Anda klik "Submit", data form akan dikirim ke halaman bernama "/action_page.php".</p> </body> </html>_3 mendefinisikan sebuah tombol Contoh <!DOCTYPE html>
<html>
<body>
<h2>Input Button</h2>
<input type="button" onclick="alert('Hello World!')" value="Klik disini!">
</body>
</html>
Warna Jenis Masukan<!DOCTYPE html> <html> <body> <h2>Submit Button</h2> <p><strong>input type="submit"</strong> mendefinisikan tombol untuk mengirimkan data dari form ke form-handler.</p> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama Belakang</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> <p>Jika Anda klik "Submit", data form akan dikirim ke halaman bernama "/action_page.php".</p> </body> </html>5 digunakan untuk menentukan kolom input yang harus berisi warna Bergantung pada dukungan browser, pemilih warna mungkin muncul di kolom input Contoh <!DOCTYPE html> <html> <body> <h2>Tampilan Color Picker</h2> <p><strong>input type="color"</strong> digunakan untuk mendefiniskan input field yang harus berisi warna.</p> <form action="/action_page.php"> <label for="favcolor">Pilih warna favoritmu:</label> <input type="color" id="favcolor" name="favcolor" value="#ff0000"> <input type="submit" value="Submit"> </form> <p><b>Catatan:</b> type="color" tidak didukung di Internet Explorer 11 atau Safari 9.1 (atau versi yang lebih lama).</p> </body> </html> Tanggal Jenis Masukan]<!DOCTYPE html> <html> <body> <h2>Submit Button</h2> <p><strong>input type="submit"</strong> mendefinisikan tombol untuk mengirimkan data dari form ke form-handler.</p> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama Belakang</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> <p>Jika Anda klik "Submit", data form akan dikirim ke halaman bernama "/action_page.php".</p> </body> </html>6 digunakan untuk kolom input yang harus berisi tanggal Pemilih tanggal dapat muncul di kolom input tergantung pada dukungan browser Contoh <!DOCTYPE html> <html> <body> <h2>Date Field</h2> <p><strong>input type="date"</strong> digunakan untuk field input yang harus berisi tanggal.</p> <form action="/action_page.php"> <label for="birthday">Tanggal Lahir:</label> <input type="date" id="birthday" name="birthday"> <input type="submit" value="Submit"> </form> <p><strong>Catatan:</strong> type="date" tidak didukung pada browser Safari atau Internet Explorer 11 (atau versi lebih lama).</p> </body> </html> Anda juga dapat menggunakan atribut min dan max untuk menambahkan batas pada tanggal Contoh <!DOCTYPE html> <html> <body> <h2>Field Password</h2> <p><strong>input type="password"</strong> mendefinisikan field untuk menginputkan password.</p> <form action="/action_page.php"> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Password:</label><br> <input type="password" id="pwd" name="pwd"><br><br> <input type="submit" value="Submit"> </form> <p>Karakter difield password disamarkan (ditampilkan dengan simbol bintang atau lingkaran).</p> </body> </html>0 Jenis Masukan Datetime-local<!DOCTYPE html> <html> <body> <h2>Submit Button</h2> <p><strong>input type="submit"</strong> mendefinisikan tombol untuk mengirimkan data dari form ke form-handler.</p> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama Belakang</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> <p>Jika Anda klik "Submit", data form akan dikirim ke halaman bernama "/action_page.php".</p> </body> </html>7 menentukan kolom input tanggal dan waktu, tanpa zona waktu Pemilih tanggal dapat muncul di kolom input tergantung pada dukungan browser Contoh <!DOCTYPE html> <html> <body> <h2>Field Password</h2> <p><strong>input type="password"</strong> mendefinisikan field untuk menginputkan password.</p> <form action="/action_page.php"> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Password:</label><br> <input type="password" id="pwd" name="pwd"><br><br> <input type="submit" value="Submit"> </form> <p>Karakter difield password disamarkan (ditampilkan dengan simbol bintang atau lingkaran).</p> </body> </html>1 Masukkan Jenis Email<!DOCTYPE html> <html> <body> <h2>Submit Button</h2> <p><strong>input type="submit"</strong> mendefinisikan tombol untuk mengirimkan data dari form ke form-handler.</p> <form action="/action_page.php"> <label for="fname">Nama Depan:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Nama Belakang</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> <p>Jika Anda klik "Submit", data form akan dikirim ke halaman bernama "/action_page.php".</p> </body> </html>8 digunakan untuk field input yang harus berisi alamat email Bergantung pada dukungan browser, alamat email dapat divalidasi secara otomatis saat dikirim Beberapa smartphone bahkan mampu mengenali jenis url, dan menambahkan ". com” ke keyboard untuk mencocokkan input url Apa itu Tombol dalam HTML?HTML < tombol > adalah tag pada HTML digunakan untuk membuat tombol yang dapat diklik. Tombol ( button ) adalah sesuatu yang umum digunakan pada saat pengiriman form untuk dikirim ke server.
Apa fungsi tombol pada formulir?Tag Fungsi Tombol dalam membuat Formulir HTML
. Dibandingkan dengan button berfungsi untuk membuat tombol baik itu di dalam form, maupun diluar form. Dibandingkan dengan tombol yang dibuat dengan tag input type=”kirim”, tag tombol menawarkan fleksibilitas yang lebih.
Kelas bawaan bootstrap 4 mana yang menghasilkan tombol yang lebih besar dari ukuran default?btn-lg adalah kelas bootstrap untuk membuat tombol dengan ukuran besar .
Kelas apa yang digunakan dalam bootstrap untuk membuat tombol lebih besar?untuk mengubah ukuran tombol, bootstrap telah menyediakan kelas khusus. Untuk membuat tombol kecil, gunakan kelas. btn-sm. Untuk membuat tombol besar dengan bootstrap, gunakan class . btn-lg . |
Ketik tombol dalam html
Pos Terkait
Copyright © 2024 idkuu.com Inc.
