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...

Formulir 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.

Alasan 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.

Ingat, saya menulis sebelumnya bahwa topik ini memberi saya kesenangan nyata. 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.

Meskipun 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.

Ini 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.

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.

Anda 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.

• tutorial

Ini bukanlah panduan komprehensif tentang tombol atau contoh desain yang luar biasa, melainkan upaya untuk menunjukkan bahwa ada perbedaan antara tautan dan tombol.

Pertama-tama, untuk seorang desainer yang membuat layout website, tetapi tidak melengkapi detail khas web tersebut. Sebuah upaya aneh untuk menjelaskan bahwa situs web berada di luar batas-batas pencetakan datar.

Kedua, bagi perancang tata letak yang menerima tata letak tanpa menyatakan, agar ada tempat untuk mengirimkan perancangnya.

Ketiga, daripada mengomel lagi tentang perbedaan tombol/tautan dan perlunya desain negara, berikan saja tautannya.

Tampilkan CSS

tombol ( margin: .8rem; ukuran font: 1.42rem; padding: 1rem; latar belakang: hsla(180, 90%, 64%, 1); warna: hsla(180, 90%, 12%, 1); teks- bayangan: 1px 1px 1px hsla(180, 90%, 32%, 1); bayangan kotak: -4px 4px 0 0 hsla(180, 90%, 22%, .87), -3px 4px 3px hsla(180, 42 %, 11%, 1), 1px 5px 4px hsla(180, 42%, 11%, 1), -4px 1px 0 0 hsla(180, 90%, 32%, 1), sisipan 0 0 1px 0 hsla(180 , 90%, 90%, 1); batas: 1px hsla(180, 92%, 56%, 1) padat; batas atas warna: hsla(180, 92%, 64%, 1); tidak ada; posisi: transisi relatif: semua kemudahan masuk .22, 1); bayangan teks: 1px 1px 1px hsla(420, 90%, 32%, 1); , 1) padat; warna batas atas: hsla(420 , 90%, 64%, 1); bayangan kotak: -4px 4px 0 0 hsla(420, 90%, 22%, .87), -3px 4px 3px hsla(420, 42%, 11%, 1), 1px 5px 4px hsla(420, 42%, 11%, 1), -4px 1px 0 0 hsla(420, 90%, 32%, 1), sisipan 0 0 1px 0 hsla(420, 90%, 90%, 1 ) tombol:fokus ( latar belakang: hsla(108, 90%, 42%, 1); 87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1 ), sisipkan 1px 1px 4px 0 hsla(420, 0%, 22%, 1); )

Selain layout dengan keadaan link atau tombol biasa, desainer wajib menyediakannya berbagai negara bagian, agar tidak menyulitkan perancang tata letak.
Misalnya seperti ini:

Terima kasih telah membaca. Semua yang tertulis di sini tidak 100% merupakan kebenaran hakiki.
Gudang

Tautan ke repositori untuk artikel ini. Jika ingin menambah atau mengoreksi silahkan kirimkan Pull Request

Hanya pengguna terdaftar yang dapat berpartisipasi dalam survei ini. , Silakan.

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.

Tempatkan 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.

Karena 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.

Anda dapat menggunakan acara onclick untuk menavigasi ke halaman web tertentu dengan menambahkannya ke elemen. 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.

Ada dua pendekatan untuk membuat tombol pada website dalam bentuk link. Mari kita lihat masing-masing secara detail.

Ini 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.).