WEB Tips デザイン・コーディング

フォームの年齢・生年月日セレクトボックスを動的に作るJavaScript,PHP

2022-07-21

本記事にはプロモーションが含まれています。

フォームの年齢・生年月日セレクトボックスを動的に作るJavaScript,PHP

問い合わせや資料請求フォームで、生年月日や年齢はよくある入力項目です。

でもこれをHTMLで一つ一つ作るのって面倒ですよね。ここではJavaScriptとPHPで、生年月日や年齢のセレクトボックスを動的に生成するコードをまとめました。

20歳から80歳までの年齢を出力するJavaScript、PHP

下になるHTMLは以下のような形です。

<form>
    <label for="ageSelect">年齢:</label>
    <select id="ageSelect">
      <!-- JavaScriptやPHPで生成されるoption要素がここに追加される -->
    </select>
  </form>

JavaScriptの場合

// HTMLのセレクト要素のidを指定
var selectElement = document.getElementById("ageSelect");

// 20歳から80歳までの範囲でoption要素を生成
for (var i = 20; i <= 80; i++) {
  var optionElement = document.createElement("option");
  optionElement.value = i;
  optionElement.text = i + "歳";
  selectElement.appendChild(optionElement);
}

PHPの場合

<?php

  for ($i = 20; $i <= 80; $i++) {
    echo '<option value="' . $i . '">' . $i . '歳</option>';
  }

?>

現在20歳から80歳までの西暦年、月、日を生成するJavaScript

See the Pen 生年月日js by mixtaro (@mixtaro) on CodePen.

現在の年から年の範囲を取得して表示させます。

// 年の範囲を計算する
var currentYear = new Date().getFullYear();
var startYear = currentYear - 80;
var endYear = currentYear - 20;

選択された年と月に基づいて、指定した月の日数を取得します。

var daysInMonth = new Date(selectedYear, selectedMonth, 0).getDate();

現在20歳から80歳までの西暦年、月、日を生成するPHP

変数を使って年の範囲を計算し、年のセレクトメニューを生成、次に月のセレクトメニューを生成します。

日にちを選択するセレクトメニューは、JavaScriptコードで動的に生成するため、空のセレクト要素を先に用意しておきます。

日にちセレクトメニューをJavaScriptで動的に生成する理由は、月ごとに日数が異なるためです。

PHPはサーバーサイドスクリプトなので、ページがロードされた時点での情報を元にHTMLを生成します。

しかし、月ごとの日数はクライアント側での操作に依存するため、サーバーサイドのPHPでは事前に日のセレクトメニューを完全に生成することは困難です。

JavaScriptはクライアントサイドで実行されるため、ユーザーのブラウザ上で動作に対し、リアルタイムで月ごとの日数を計算して適切なオプションを生成することが可能です。

単純に1〜31日までの日にちを生成する場合

JavaScriptやPHPで年齢や生年月日を生成すると、簡単にフォームの項目が作成できます。

状況に合わせて使っていきたいですね。

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額678円 53%OFF ドメイン2個無料 - 2024年3月13日(木)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-,