[解決済み] リンクのように動作するHTMLボタンを作成する方法

質問

リンクのように動作するHTMLボタンを作りたいのですが、どうすればいいですか？つまり、ボタンをクリックすると、あるページにリダイレクトされるのです。できるだけアクセシブルなものにしたいです。

また、URLに余分な文字やパラメータが含まれないようにしたいです。

どうすれば実現できますか？

これまで投稿された回答を参考に、現在このようにしています。

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

が、これの問題点は サファリ と インターネットエクスプローラー の場合、URLの末尾にクエスチョンマーク文字が追加されます。URLの末尾に文字を追加しない解決策を見つける必要があります。

これには、他に2つの解決策があります。JavaScriptを使用するか、リンクがボタンのように見えるようにスタイルを設定することです。

JavaScriptを使用する。

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

しかし、これには明らかにJavaScriptが必要で、そのためにスクリーン・リーダーが利用しにくくなっています。リンクのポイントは、別のページに移動することです。ですから、ボタンをリンクのように動作させようとするのは、間違った解決方法です。私が提案するのは、リンクと ボタンのように見えるようにする .

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

解決方法は？

HTML

プレーンなHTMLの方法は、それを <form> で、目的のターゲットURLを指定します。 action 属性で指定します。

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

必要であれば、CSS display: inline; をフォームに貼り付けて、周囲のテキストとのフローを維持します。代わりに <input type="submit"> を使用することもできます。 <button type="submit"> . 唯一の違いは <button> 要素では、子要素を許可しています。

直感的に期待できるのは <button href="https://google.com"> と類似しています。 <a> 要素によると、残念ながらこの属性は存在しません。 HTML仕様 .

CSS

CSSが許可されている場合、単に <a> を使い、ボタンのように見せる。 appearance プロパティ ( Internet Explorerのみ非対応 ).

<a href="https://google.com" class="button">Go to Google</a>

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

または、以下のような多くのCSSライブラリの中から1つを選びます。 ブートストラップ .

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

JavaScript

JavaScriptが許可されている場合は window.location.href .

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

の代わりに <input type="button"> を使用することもできます。 <button> . 唯一の違いは <button> 要素では、子要素を許可しています。