セレクトボックスで選択した項目は、値を取得してCSVファイルに保存できます。選択した内容をファイルに記録することで、ページを閉じた後もデータを残せます。今回は、1つの項目を選ぶ通常のセレクトボックスと、複数の項目を選べるセレクトボックスの2種類を紹介します。
1つ目は、都道府県を1つ選択して保存する方法です。選択した項目のvalue属性を取得し、その値をCSVファイルに書き込みます。2つ目は、プログラミング言語を複数選択して保存する方法です。選択した値をまとめて取得し、カンマで区切った文字列としてCSVの1つのセルに保存します。
CSVファイルへの書き込みにはPHPを使用します。保存先にCSVファイルが存在しない場合は、PHPファイルと同じ階層に自動生成して見出しを書き込みます。すでにファイルが存在する場合は、見出しを重複させずに新しいデータを末尾へ追加します。デモでは、選択した値や変数の内容、データ型を確認しながら、CSVに保存される内容をプレビューできます。
デモ
都道府県を1つ選択し、CSVへの保存内容を確認します。
取得結果
変数の内容：value = "";
データ型：string（文字列）
CSVプレビュー
都道府県
複数のプログラミング言語を選択し、CSVへの保存内容を確認します。
WindowsではCtrlキー、MacではCommandキーを押しながらクリックすると複数選択できます。
取得結果
変数の内容：values = [];
データ型：object（配列）
CSVプレビュー
プログラミング言語
「保存内容を確認」をクリックすると、選択した値がCSVプレビューの最終行に追加されます。複数選択では、選択した値を1つのセルにまとめます。このデモでは実際のCSVファイルへの書き込みは行いません。実際にPHPで保存する場合、CSVファイルが存在しなければPHPファイルと同じ階層に自動生成され、見出しも自動で書き込まれます。既存のCSVファイルがある場合は、見出しを重複させずに末尾へ追記されます。
Q 他のアイコンを使いたい場合はどうするの？
無料のSVGアイコン作成ツールを使って、用途に合ったアイコンを作成できます。
コードをコピーして使おう！
① 単体選択
<?php
/* =========================================
単体選択した値をCSVに保存
========================================= */
// CSVファイルの保存先
$csvFile = __DIR__ . '/data.csv';
// 保存結果を表示する変数
$message = '';
// フォームが送信された場合
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// セレクトボックスから送信された値を取得
$value = $_POST['prefecture'] ?? '';
// 配列などの不正な形式を除外
if (!is_string($value)) {
$value = '';
}
// 選択できる都道府県
$allowedValues = ['北海道', '東京都', '大阪府', '福岡県'];
// 選択値が有効か確認
if (!in_array($value, $allowedValues, true)) {
$message = '都道府県を選択してください。';
} else {
// CSVファイルを追記モードで開く
$file = fopen($csvFile, 'a+');
if ($file === false) {
$message = 'CSVファイルを開けませんでした。';
} else {
// 同時書き込みによる競合を防ぐ
if (flock($file, LOCK_EX)) {
// CSVファイルが空か確認
$isEmpty = fstat($file)['size'] === 0;
// ファイルが空の場合は見出しを書き込む
$headerSaved = true;
if ($isEmpty) {
$headerSaved = fputcsv($file, ['都道府県']) !== false;
}
// 選択した値を1行追加
if ($headerSaved && fputcsv($file, [$value]) !== false) {
$message = 'CSVファイルに保存しました。';
} else {
$message = 'CSVファイルへの保存に失敗しました。';
}
// ファイルのロックを解除
flock($file, LOCK_UN);
} else {
$message = 'CSVファイルをロックできませんでした。';
}
// ファイルを閉じる
fclose($file);
}
}
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードの設定 -->
<meta charset="UTF-8">
<!-- スマートフォンなどの画面幅に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>セレクトボックスの値をCSVに保存</title>
<!-- セレクトボックスのCSSを読み込む -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- セレクトボックス全体 -->
<div class="select-box-csv-save_container">
<!-- 選択した値をPHPへ送信するフォーム -->
<form method="post">
<!-- セレクトボックスのラベル -->
<label class="select-box-csv-save_label" for="select-box-csv-save-single">
都道府県
</label>
<!-- セレクトボックスとSVG矢印 -->
<div class="select-box-csv-save_select-wrap">
<!-- 都道府県を1つ選択 -->
<select class="select-box-csv-save_select" id="select-box-csv-save-single" name="prefecture" required>
<!-- 初期表示用の項目 -->
<option value="" selected disabled>選択してください</option>
<!-- value属性の値がPHPへ送信される -->
<option value="北海道">北海道</option>
<option value="東京都">東京都</option>
<option value="大阪府">大阪府</option>
<option value="福岡県">福岡県</option>
</select>
<!-- セレクトボックス右端の下向きSVG矢印 -->
<svg class="select-box-csv-save_arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 9 7 7 7-7"></path>
</svg>
</div>
<!-- 選択した値をPHPへ送信 -->
<button class="select-box-csv-save_button" type="submit">
CSVに保存
</button>
</form>
<!-- 保存結果を表示 -->
<?php if ($message !== ''): ?>
<p class="select-box-csv-save_message" role="status">
<?php echo htmlspecialchars($message, ENT_QUOTES, 'UTF-8'); ?>
</p>
<?php endif; ?>
</div>
</body>
</html>② 複数選択
<?php
/* =========================================
複数選択した値をCSVに保存
========================================= */
// CSVファイルの保存先
$csvFile = __DIR__ . '/data.csv';
// 保存結果を表示する変数
$message = '';
// フォームが送信された場合
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// 複数選択した値を配列として取得
$values = $_POST['languages'] ?? [];
// 配列以外のデータを除外
if (!is_array($values)) {
$values = [];
}
// 選択できるプログラミング言語
$allowedValues = ['HTML', 'CSS', 'JavaScript', 'PHP', 'Python', 'SQL'];
// 送信された値がすべて有効か確認
$isValid = count($values) > 0;
foreach ($values as $value) {
if (!is_string($value) || !in_array($value, $allowedValues, true)) {
$isValid = false;
break;
}
}
if (!$isValid) {
$message = 'プログラミング言語を選択してください。';
} else {
// 選択した値をカンマで区切って1つの文字列にする
$csvValue = implode(',', $values);
// CSVファイルを追記モードで開く
$file = fopen($csvFile, 'a+');
if ($file === false) {
$message = 'CSVファイルを開けませんでした。';
} else {
// 同時書き込みによる競合を防ぐ
if (flock($file, LOCK_EX)) {
// CSVファイルが空か確認
$isEmpty = fstat($file)['size'] === 0;
// ファイルが空の場合は見出しを書き込む
$headerSaved = true;
if ($isEmpty) {
$headerSaved = fputcsv($file, ['プログラミング言語']) !== false;
}
// 複数の値を1つのセルとして保存
if ($headerSaved && fputcsv($file, [$csvValue]) !== false) {
$message = 'CSVファイルに保存しました。';
} else {
$message = 'CSVファイルへの保存に失敗しました。';
}
// ファイルのロックを解除
flock($file, LOCK_UN);
} else {
$message = 'CSVファイルをロックできませんでした。';
}
// ファイルを閉じる
fclose($file);
}
}
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードの設定 -->
<meta charset="UTF-8">
<!-- スマートフォンなどの画面幅に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>複数選択した値をCSVに保存</title>
<!-- セレクトボックスのCSSを読み込む -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- セレクトボックス全体 -->
<div class="select-box-csv-save_container">
<!-- 選択した値をPHPへ送信するフォーム -->
<form method="post">
<!-- セレクトボックスのラベル -->
<label class="select-box-csv-save_label" for="select-box-csv-save-multiple">
プログラミング言語
</label>
<!-- 複数選択できるセレクトボックス -->
<select class="select-box-csv-save_multiple" id="select-box-csv-save-multiple" name="languages[]" multiple required>
<!-- 選択したすべてのvalue属性がPHPへ送信される -->
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="SQL">SQL</option>
</select>
<!-- 複数選択の操作方法 -->
<p class="select-box-csv-save_operation">
WindowsではCtrlキー、MacではCommandキーを押しながらクリックすると複数選択できます。
</p>
<!-- 選択した値をPHPへ送信 -->
<button class="select-box-csv-save_button" type="submit">
CSVに保存
</button>
</form>
<!-- 保存結果を表示 -->
<?php if ($message !== ''): ?>
<p class="select-box-csv-save_message" role="status">
<?php echo htmlspecialchars($message, ENT_QUOTES, 'UTF-8'); ?>
</p>
<?php endif; ?>
</div>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
今回のサンプルは、PHPとCSSの2つのファイルを使用して、セレクトボックスで選択した値をCSVファイルへ保存します。PHPではフォームから送信された値の取得・確認・保存を行い、CSSでは選択欄や保存ボタンのデザインを設定しています。JavaScriptを使用せず、HTMLフォームのPOST送信でPHPへ値を渡す仕組みです。
①単体選択と②複数選択は、それぞれ独立したサンプルとしてダウンロードできます。単体選択では都道府県を1つ保存し、複数選択では選択したプログラミング言語をカンマで区切って1つのセルに保存します。どちらもファイル構成は同じですが、PHPとCSSの内容が異なります。
sample/
├── index.php
├── style.css
└── data.csv（初回保存時に自動生成）
各ファイルの役割
index.phpには、セレクトボックスを表示するHTML、フォームから送信された値を取得するPHP、CSVファイルへの書き込み処理を記述しています。style.cssでは、選択欄の横幅・余白・枠線・角丸・文字サイズ・保存ボタンなどを設定しています。data.csvは選択した値を記録するファイルで、初回保存時にPHPによって自動生成されるため、事前に用意する必要はありません。
設置方法・使い方
使用したいタイプの「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.phpとstyle.cssを、PHPが動作するサーバーの同じ階層にアップロードします。
ブラウザからindex.phpへアクセスするとセレクトボックスが表示されます。項目を選択して「CSVに保存」をクリックすると、PHPが送信された値を確認し、同じ階層のdata.csvへ保存します。ファイルが存在しない場合は自動生成され、既存のファイルがある場合は末尾へ追記されます。
CSVファイルを作成・更新するため、設置先のディレクトリにはPHPからの書き込み権限が必要です。また、PHPを実行できない通常のHTML環境ではCSVへの保存はできません。
無料サーバーで動作を確認する方法
PHPが使えるサーバーを持っていない場合は、無料レンタルサーバーのInfinityFreeを利用して動作を確認できます。InfinityFreeはPHPに対応しているため、今回のようなCSVファイルへの保存処理も試せます。
サーバーの準備方法はInfinityFreeの無料サーバー準備、ファイルのアップロード方法はFile Managerでアップロード・公開で解説しています。
サーバーを準備したら、
htdocsフォルダ内にsampleフォルダを作成し、index.phpとstyle.cssをアップロードしてください。ブラウザからindex.phpへアクセスし、項目を選択して「CSVに保存」をクリックすると動作を確認できます。
選択した値をPHPへ送信する仕組み
①単体選択では、セレクトボックスのname属性にprefectureを指定しています。各option要素のvalue属性には、保存する都道府県名を設定しています。
<!-- 選択した値をPHPへ送信するフォーム -->
<form method="post">
<!-- 都道府県を1つ選択 -->
<select class="select-box-csv-save_select" id="select-box-csv-save-single" name="prefecture" required>
<!-- 初期表示用の項目 -->
<option value="" selected disabled>選択してください</option>
<!-- value属性の値がPHPへ送信される -->
<option value="北海道">北海道</option>
<option value="東京都">東京都</option>
<option value="大阪府">大阪府</option>
<option value="福岡県">福岡県</option>
</select>
</form>
method="post"を指定したフォームを送信すると、選択したoption要素のvalue属性がPHPへ渡されます。例えば「大阪府」を選択した場合、prefectureという名前で「大阪府」が送信されます。
PHPでは次のコードで値を取得しています。
// セレクトボックスから送信された値を取得
$value = $_POST['prefecture'] ?? '';
// 配列などの不正な形式を除外
if (!is_string($value)) {
$value = '';
}
$_POST['prefecture']は、HTMLのname="prefecture"に対応しています。取得した値は$valueへ代入されます。?? ''は、値が送信されていない場合に空文字列を使用するための指定です。
選択肢を変更する場合は、HTMLのoption要素と、PHPの$allowedValuesに同じ値を設定してください。PHPでは許可された値だけをCSVへ保存するため、HTML側の選択肢だけを追加しても保存できません。
複数選択した値を取得する仕組み
②複数選択では、select要素にmultiple属性を付け、name="languages[]"を指定しています。
<!-- 複数選択できるセレクトボックス -->
<select class="select-box-csv-save_multiple" id="select-box-csv-save-multiple" name="languages[]" multiple required>
<!-- 選択したすべてのvalue属性がPHPへ送信される -->
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="SQL">SQL</option>
</select>
multiple属性によって複数の項目を選択でき、name属性の末尾に付けた[]によって、選択した値が配列としてPHPへ送信されます。
PHPでは次のコードで配列を取得しています。
// 複数選択した値を配列として取得
$values = $_POST['languages'] ?? [];
// 配列以外のデータを除外
if (!is_array($values)) {
$values = [];
}
例えば「CSS」と「PHP」を選択すると、$valuesには['CSS', 'PHP']という配列が入ります。単体選択では文字列を取得しますが、複数選択では複数の値を配列として取得する点が異なります。
取得した配列は、すべての値が許可された選択肢に含まれていることを確認してから、CSV保存用の文字列に変換しています。
// 選択した値をカンマで区切って1つの文字列にする
$csvValue = implode(',', $values);
implode(',', $values)は、配列の各要素をカンマでつないで1つの文字列にする処理です。「CSS」と「PHP」を選択した場合、$csvValueはCSS,PHPになります。
この文字列をCSVの1つの項目として保存するため、複数の選択値が別々の列に分かれることはありません。
CSVファイルの作成と追記処理
どちらのサンプルも、PHPファイルと同じ階層にdata.csvを保存します。保存先は次のコードで指定しています。
// CSVファイルの保存先
$csvFile = __DIR__ . '/data.csv';
__DIR__は、実行中のPHPファイルが置かれているディレクトリを表します。'/data.csv'を連結することで、index.phpと同じ階層にCSVファイルを作成します。保存するファイル名を変更したい場合は、data.csvの部分を書き換えてください。
CSVファイルはfopen()で開き、fputcsv()で書き込んでいます。
// CSVファイルを追記モードで開く
$file = fopen($csvFile, 'a+');
'a+'は、既存の内容を残したまま追記できるモードです。ファイルが存在しない場合は新しく作成されます。
書き込み時にはflock($file, LOCK_EX)でファイルをロックし、複数の送信が同時に発生した場合の書き込み競合を防いでいます。
// CSVファイルが空か確認
$isEmpty = fstat($file)['size'] === 0;
// ファイルが空の場合は見出しを書き込む
$headerSaved = true;
if ($isEmpty) {
$headerSaved = fputcsv($file, ['都道府県']) !== false;
}
// 選択した値を1行追加
if ($headerSaved && fputcsv($file, [$value]) !== false) {
$message = 'CSVファイルに保存しました。';
} else {
$message = 'CSVファイルへの保存に失敗しました。';
}
このコードは①単体選択の保存処理です。fstat($file)['size'] === 0でCSVファイルが空かどうかを確認し、空の場合だけ「都道府県」という見出しを書き込みます。その後、選択した値を1行追加します。
②複数選択では、見出しを「プログラミング言語」に変更し、fputcsv($file, [$csvValue])でカンマ区切りの文字列を1つのセルに保存します。値にカンマが含まれる場合は、CSV形式に従ってダブルクォーテーションで囲まれます。
なお、fputcsv()はCSV形式の書き込みを行いますが、文字コードを自動的にShift_JISへ変換する処理は含まれていません。このサンプルではUTF-8の文字列を保存します。
レスポンシブ対応
style.cssでは、.select-box-csv-save_containerにwidth: 100%;とmax-width: 480px;を指定し、画面幅に合わせながら最大横幅を480pxに制限しています。margin: 40px auto;によって中央に配置しています。
①単体選択では、画面幅が640px以下になると選択欄の内側の余白を変更します。
/* =========================================
スマートフォン対応
========================================= */
@media (max-width: 640px) {
.select-box-csv-save_select {
padding: 14px 50px 14px 14px; /* 小さい画面での余白 */
}
}
PC表示では選択欄の上下に16px、左側に16px、右側に52pxの余白を設けています。スマートフォン表示では上下と左側を14px、右側を50pxに変更し、SVG矢印の表示スペースを確保しています。
②複数選択では、PC表示の選択欄の高さを220px、画面幅640px以下では200pxに変更しています。表示する項目数に合わせて高さを調整したい場合は、.select-box-csv-save_multipleのheightを変更してください。
コメント