【6日でできるJavaScript入門】フォームの操作①
Webページでユーザーからの情報を受け取るために欠かせないのが「フォーム」です。フォームにはテキストボックス、テキストエリア、チェックボックスなど多様な部品があり、JavaScriptを使えば「入力値の取得」「リアルタイム集計」「入力チェック」など動的な操作が可能です。
ここでは、フォーム部品の値の取得や基本的なイベント連携の方法を、表やサンプルを使って解説します。
| フォーム部品 | 主なプロパティ | 役割 |
|---|---|---|
| テキストボックス | value | 入力された文字を取得 |
| テキストエリア | value | 入力された複数行の文字 |
| チェックボックス | checked | 選択のON/OFF（真偽値） |
| ラジオボタン | checked, value | 選択された値・状態 |
１．テキストボックス・テキストエリアの値を取得する
1.1. テキストボックス
テキストボックス（<input type="text">）に入力された値は、valueプロパティで取得できます。
| 書式 | 意味 |
|---|---|
| 変数 = 要素.value | 入力された文字列を変数に代入 |
サンプル：答え合わせクイズ
ファイル名： lesson23-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📝 テキストボックス値の取得</title>
</head>
<body>
<h1>📝 簡単クイズ</h1>
<p>世界で一番長い川は？</p>
<input type="text" id="river" size="18" placeholder="ここに答えを入力">
<button id="checkBtn">答え合わせ</button>
<div id="result"></div>
<script>
document.getElementById('checkBtn').addEventListener('click', function() {
const answer = document.getElementById('river').value;
if (answer === 'ナイル川') {
document.getElementById('result').textContent = '正解！';
} else {
document.getElementById('result').textContent = '残念、不正解です。';
}
});
</script>
</body>
</html>ブラウザの出力例
出力例
「ナイル川」と入力して「答え合わせ」を押すと「正解！」、他は「残念、不正解です。」
| タグ・構文 | 解説 |
|---|---|
| <input type="text"> | 1行のテキスト入力欄 |
| .value | 入力された内容（文字列）を取得 |
| .addEventListener() | ボタンクリックで関数を実行 |
1.2. テキストエリア
テキストエリア（<textarea>）もvalueで取得します。
（例は省略しますがinput.valueと同様です）
2. チェックボックス・ラジオボタンのON/OFFと値の取得
2.1. チェックボックスのON/OFF
チェックボックス（<input type="checkbox">）の状態はcheckedプロパティで判定します。
| 書式 | 意味 |
|---|---|
| 要素.checked | チェックされていればtrue, されていなければfalse |
サンプル：合計金額の計算
ファイル名： lesson23-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>💰 チェックボックス料金計算</title>
</head>
<body>
<h1>💰 サービス選択と料金合計</h1>
<form id="optionForm">
<label><input type="checkbox" id="wifi">Wi-Fi追加（200円）</label><br>
<label><input type="checkbox" id="breakfast">朝食付き（600円）</label><br>
<label><input type="checkbox" id="spa">スパ利用（1,000円）</label>
</form>
<p>合計金額：<span id="sum">5,000円</span></p>
<script>
document.getElementById('optionForm').addEventListener('change', calcSum);
function calcSum() {
let sum = 5000;
if (document.getElementById('wifi').checked) sum += 200;
if (document.getElementById('breakfast').checked) sum += 600;
if (document.getElementById('spa').checked) sum += 1000;
document.getElementById('sum').textContent = sum + '円';
}
</script>
</body>
</html>ブラウザの出力例
出力例
各チェックボックスをON/OFFするたびに合計金額が変化する
| タグ・構文 | 解説 |
|---|---|
| <input type="checkbox"> | 選択できるON/OFFスイッチ |
| .checked | チェック状態（true/false）を取得 |
| form.addEventListener('change', ...) | フォーム内の値変更で処理実行 |
３．入力値の型変換と活用
3.1. 数値として扱う場合
テキストボックスやテキストエリアの値は「文字列」として取得されるため、数値計算したいときはparseInt()やparseFloat()で型変換します。
| 構文 | 解説 |
|---|---|
| parseInt(値) | 文字列を整数に変換 |
| parseFloat(値) | 文字列を小数点ありで変換 |
まとめ
- フォーム操作の基本は「value（入力値）」「checked（ON/OFF）」プロパティの活用
- イベントリスナーと組み合わせて、リアルタイムな集計や判定が可能
- テキスト入力は文字列として取得されるので、必要なら数値に変換
- さまざまなフォーム部品の取得と操作を覚えて、Webページをよりインタラクティブに！
フォームの操作はWebアプリ開発の基礎です。まずは「値の取得」「ON/OFF判定」から慣れていきましょう！