PHPでCSVからラジオボタンを生成する方法
PHPでCSVファイルを読み込み、ラジオボタンの選択肢を自動生成する方法を紹介します。CSVに登録されたデータをそのままフォームへ反映できるため、選択肢の追加や変更をCSVだけで管理できます。お問い合わせフォームやアンケートフォーム、カテゴリ選択などに利用できるサンプルコードです。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
カテゴリを選択
選択結果:未選択
コードをコピーして使おう!
<?php
$options = [];
if (file_exists('data.csv')) {
if (($fp = fopen('data.csv', 'r')) !== false) {
while (($row = fgetcsv($fp)) !== false) {
if (!empty($row[0])) {
$options[] = $row[0];
}
}
fclose($fp);
}
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSVからラジオボタン生成</title>
<style>
body{
font-family:sans-serif;
margin:20px;
}
.radio-wrap{
max-width:700px;
padding:30px;
border:1px solid #ddd;
border-radius:12px;
}
.radio-title{
margin-bottom:20px;
font-size:24px;
font-weight:bold;
}
.radio-item{
display:block;
margin-bottom:16px;
font-size:18px;
cursor:pointer;
}
.radio-result{
margin-top:24px;
padding:16px;
background:#f7f7f7;
border:1px solid #ddd;
border-radius:8px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="radio-wrap">
<div class="radio-title">
カテゴリを選択
</div>
<?php foreach ($options as $option): ?>
<label class="radio-item">
<input
type="radio"
name="category"
value="<?= htmlspecialchars($option, ENT_QUOTES, 'UTF-8') ?>">
<?= htmlspecialchars($option, ENT_QUOTES, 'UTF-8') ?>
</label>
<?php endforeach; ?>
<div class="radio-result" id="radioResult">
選択結果:未選択
</div>
</div>
<script>
document
.querySelectorAll('input[name="category"]')
.forEach(radio => {
radio.addEventListener('change', () => {
document.getElementById('radioResult').textContent =
'選択結果:' + radio.value;
});
});
</script>
</body>
</html>
ファイル構成と設置方法
このサンプルで使用するファイル構成です。
下記のファイルを同じフォルダ(同じ階層)へ配置してください。
sample/
├─ index.php
└─ data.csv
data.csv に登録したデータを読み込み、ラジオボタンの選択肢として表示します。CSVの内容を変更すると、表示されるラジオボタンも自動的に変更されます。
サーバーへ設置する場合は、index.php と data.csv を同じフォルダへアップロードしてください。
PHPはサーバー上で実行されるため、PHPファイルをダブルクリックしても動作しません。動作確認はレンタルサーバーへアップロードするか、PHPが利用できるローカル環境で行ってください。
コメント