JavaScriptでフォームの値を取得して表示してみよう！

完成イメージ

フォームに入力したら、その入力された値を取得し、指定の場所に出力するようなプログラムを作成してみましょう。

今回のテーマ

フォーム（<input> や <select> など）から入力された値を JavaScript で取得し、画面に表示してみましょう。ユーザーの入力を .value で取り出し、それを .textContent で表示用の要素に書き出すのが基本です。

目的

フォームの値を JavaScript で取得できるようになる
.value を使って入力データを扱えるようになる
.textContent を使って出力できるようになる

作成ファイル・保存場所

js-domフォルダに以下のファイルを作成してください。

ファイル名	内容
js-dom03.html	ボタンクリックの動作練習用HTML/js
js-dom__03.html	ステップアップ練習用HTML/js

練習するHTMLは下記からコピーしてください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>フォーム値の取得</title>
</head>

<body>
    <h1>フォーム入力の練習</h1>

    <p>
        <label for="username">名前：</label>
        <input type="text" id="username">
    </p>

    <p>
        <label for="color">好きな色：</label>
        <input type="color" id="color">
    </p>


    <button id="submit">下に名前と色を表示する</button>
    <hr>

    <p id="result">ここに結果が表示されます</p>

    <script>
        // DOMをまとめての取得

        // ボタンクリックで値を取得＆表示

    </script>
</body>

</html>

👉 JavaScriptは <script> タグ内に直接記述してください（内部JS）

チェックポイント

input.value でフォームの値を取得できているか
ボタンを押したときに値が画面に表示されているか
textContent を使って別の要素にテキストを表示しているか

JavaScript基礎トレーニング

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>フォーム値の取得</title>
</head>

<body>
    <h1>フォーム入力の練習</h1>

    <p>
        <label for="username">名前：</label>
        <input type="text" id="username">
    </p>

    <p>
        <label for="color">好きな色：</label>
        <input type="color" id="color">
    </p>


    <button id="submit">下に名前と色を表示する</button>
    <hr>

    <p id="result">ここに結果が表示されます</p>

    <script>
        // DOMの取得
        const nameInput = document.getElementById('username');
        const colorInput = document.getElementById('color');
        const result = document.getElementById('result');
        const submitBtn = document.getElementById('submit');

        // ボタンクリックで値を取得＆表示
        submitBtn.addEventListener('click', () => {
            const name = nameInput.value;
            const color = colorInput.value;
            result.textContent = `こんにちは、${name} さん！選んだ色は ${color} です。`;
            result.style.color = color; // 選んだ色で表示テキストも変化
        });
    </script>
</body>

</html>

.valueとは？

.value は、フォーム要素（入力欄など）に入力された「値（データ）」を取得したり設定したりするプロパティです。

<input type="text" id="name">
<input type="number" id="age">
<textarea id="message"></textarea>
<select id="menu">...</select>

これらはすべて、JavaScriptで .value を使って中身を読み取ったり変更できます。

使い方の基本

//<input type="text" id="name">の値を取得する場合
const nameInput = document.getElementById('name');
const nameValue = nameInput.value;  // 入力された名前を取得
console.lo(nameValue);//入力された名前が出力

`.textContent` や `.innerHTML` との違い

プロパティ	対象	取得・設定できるもの
`.value`	input, textareaなど	入力された「値」
`.textContent`	要素（div, pなど）	表示されている「テキスト」
`.innerHTML`	要素	HTMLを含んだ「中身全体」

例：<p>こんにちは</p> → .textContentは"こんにちは"、.innerHTMLは"こんにちは"（HTMLなしなら同じ）

HTML側でも設定可

<input type="text" value="初期値">

このようにHTMLで書いた value は、JavaScriptで .value でも読み取れます。

JavaScriptステップアップトレーニング

入力欄を追加して「好きな食べ物」「年齢」なども入力＆表示してみよう
value の中身が空だったときのエラーメッセージを出してみよう

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>フォーム応用トレーニング</title>
</head>

<body>
    <h1>フォーム入力の応用</h1>

    <p>
        <label for="username">名前：</label>
        <input type="text" id="username">
    </p>

    <p>
        <label for="food">好きな食べ物：</label>
        <input type="text" id="food">
    </p>

    <p>
        <label for="age">年齢：</label>
        <input type="number" id="age">
    </p>

    <p>
        <label for="color">好きな色：</label>
        <input type="color" id="color">
    </p>

    <p>
        <button id="submit">表示する</button>
    </p>

    <hr>

    <p id="result">ここに結果が表示されます</p>

    <script>
        // DOMの取得

       //表示するボタンをクリックしたらvalueの値を取得


       　　// 入力チェック（どれかが空ならメッセージ「すべての項目を入力してください。」と表示）


     　　　// 出力表示

    </script>
</body>

</html>

解答例

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>フォーム応用トレーニング</title>
</head>

<body>
    <h1>フォーム入力の応用</h1>

    <p>
        <label for="username">名前：</label>
        <input type="text" id="username">
    </p>

    <p>
        <label for="food">好きな食べ物：</label>
        <input type="text" id="food">
    </p>

    <p>
        <label for="age">年齢：</label>
        <input type="number" id="age">
    </p>

    <p>
        <label for="color">好きな色：</label>
        <input type="color" id="color">
    </p>

    <p>
        <button id="submit">表示する</button>
    </p>

    <hr>

    <p id="result">ここに結果が表示されます</p>

    <script>
        // DOMの取得
        const nameInput = document.getElementById('username');
        const foodInput = document.getElementById('food');
        const ageInput = document.getElementById('age');
        const colorInput = document.getElementById('color');
        const result = document.getElementById('result');
        const submitBtn = document.getElementById('submit');

        submitBtn.addEventListener('click', () => {
            const name = nameInput.value;
            const food = foodInput.value;
            const age = ageInput.value;
            const color = colorInput.value;

            // 入力チェック（どれかが空ならメッセージ表示）
            if (!name || !food || !age) {
                result.textContent = 'すべての項目を入力してください。';
                result.style.color = 'red';
                document.body.style.backgroundColor = ''; // 背景はそのまま
                return;
            }

            // 出力表示
            result.textContent = `こんにちは、${name} さん！あなたは ${age} 歳で、好きな食べ物は ${food}。好きな色は ${color} です。`;
        });
    </script>
</body>

</html>

`return;` の役割

この return; は、それ以上の処理を中断するために使われています。もし return を書かないと、その下にある表示処理（↓）が実行されてしまいます。

result.textContent = `こんにちは、${name} さん！あなたは ${age} 歳で、好きな食べ物は ${food}。好きな色は ${color} です。`;

return; は「これ以上先には進まないで！」という命令。
入力チェックで条件に合わなかった場合に、以降の処理を止めるために必要です。
省略するとエラーメッセージと正しい文章が両方出てしまうという不具合が起きる可能性があります。