問い合わせや資料請求フォームで、生年月日や年齢はよくある入力項目です。
でもこれを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
PHP コードを確認するにはクリックして下さい
<?php
// 現在の年を取得
$currentYear = date("Y");
// 年の範囲を計算
$startYear = $currentYear - 80;
$endYear = $currentYear - 20;
// 年のセレクトメニューを生成
echo '<select name="year" id="year">';
for ($year = $startYear; $year <= $endYear; $year++) {
echo '<option value="' . $year . '">' . $year . '</option>';
}
echo '</select>';
echo '<label for="year">年</label>';
// 月のセレクトメニューを生成
echo '<select name="month" id="month">';
for ($month = 1; $month <= 12; $month++) {
echo '<option value="' . $month . '">' . $month . '</option>';
}
echo '</select>';
echo '<label for="month">月</label>';
// 日のセレクトメニューを生成
echo '<select name="day" id="day"></select>';
echo '<label for="day">日</label>';
// JavaScriptを使って日のセレクトメニューを動的に生成するためのコードを出力
echo '
<script>
var yearSelect = document.getElementById("year");
var monthSelect = document.getElementById("month");
var daySelect = document.getElementById("day");
// 日のセレクトメニューを生成する関数
function updateDays() {
var selectedMonth = monthSelect.value;
var selectedYear = yearSelect.value;
// 選択された月に応じて日数を計算
var daysInMonth = new Date(selectedYear, selectedMonth, 0).getDate();
// 日のセレクトメニューをリセット
daySelect.innerHTML = "";
// 日のセレクトメニューを生成
for (var day = 1; day <= daysInMonth; day++) {
var optionElement = document.createElement("option");
optionElement.value = day;
optionElement.text = day;
daySelect.appendChild(optionElement);
}
}
// 月が変更されたら日のセレクトメニューを更新
monthSelect.addEventListener("change", updateDays);
// 年が変更されたら日のセレクトメニューを更新
yearSelect.addEventListener("change", updateDays);
// 初期状態で日のセレクトメニューを更新
updateDays();
</script>';
?>
変数を使って年の範囲を計算し、年のセレクトメニューを生成、次に月のセレクトメニューを生成します。
日にちを選択するセレクトメニューは、JavaScriptコードで動的に生成するため、空のセレクト要素を先に用意しておきます。
日にちセレクトメニューをJavaScriptで動的に生成する理由は、月ごとに日数が異なるためです。
PHPはサーバーサイドスクリプトなので、ページがロードされた時点での情報を元にHTMLを生成します。
しかし、月ごとの日数はクライアント側での操作に依存するため、サーバーサイドのPHPでは事前に日のセレクトメニューを完全に生成することは困難です。
JavaScriptはクライアントサイドで実行されるため、ユーザーのブラウザ上で動作に対し、リアルタイムで月ごとの日数を計算して適切なオプションを生成することが可能です。
単純に1〜31日までの日にちを生成する場合
PHP クリックして下さい
<form action="">
<select name="year" id="year">
<?php
$currentYear = date("Y");
$startYear = $currentYear - 80;
$endYear = $currentYear - 20;
for ($year = $startYear; $year <= $endYear; $year++) {
echo '<option value="' . $year . '">' . $year . '</option>';
}
?>
</select>
<label for="year">年</label>
<select name="month" id="month">
<?php
for ($month = 1; $month <= 12; $month++) {
echo '<option value="' . $month . '">' . $month . '月</option>';
}
?>
</select>
<label for="month">月</label>
<select name="day" id="day">
<?php
for ($day = 1; $day <= 31; $day++) {
echo '<option value="' . $day . '">' . $day . '</option>';
}
?>
</select>
<label for="day">日</label>
</form>
JavaScriptやPHPで年齢や生年月日を生成すると、簡単にフォームの項目が作成できます。
状況に合わせて使っていきたいですね。
