HTML入力内容を簡単に表示！3つの手順で初心者も瞬時に理解

HTML

2024.04.142024.05.10

この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

はじめに
●HTML入力内容表示の基本: フォームとJavaScript
- ○フォームの作成
- ○JavaScriptを用いた入力内容の表示
●応用例1: 入力内容をページ内に表示
●応用例2: 複数の入力内容をまとめて表示
●注意点: セキュリティ対策
まとめ

はじめに

この記事を読めば、HTMLで入力内容を表示する方法を簡単に理解し、自分のサイトに活用できるようになります。

それでは早速、解説に入りましょう！

●HTML入力内容表示の基本: フォームとJavaScript

まずは、HTMLで入力内容を表示するために必要な基本的な要素を見ていきましょう。

○フォームの作成

入力内容を受け取るためには、まずフォームを作成する必要があります。

<form>
  <label for="inputText">テキスト入力:</label>
  <input type="text" id="inputText" name="inputText">
  <button type="button" onclick="displayText()">表示</button>
</form>

ここでは、テキスト入力のための<input>タグと、表示ボタンを作成しています。

表示ボタンをクリックした際には、displayText()という関数が実行されるように設定しています。

○JavaScriptを用いた入力内容の表示

次に、JavaScriptを使って入力内容を表示する方法を見ていきましょう。

<script>
  function displayText() {
    var inputText = document.getElementById("inputText").value;
    alert(inputText);
  }
</script>

このコードでは、displayText()関数が実行されると、inputTextの値を取得し、アラートで表示します。

●応用例1: 入力内容をページ内に表示

先ほどの例ではアラートで表示しましたが、今度は入力内容をページ内に表示してみましょう。

<div id="result"></div>

<script>
  function displayText() {
    var inputText = document.getElementById("inputText").value;
    document.getElementById("result").innerHTML = inputText;
  }
</script>

このコードでは、入力内容を<div id="result"></div>の中に表示するようにしています。

displayText()関数が実行されると、inputTextの値を取得し、result要素のinnerHTMLに代入します。

●応用例2: 複数の入力内容をまとめて表示

複数の入力内容をまとめて表示することもできます。

<form>
  <label for="firstName">名前:</label>
  <input type="text" id="firstName" name="firstName">
  <label for="lastName">苗字:</label>
  <input type="text" id="lastName" name="lastName">
  <button type="button" onclick="displayNames()">表示</button>
</form>

<div id="fullNameResult"></div>

<script>
  function displayNames() {
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    document.getElementById("fullNameResult").innerHTML = lastName + ' ' + firstName;
  }
</script>

このコードでは、名前と苗字を入力し、表示ボタンをクリックすることで両方の入力内容をまとめてページ内に表示します。

●注意点: セキュリティ対策

入力内容を扱う際には、セキュリティ対策も重要です。

特に、ユーザーからの入力をそのまま表示する場合、XSS(クロスサイトスクリプティング)という脆弱性が発生することがあります。

対策として、入力内容のエスケープ処理を行うことが推奨されます。

function escapeHTML(text) {
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(text));
  return div.innerHTML;
}

このescapeHTML()関数を使用して、入力内容を表示する前にエスケープ処理を行いましょう。

function displayText() {
  var inputText = document.getElementById("inputText").value;
  document.getElementById("result").innerHTML = escapeHTML(inputText);
}