onsubmit

オンサブミット（属性）

意味フォーム送信イベント

onsubmitとは？

onsubmitは、フォームが送信されるときに発生するイベントを扱うためのイベントハンドラーです。フォームの検証を行ったり、フォームが送信される前に特定のスクリプトを実行したりするのに使います。

onsubmitの具体的な使い方

シンプルなフォーム送信イベントの例

<form onsubmit='alert("フォームが送信されました")'>
  <!-- フォーム要素 -->
</form>

この例では、フォームが送信される前に'validateForm'関数を呼び出しています。この関数がtrueを返す場合、フォームは送信されます。falseを返す場合、フォームの送信はキャンセルされます。

フォーム送信時のバリデーションを行う例

<form onsubmit='return validateForm()'>
  <input type='text' id='name' required>
  <input type='submit' value='送信'>
</form>

<script>
function validateForm() {
  var name = document.getElementById('name').value;
  if (name == '') {
    alert('名前を入力してください');
    return false;
  }
  return true;
}
</script>

この例では、フォームが送信される前にvalidateForm関数を呼び出して入力値をチェックしています。入力が空の場合、アラートを表示してフォームの送信をキャンセルします。

onsubmitに関するよくある質問

Q. onsubmitはいつ実行されますか？

A. onsubmitイベントは、フォームが送信されようとするときに実行されます。ユーザーがフォームの送信ボタンをクリックしたり、Enterキーを押してフォームを送信しようとしたときに発生します。

Q. onsubmitでフォーム送信を防げますか？

A. はい、onsubmitイベントハンドラーがfalseを返すか、event.preventDefault()を呼び出すことで、フォームの送信を防ぐことができます。これは入力値の検証などに役立ちます。

Q. onsubmitとaddEventListenerの違いは？

A. onsubmitは属性としてHTML内に直接記述できる一方、addEventListenerはJavaScriptコード内で使用します。addEventListenerの方が複数のイベントリスナーを追加できるなど、より柔軟性があります。

HTMLのonsubmitについても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、HTMLのonsubmitやdisabled、placeholder、multiple、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。