【HTML入門】HTMLタグでのページ移動方法 | a,input,buttonタグ

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、HTMLタグでのページ移動・画面遷移方法について解説します。

結論から言うと、HTMLタグでのページ移動はaタグ, inputタグ, buttonタグの3つのタグでそれぞれ実装できます。

1 aタグでのページ移動
2 inputタグでのページ移動
3 buttonタグでのページ移動
4 Sample-Code-全文
5 おすすめ書籍(HTML&CSS編)
6 Twitterやってます！Follow Me！
7 参考・引用
8 最近の投稿

aタグでのページ移動

aタグでのページ移動は、href属性にURL-Pathを記述すれば完了です。

<h3>a-Tagでの画面遷移</h3>
<a href="https://masanyon.com/" target="_blank">No Change No Life I/O🔥</a>

inputタグでのページ移動

inputタグでのページ移動は、onclickイベントを使います。

構文: onclick=”location.href=’URL-Path'”

上記のように、onclickイベントに location.href=’URL-Path’ を記述します。

また、前のページに戻る際には、history.back() で戻るボタンを実装できます。

<h3>input-Tagでの画面遷移</h3>
<p>input-Tag に onclick-Event で Page遷移するように記述する。</p>
<p>構文: onclick="location.href='URL-Path'"</p>
<input type="button" onclick="location.href='https://masanyon.com/'" value="Robotama-Home" >

<h4>直前のPageに戻る場合</h4>
<p>構文: onclick="history.back()"</p>
<input type="button" onclick="history.back()" value="戻る" >

buttonタグでのページ移動

buttonタグでのページ移動も、onclickイベントに location.href=’URL-Path’ を記述します。

構文: onclick=”location.href=’URL-Path'”

h3>buttonタグでの画面遷移</h3>
<p>button-Tag に onclick-Event で Page遷移するように記述する。</p>
<p>構文: onclick="location.href='URL-Path'"</p>
<button type="button" onclick="location.href='https://masanyon.com/'">グンマー帝国-Home</button>

<h4>直前のPageに戻る場合</h4>
<p>構文: onclick="history.back()"</p>
<button type="button" onclick="history.back()">戻る</button>

Sample-Code-全文

Sample-Codeの全文を掲載するので活用してみてください。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page-Moving-Test🔥</title>
</head>
<body>
    <h1>Page-Moving-Robotama🔥</h1>

    <ol>
        <li>
            <h3>a-Tagでの画面遷移</h3>
            <a href="https://masanyon.com/" target="_blank">No Change No Life I/O🔥</a>
        </li>
        <li>
            <h3>input-Tagでの画面遷移</h3>
            <p>input-Tag に onclick-Event で Page遷移するように記述する。</p>
            <p>構文: onclick="location.href='URL-Path'"</p>
            <input type="button" onclick="location.href='https://masanyon.com/'" value="Robotama-Home" >

            <h4>直前のPageに戻る場合</h4>
            <p>構文: onclick="history.back()"</p>
            <input type="button" onclick="history.back()" value="戻る" >
        </li>
        <li>
            <h3>buttonタグでの画面遷移</h3>
            <p>button-Tag に onclick-Event で Page遷移するように記述する。</p>
            <p>構文: onclick="location.href='URL-Path'"</p>
            <button type="button" onclick="location.href='https://masanyon.com/'">グンマー帝国-Home</button>

            <h4>直前のPageに戻る場合</h4>
            <p>構文: onclick="history.back()"</p>
            <button type="button" onclick="history.back()">戻る</button>
        </li>
        <li>
            <h3>参考・引用</h3>
            <a href="https://qiita.com/SUGISHIA/items/d4d8b48be48767c17815">
                inputタグ、buttonタグでの画面遷移の記述について
            </a>
        </li>
    </ol>
</body>
</html>