はじめに
この記事を読めば、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);
}
まとめ
以上が、HTMLで入力内容を表示する方法の解説です。
これらの手順を踏むことで、初心者でも簡単にHTMLで入力内容を表示することができます。
さまざまな応用例や注意点も押さえておくことで、自分のサイトに最適な方法を実装できるでしょう。