HTMLフォームのエラーチェックと送信と：初心者向けガイド

TOPHTMLの知識HTMLフォームのエラーチェックと送信と：初心者向けガイド

1. フォームの送信
2. エラーチェック
3. 他にもいろいろあるフォームタグ
1. 3.1 セレクトボックス
2. 3.2 ファイルのアップロード
まとめ

それでは、フォームの送信、エラーチェック、および応用的なトピックについて掘り下げるセクションを追加しましょう。

1. フォームの送信

フォームの作成ができたら、次はデータをサーバーに送信する方法を学びましょう。
これは主に action 属性で指定されたURLへのリクエストです。

今回はgetを用いてURLにどういった変化が起こるのかを見てみましょう。

こちらにフォーム用のHTMLを用意しておきましたので開発用のテキストエディタにコピペをして
index.htmlとして保存してください。

HTMLフォームの作り方

2. エラーチェック

名前の入力が無かったり、パスワードが入力されていなかったりと、必要な情報が無い状態では
フォームの送信をしてほしくないですよね？
そんな時に使えるエラーチェックを用意しました

以下のコードを、開発用のテキストエディタを開きコピペしてください。
保存先はindex.htmlと同じ階層に「js」ディレクトリを作成してその中に保存してください。


function validateForm() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var genderMale = document.getElementById("male").checked;
  var genderFemale = document.getElementById("female").checked;
  var subscribe = document.getElementById("subscribe").checked;

  if (username === "" || password === "") {
      alert("ユーザー名とパスワードを入力してください");
      return false;
  }

  if (!genderMale && !genderFemale) {
      alert("性別を選択してください");
      return false;
  }

  if (!subscribe) {
      alert("同意が必要です");
      return false;
  }

  return true;
}

こちらにファイル一式まとめました

簡易フォームHTML、JSセット

3. 他にもいろいろあるフォームタグ

3.1 セレクトボックス

生年月日や都道府県の登録などで見かけたりしませんか？<select name=”year”><option></option></select>

<select id="year" name="year">
  <option value="2023">2023</option>
  <option value="2022">2022</option>
  <option value="2021">2021</option>
</select>
<label for="year">年</label>
<select id="month" name="month">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>
<label for="month">月</label>

3.2 ファイルのアップロード

普段はそんなに見かけないかも<input type=”file”>
つかうmethodは”post”で。

<form action="/upload" method="post" enctype="multipart/form-data">
    <label for="file">ファイルを選択:</label>
    <input type="file" id="file" name="file">
    <input type="submit" value="アップロード">
</form>

サーバーにファイルをアップするときに使うけど、最近はあまり見かけないかも