HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのonsubmitイベント属性とは？構文と使い方をサンプルコードで解説

HTML onsubmitイベント属性とは

HTMLのonsubmitイベント属性は、HTMLドキュメント内でフォームが送信された瞬間に、指定したJavaScriptを実行するためのイベントハンドラです。フォームの入力値チェックや、送信前の確認ダイアログの表示など、ユーザー操作に応じた処理を組み込みたい場合に活用されます。

なお、onsubmitイベント属性は<form>要素専用であり、それ以外の要素には使用できない点に注意しましょう。

基本構文

onsubmitイベント属性の書き方は以下のとおりです。

<tagname onsubmit="script"></tagname>

「script」の部分には、フォーム送信時に実行したいJavaScriptの関数名などを記述します。

実装例

次のサンプルでは、テキストエリアを含むフォームにonsubmitイベント属性を設定し、「SUBMIT」ボタンがクリックされたときに確認ダイアログを表示しています。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
        padding: 20px;
    }
    textarea {
        border: 2px solid #fff;
        background: transparent;
        font-size: 1rem;
    }
    ::placeholder {
        color: #000;
        font-size: 1rem;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
</head>
<body>
<h1>HTML onsubmit Event Attribute Demo</h1>
<form onsubmit="submitFn()">
<textarea placeholder="Enter your message here" rows='8' cols="50"></textarea>
<input type="submit" value="SUBMIT" class="btn">
</form>
<div class="show"></div>
<script>
    function submitFn() {
        confirm("Form was submitted");
    }
</script>
</body>
</html>

実行結果

HTMLのonsubmitイベント属性とは？構文と使い方をサンプルコードで解説

画面上の「SUBMIT」ボタンをクリックしてみてください。onsubmitイベント属性が動作し、以下のようにフォームが送信されたことを知らせる確認ダイアログが表示されます。

HTMLのonsubmitイベント属性とは？構文と使い方をサンプルコードで解説

補足：フォームの送信をキャンセルする方法

入力内容に不備がある場合など、条件によってフォームの送信をキャンセルしたい場面も多いでしょう。その場合は、イベントハンドラでfalseを返します。具体的には、<form onsubmit="return submitFn()"> のようにreturnを付けて関数を呼び出し、関数内でバリデーション（入力チェック）の結果に応じてreturn false;を返すことで、送信処理を中断できます。フォームの必須チェックや入力形式の検証を実装する際に非常に便利なテクニックなので、ぜひ覚えておきましょう。

  1. HTML ondragendイベント属性の使い方を徹底解説

    ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q

  2. HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説

    HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード