リンクのように動作する HTML ボタンを作成するにはどうすればいいですか? 質問する

html

<form>単純な HTML の方法は、属性で目的のターゲット URL を指定する に配置することですaction。

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

必要に応じて、display: inline;フォームに CSS を設定して、周囲のテキストとのフローを維持します。<input type="submit">上記の例の の代わりに を使用することもできます<button type="submit">。唯一の違いは、要素が子要素を許可することです<button>。

<button href="https://google.com">直感的に、要素に類似したものを使用できると予想されますが<a>、残念ながら、この属性は存在しません。HTML仕様。

CS

CSS が許可されている場合は、<a>ボタンのように見えるようにスタイルを設定した を使用します。

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

a.button {
    padding: 1px 6px;
    border: 1px outset buttonborder;
    border-radius: 3px;
    color: buttontext;
    background-color: buttonface;
    text-decoration: none;
}

または、次のような多くのCSSライブラリから1つを選択してください。ブートストラップ。

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

注目すべきは、歴史的に見て、CSSappearance:buttonプロパティは一部のブラウザでも同様に機能しましたが、これは実験的なもので、最終的には誤った機能であるとみなされました。要素にはnoneまたはのみautoが許可されます<a>。

JavaScript

JavaScript が許可されている場合は、 を設定しますwindow.location.href。

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

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