Cara mengklik tombol di html. Cara membuat tombol HTML yang berfungsi sebagai tautan
Anda menggunakannya, um... baiklah, ketika Anda ingin meletakkan tombol di halaman yang dapat diklik pengguna, bukan? Sayangnya, segalanya menjadi sedikit lebih rumit. Pada prinsipnya, ini mendekati kebenaran, tapi mari kita pelajari masalahnya lebih dalam.
Elemen itu sendiri terlihat seperti ini:
Lakukan sesuatu
Apa hasil paling umum dari mengklik sesuatu di situs web? Navigasikan ke URL baru seolah-olah Anda telah mengeklik tautan ( elemen ).
Elemen itu sendiri tidak dapat melakukan hal ini. Ada banyak pembicaraan tentang mengizinkan "href di mana-mana", tetapi tidak ada hasil.
Ketika sebuah tombol diklik, tindakan tertentu sebenarnya dilakukan jika konteks yang sesuai digunakan...
Tombol adalah elemen formulirFormulir web mungkin berisi tombol untuk melakukan (konfirmasi) tindakan. Anda mungkin mengira tampilannya seperti ini:
Elemen shell, secara default, berperilaku persis seperti yang ditunjukkan di atas.
Kirim
Namun, formulir juga dapat memiliki tombol batal. Anda dapat menduplikasi jenis tindakan tombol dengan mengubah perilaku default dari melakukan (konfirmasi) tindakan menjadi membatalkan:
Mengatur ulang
Mengklik tombol ini akan menghapus semua kolom input lainnya (dan area teks) dari blok induk.
Tombol dapat berisi kontenAlasan utama menggunakan suatu elemen adalah karena elemen tersebut berisi tag pembuka dan penutup (). Artinya dapat dibedakan dari kode lainnya. Dalam praktiknya, situasi berikut sering muncul:
Mengonfirmasi
Selama masih ada, konten campuran ini akan ditampilkan di layar.
Sejauh yang saya tahu, tidak ada batasan khusus mengenai apa yang dapat Anda masukkan ke dalam sebuah tombol, sehingga Anda dapat memasukkan apa pun yang Anda inginkan di sana, menciptakan beberapa tombol yang sangat mewah. Dimungkinkan juga untuk menggunakan elemen semu.
Mari kita tinggalkan topik gaya untuk saat ini browser yang berbeda biasanya memiliki gaya khusus yang diterapkan pada tombol. Jika mau, Anda dapat mempertahankan gaya yang diterapkan oleh browser, atau Anda dapat menghapusnya sepenuhnya, lalu gaya default Anda akan menggantikan gaya browser.
Harap dicatat: “jika sebuah tombol tidak memiliki href yang valid, itu hanya sebuah elemen”Ingat, saya menulis sebelumnya bahwa topik ini memberi saya kesenangan sejati. Hal inilah yang menginspirasi saya untuk menulis artikel ini. Saya membayangkan betapa senangnya saya melihat berbagai kejadian. Seperti:
Saya sudah muak dengan tombol-tombol ini.
Kemungkinan besar, kode di atas memiliki arti seperti ini: Saya akan mengklik tombol untuk melakukan sesuatu dengan JavaScript. Bagaimanapun, ini tampaknya lebih baik daripada menggunakan yang biasa, karena Anda mendapatkan kemampuan untuk mengubah tampilan kursor dan semua gaya lainnya secara default.
Di luar aku tidak berguna.
Namun, tampaknya masih lebih baikMeskipun tidak melakukan apa pun saat berada di luar, menurut saya, elemen ini tetap lebih baik digunakan untuk tindakan lain yang tidak perlu membuka halaman lain. Malah, itu lebih baik daripada tautan palsu.
Bagus. Mari masukkan beberapa JavaScriptIni mungkin solusi terbaik. Jika JavaScript diperlukan untuk tindakan apa pun yang terkait dengan klik, maka untuk sebuah elemen, pada prinsipnya, Anda dapat melakukannya tanpa menjalankan JS.
Tapi kita bisa melakukan hal berikut:
// 1. Membuat tombol var button = document.createElement("button"); button.innerHTML = "Lakukan Sesuatu"; // 2. Tempatkan var body = document.getElementsByTagName("body"); body.appendChild(tombol); // 3. Tambahkan pemrosesan tindakan button.addEventListener ("klik", function() ( alert("melakukan sesuatu"); ));
Anda dapat dengan mudah menjadikan "tombol tambahkan" sebagai bagian dari alur kerja JavaScript Anda.
Kapan sebaiknya menggunakan tautan?Jika Anda memiliki transisi hypertext ke halaman lain, maka lebih masuk akal untuk memformatnya dengan link sehingga Anda dapat menggunakan jangkar. Bahkan jika Anda mengubah perilakunya melalui JavaScript.
Ini perbaikan progresif dalam penggunaan terbaiknya. Misalnya:
- Tombol pencarian biasanya akan menyebabkan skrip pencarian Ajax dijalankan - sementara link mungkin hanya menunjuk ke halaman pencarian;
- Tombol "terbitkan" diluncurkan langkah selanjutnya menerbitkan sesuatu yang dibutuhkan pengguna - tetapi tautannya mungkin mengarah ke halaman / terbitkan /;
- Tombol dengan thumbnail gambar membuka panel terpisah tempat gambar ditampilkan ukuran lebih besar— dan tautannya bisa saja berupa URL ke gambar yang lebih besar itu.
Jika semuanya gagal, masukkan tombol dengan JavaScript.
Masalah TerkaitAnda mungkin mendapatkan sesuatu yang mirip dengan apa yang saya lakukan!
Saya baik-baik saja
Tapi kamu sendiri masih belum baik-baik saja. MDN membahas masalah ini secara rinci:
Harap diperhatikan: Berhati-hatilah saat menandai tautan dengan fungsi tombol. Tindakan tombol biasanya dipanggil menggunakan Spacebar, sedangkan tindakan tautan dipanggil melalui tombol Enter.
Anda juga perlu menambahkan tombol pengendali tindakan yang akan merespons penekanan Spasi untuk memastikan konsistensi dengan tombol aslinya.
Ya, itu saja. Dan um... lakukan hal-hal interaktif dengan benar.
Terjemahan artikel “Kapan Menggunakan Elemen Tombol” disiapkan oleh tim proyek yang ramah.
Ada dua pendekatan untuk membuat tombol pada website dalam bentuk link. Mari kita lihat masing-masing secara detail.
1. Tombol berbentuk gambarIni adalah pendekatan paling sederhana untuk membuat tombol sebagai tautan di situs web. Untuk melakukan ini, Anda hanya perlu menemukan gambar yang cocok untuk tombol tersebut. Misalnya, gambar dengan tombol Anda disebut button.jpg. Kemudian, untuk membuat linknya, kodenya harus seperti berikut:
...Inilah yang terjadi di halaman situs:
Ini adalah opsi paling dasar. Saya menyarankan Anda untuk membaca tentang tag dan menandai untuk menyesuaikan tombol persis dengan kebutuhan Anda.
Omong-omong, ada situs web khusus untuk membuat gambar untuk tombol: http://dabuttonfactory.com/. Di sini Anda dapat membuat tombol secara gratis sesuai selera Anda (mengatur gaya, memilih gambar, menulis teks yang sesuai, dll.).
2. Tombol dengan menggunakan HTML menandaiOpsi ini juga merupakan salah satu metode untuk membuat tombol sebagai tautan. Saya akan memberikan contoh dasar tombol yang dibuat menggunakan tag dan:
... ...Seperti inilah kira-kira tampilan halamannya:
Alih-alih URL1 dan URL2, Anda perlu menulis alamat halaman yang ingin Anda tuju. Jika Anda ingin tautan terbuka di tab baru (analog dengan atribut target="_blank" dari tag a), maka alih-alih onclick="javascript:window.location="..."" Anda perlu menulis onclick=" javascript:window.open ="..."" (ganti lokasi dengan terbuka).
Saya hampir yakin Anda ingin mendesain tombol secara berbeda (agar sesuai dengan desain situs Anda). Untuk melakukan ini, perkenalkan kelas btn:
.btn ( //Mengatur gaya umum untuk tinggi tombol :30px; warna tepi :#c2e254 #9bb838 #9bb838 #c2e254 ; gaya tepi :solid ; lebar tepi :1px ; latar belakang :#c2e254 ; kursor :penunjuk ; ) . btn:hover ( //Gaya tombol saat kursor berada di atasnya warna tepi :#FFCC66 #FFFF99 #FFFF99 #FFCC66 ; gaya tepi :solid ; lebar tepi :1px ; latar belakang :#FFFF99 ; ) .btn: fokus ( / /Gaya tombol saat berada di latar belakang fokus :#ddd ; warna tepi :#ddd #333 #333 #ddd ; gaya tepi :solid ; lebar tepi :1px ) .btn:aktif ( //Gaya tombol saat diklik latar belakang :#ff0000 ; warna batas :#ddd #333 #333 #ddd ; gaya batas :solid ; lebar batas :1px ;Setelah ini, tombolnya akan terlihat seperti ini di halaman.
Dukungan browser untuk fitur CSS3 dan terkait penggunaan aktif dalam desain web, gradien, bayangan, dan pembulatan telah menyebabkan kaburnya garis jelas antara elemen antarmuka bawaan dan elemen yang “digambar”. Faktanya, pengguna tidak perlu peduli dengan apa yang ada di depannya, sebuah tautan atau tombol, meskipun keduanya terlihat sama persis, karena keduanya dapat diklik. Pada kenyataannya, penggunaan satu elemen yang salah dan bukan elemen lainnya dapat menyebabkan pelanggaran pemahaman logika situs. Dengan kata lain akan merepotkan dan tidak nyaman bagi pengunjung situs untuk menggunakannya.
Mari kita membuat tautan dan tombol, mendesainnya dengan cara yang sama dan melihat perbedaannya satu sama lain selain desainnya. Pada contoh 1, saya memasukkan tag ke dalam kode dan menerapkan gaya desain berkelas pada keduanya, sambil mencoba menghilangkan perbedaan sehingga kedua elemen ini tampak mirip satu sama lain, seperti kembar.
Contoh 1. Desain elemen
HTML5 CSS3 YAITU Cr Op Sa Fx
Tautan dan tombol .desain ( tampilan: blok sebaris; /* Elemen blok sebaris */ padding: 5px 20px; /* Tambahkan bidang */ dekorasi teks: tidak ada; /* Hapus garis bawah dari tautan */ kursor: penunjuk; / * Kursor tangan */ latar belakang: #deefff; /* Latar belakang untuk browser yang tidak mendukung gradien */ /* Gradien */ latar belakang: -moz-linear-gradient(atas, #deefff 0%, #98bede 100%); latar belakang: -webkit-gradient(linear, kiri atas, kiri bawah, color-stop(0%,#deefff), color-stop(100%,#98deefff 0%,#98bede 100%); -o-linear-gradient(atas, #deefff 0%,#98bede 100%); latar belakang: -ms-linear-gradient(atas, #deefff 0%,#98bede 100%); #deefff 0%,#98bede 100%); radius batas: 10px; /* Bulatkan sudut */ batas: 1px solid #008; /* Tambahkan batas biru */ font : 12px/1 Arial, sans-serif; /* Font rantai */ warna: #2c539e; /* Warna teks dan tautan */ )
Berikut tampilannya di browser Chrome (Gambar 1).
Sekilas tidak ada perbedaan. Kedua elemen tersebut sama; saat Anda mengarahkan mouse ke atasnya, elemen tersebut berubah menjadi “tangan”. Anda dapat mengklik dan menunggu nada jawab. Di sinilah hal-hal kecil dimulai dimana iblis berada. Saya mensistematisasikan perbedaan dalam hal-hal kecil.
- di baris status, browser menunjukkan alamat tautan yang dituju;
- tautan dapat dibuka di jendela atau tab baru dengan tombol tengah mouse;
- tautan dapat disimpan melalui menu konteks browser.
- Saat tombol diklik, tombol akan menuju ke halaman yang ditentukan di dalam atribut tindakan dari tag. Tentu saja, ini berfungsi jika kita memiliki tombol yang tertanam dalam formulir. Pada contoh di atas, Anda bahkan dapat mengeklik tombol tersebut, namun tidak akan menghasilkan apa pun;
- Anda dapat melampirkan fungsi JavaScript ke tombol, yang akan melakukan sesuatu yang ajaib yang tidak bisa dilakukan oleh tautan.
Ternyata hasil mengklik sebuah tombol tidak bisa diprediksi, tidak seperti link. Di sini kita tahu pasti bahwa halaman baru akan terbuka. Dalam kasus tombol, halaman baru mungkin terbuka, skrip dapat dijalankan, atau tidak terjadi apa-apa sama sekali. Selain itu, terdapat kebingungan antara tombol dan tautan. Tombol super bergaya kami tidak terlihat seperti itu sendiri, dan untuk menunjukkan bahwa tombol tersebut dapat diklik, kami menambahkan properti kursor ke gaya dengan penunjuk nilai. Namun hal ini mengarah pada fakta bahwa tombol tersebut sekarang dianggap sebagai tautan dan beberapa pengguna mencoba membuka tombol tersebut di tab baru, dan ini, tentu saja, tidak mungkin.
Apa yang bisa dilakukan untuk menghilangkan kontradiksi ini. Ada beberapa pilihan.
Teks bertitik ditunjukkan pada Gambar. 2. Agar lebih jelas, saya sedikit memperbesar ukuran font.
Beras. 2. Tombol dengan teks garis bawah putus-putus
Sekali lagi, jika mengklik tombol membuka halaman lain, garis putus-putus tidak diperlukan karena akan membingungkan pengguna. Jadi metode 2 hanya cocok untuk skrip yang melakukan beberapa pekerjaan dalam halaman yang sama.
Tombol itu sendiri tidak dapat dijadikan tautan; HTML melarang penggabungan elemen (serta ) dan . Oleh karena itu, Anda tidak dapat menyarangkan tombol di dalam tautan, atau tautan di dalam tombol. Ada tiga cara untuk memastikan bahwa ketika Anda mengklik tombol, halaman web akan terbuka.
Menggunakan HTMLTempatkan tombol di dalam elemen dan untuk form kita tentukan atribut action dengan alamat halaman web (contoh 1). Selain itu Anda dapat menambahkan atribut sasaran dengan nilai _blank , maka halaman web akan terbuka di tab browser baru.
Contoh 1. Atribut tindakan
Tombol Ikuti tautan
Dalam contoh ini, mengklik tombol akan membuka halaman web new.html di tab baru.
Satu formulir tidak dapat ditempatkan di dalam formulir lainnya. Sebelum menambahkan tombol, pastikan Anda hanya memiliki satu formulir.
Menggunakan CSSKarena tombol tidak dapat dijadikan tautan, maka kita tinggalkan sama sekali dan menata tautan tersebut sehingga terlihat seperti tombol. Contoh 2 menunjukkan kelas btn saat menambahkannya ke sebuah elemen tautan mengubah desainnya.
Tombol .btn ( tampilan: blok sebaris; /* Elemen blok sebaris */ latar belakang: #8C959D; /* Warna latar belakang abu-abu */ warna: #fff; /* Warna teks putih */ bantalan: 1rem 1,5rem; /* Margin di sekitar teks */ dekorasi teks: tidak ada; /* Hapus garis bawah */ radius batas: 3px; /* Bulatkan sudut */ ) Ikuti tautannya
Hasil contoh ini ditunjukkan pada Gambar. 1.
Menggunakan JavaScriptAnda dapat menggunakan acara onclick untuk menavigasi ke halaman web tertentu dengan menambahkannya ke file . Di dalam onclick kita menulis document.location , dan sebagai nilainya alamat halaman web yang diinginkan (contoh 3). Perhatikan kombinasi tanda kutip; alamat halaman web diapit tanda kutip tunggal.