html 入力内容表示

HTMLフォーム入力内容を画面に表示させる方法

1. はじめに

この記事では、HTMLのフォームに入力されたテキストを、JavaScriptを使って同じページに表示する方法を解説します。具体的には、フォームの送信ボタンを押すと、入力されたテキストがページ上部に表示されるサンプルコードを作成し、コードの解説を通して、JavaScriptの基本的な使い方を学んでいきましょう。

2. 実装コード&結果

早速ですが、今回の実装コードと実行結果を見ていきましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォーム入力内容表示</title>
</head>
<body>
  <main>
    <!-- 入力結果を出力 -->
    <p id="output"></p> 
    
    <!-- 入力フォーム -->
    <form action="#" id="form">
      <label for="content">テキストを入力してください:</label>
      <input type="text" id="content" name="content">
      <input type="submit" value="送信">
    </form>
  </main>

  <script>
    // submit時にイベント実行をする関数
    document.getElementById('form').onsubmit = function (event) {
        // 再読み込み防止
        event.preventDefault();

        // 入力フォームの内容を取得
        let inputForm = document.getElementById('form').content.value;

        // 入力内容を画面に出力
        document.getElementById('output').textContent = `入力されたテキスト: ${inputForm}`;
    }
  </script>
</body>
</html>

実行結果:

フォームに入力したテキストを送信すると、ページ上部に「入力されたテキスト: [入力したテキスト]」と表示されます。
例えば、「こんにちは」と入力して送信すると、「入力されたテキスト: こんにちは」と表示されます。

2.1 入力フォームの説明

まずはHTMLの入力フォーム部分を見ていきましょう。

<form action="#" id="form">:

<form>要素は、HTMLでフォームを作成するための要素です。

action属性は、フォームデータの送信先URLを指定します。今回は同じページに表示させるため、#を指定しています。

id="form"は、後ほどJavaScriptでこのフォーム要素を取得するために、idを"form"と設定しています。

<label for="content">テキストを入力してください:</label>:

<label>要素は、フォーム要素にラベルを付けるための要素です。

for属性は、関連付けるフォーム要素のid属性の値と一致させる必要があります。ここでは、id="content"のテキストフィールドと関連付けられています。

<input type="text" id="content" name="content">:

<input>要素は、ユーザーがデータを入力するための様々な種類のフィールドを作成します。

type="text"は、1行のテキストを入力するためのフィールドを作成することを意味します。

id="content"は、後ほどJavaScriptでこの入力フィールドを取得するために、idを"content"と設定しています。

name="content"は、フォームデータを送信する際に、この入力フィールドの値に"content"という名前を付けて送信することを意味します。

<input type="submit" value="送信">:

type="submit"は、フォームを送信するためのボタンを作成することを意味します。

value="送信"は、ボタンに表示されるテキストを"送信"に設定しています。

2.2 入力内容取得処理の説明(JS)

次に、JavaScriptを使って入力内容を取得し、画面に表示する処理を見ていきましょう。

document.getElementById('form').onsubmit = function (event) { ... }:

document.getElementById('form') は、HTML内のidが"form"である要素（今回は<form>要素）を取得します。

.onsubmit は、フォームが送信されたときに発生するイベントです。

= function (event) { ... } は、onsubmitイベントが発生したときに実行する関数を定義しています。

event は、イベント発生時の情報を持ったオブジェクトです。

event.preventDefault();:

フォーム送信時のデフォルト動作は、ページをリロードすることです。

event.preventDefault() は、このデフォルト動作をキャンセルします。

今回は、ページリロードせずにJavaScriptで処理を行いたいので、この記述が必要です。

let inputForm = document.getElementById('form').content.value;:

document.getElementById('form') でフォーム要素を取得し、.content で name="content" の入力フィールドにアクセスします。

.value は、入力フィールドに入力された値を取得します。

取得した値は、変数inputFormに格納されます。

document.getElementById('output').textContent =入力されたテキスト: ${inputForm};:

document.getElementById('output') は、HTML内のidが"output"である要素（今回は<p>要素）を取得します。

.textContent は、要素の中身のテキストコンテンツを取得または設定します。

ここでは、入力されたテキスト: ${inputForm} を設定することで、<p id="output"></p> の中身を、"入力されたテキスト: "に入力されたテキストを連結したものに書き換えています。

3. こんな感じです

上記のように、HTMLとJavaScriptを組み合わせることで、ユーザーがフォームに入力した内容を取得し、それを画面に表示することが可能になります。

4. おわり

今回は、JavaScriptを用いてフォームに入力された内容を画面に表示する方法を解説しました。 JavaScriptは、Webページに動的な要素を追加することができる非常に強力な言語です。これを機に、JavaScriptの基本を学び、よりインタラクティブなWebページを作成してみましょう。

フォーム作成の基本

HTMLでユーザーからの入力を受け取るためのフォーム要素の作成方法を説明します。

要素	説明
<form>	フォーム全体を囲むタグ
<input>	ユーザーからの入力を受け取るためのフィールド
<button>	フォームを送信するためのボタン

参考文献

次のリンクでさらに詳細な情報を見つけることができます：

Q&A

Q1: HTMLフォームの基本要素は何ですか？

A1: HTMLフォームの基本要素には、<form>、<input>、<button>があります。

Q2: JavaScriptを使用してフォームデータを処理する方法は？

A2: イベントリスナーを使用して、フォームの送信時にデータを取得し、表示することができます。

Q3: 入力内容を表示するにはどのような技術が必要ですか？

A3: HTML、CSS、JavaScriptの基本的な知識が必要です。

その他の参考記事:html 入力フォーム