Pertanyaan Bagaimana cara membuat tombol HTML yang bertindak seperti tautan?


Saya ingin membuat tombol HTML yang berfungsi seperti tautan. Jadi, ketika Anda mengklik tombol, ia akan diarahkan ke halaman. Saya ingin itu dapat diakses semudah mungkin.

Saya juga ingin agar tidak ada karakter tambahan, atau parameter di URL.

Bagaimana saya bisa mencapai ini?


Berdasarkan jawaban yang diposting sejauh ini, saat ini saya melakukan ini:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

tetapi masalah dengan ini adalah bahwa dalam Safari dan Internet Explorer, itu menambahkan karakter tanda tanya ke bagian akhir URL. Saya perlu mencari solusi yang tidak menambahkan karakter apa pun ke bagian akhir URL.

Ada dua solusi lain untuk melakukan ini: Menggunakan JavaScript atau menata tautan agar terlihat seperti tombol.

Menggunakan JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Tapi ini jelas membutuhkan JavaScript, dan untuk alasan itu kurang dapat diakses oleh pembaca layar. Titik tautan adalah pergi ke halaman lain. Jadi mencoba membuat tombol bertindak seperti tautan adalah solusi yang salah. Saran saya adalah Anda harus menggunakan tautan dan gaya itu agar terlihat seperti tombol.

<a href="/link/to/page2">Continue</a>

1369
2018-05-25 16:39


asal


Jawaban:


HTML

Cara HTML biasa adalah memasukkannya ke dalam <form> dimana Anda menentukan URL target yang diinginkan di action atribut.

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

Jika perlu, atur CSS display: inline; pada formulir untuk menyimpannya dalam aliran dengan teks sekitarnya. Dari pada <input type="submit"> dalam contoh di atas, Anda juga bisa menggunakan <button type="submit">. Satu-satunya perbedaan adalah bahwa <button> elemen memungkinkan anak-anak.

Anda akan secara intuitif berharap dapat menggunakannya <button href="http://google.com"> analog dengan <a> elemen, tetapi sayangnya tidak, atribut ini tidak ada sesuai dengan Spesifikasi HTML.

CSS

Jika CSS dibolehkan, gunakan saja <a> yang Anda gaya terlihat seperti tombol menggunakan antara lain appearance properti (hanya dukungan Internet Explorer saat ini (Juli 2015) masih buruk).

<a href="http://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Atau pilih salah satu dari banyak perpustakaan CSS seperti Bootstrap.

<a href="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript

Jika JavaScript dibolehkan, atur window.location.href.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

1578
2018-05-25 16:40



<button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>

406
2018-05-25 16:44



Jika itu tampilan visual dari tombol yang Anda cari dalam tag jangkar HTML dasar maka Anda dapat menggunakan Twitter Bootstrap kerangka kerja untuk memformat salah satu dari tautan / tombol jenis HTML umum berikut untuk ditampilkan sebagai tombol. Harap perhatikan perbedaan visual antara versi 2, 3 atau 4 dari kerangka:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Bootstrap (v4) penampilan sampel:

Sample output of Boostrap v4 buttons

Bootstrap (v3) penampilan sampel:

Sample output of Boostrap v3 buttons

Bootstrap (v2) penampilan sampel:

Sample output of Boostrap v2 buttons


396
2017-12-05 08:59



Menggunakan:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

Sayangnya, markup ini tidak berlaku lagi di HTML5 dan tidak akan memvalidasi atau selalu berfungsi sebagai berpotensi diharapkan. Gunakan pendekatan lain.


130
2018-05-25 16:42



Pada HTML5, tombol mendukung formaction atribut. Yang terbaik dari semuanya, tidak diperlukan Javascript atau tipuan.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Peringatan

  • Harus dikelilingi oleh <form> tag.
  • <button> jenis harus "kirim" (atau tidak ditentukan), saya tidak bisa membuatnya berfungsi dengan mengetikkan "tombol". Yang membawa poin di bawah ini.
  • Mengganti aksi default dalam formulir. Dengan kata lain, jika Anda melakukan ini di dalam bentuk lain, itu akan menyebabkan konflik.

Referensi: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Dukungan Browser: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility


90
2017-07-02 19:03



Ini sebenarnya sangat sederhana dan tanpa menggunakan elemen bentuk apa pun. Anda cukup menggunakan tag <a> dengan sebuah tombol di dalam :).

Seperti ini:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

Dan itu akan memuat href ke halaman yang sama. Ingin halaman baru? Cukup gunakan target="_blank".


41
2018-02-11 15:29



Jika Anda menggunakan formulir di dalam, tambahkan atribut ketik = "reset" bersama dengan elemen tombol. Ini akan mencegah aksi form.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

35
2018-01-24 06:59



<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

24
2018-05-25 16:41