初心者でも簡単！HTMLのtextareaを使いこなす10選の実例

●HTMLのtextareaとは
- ○textareaの基本
●textareaの使い方
●textareaの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

●HTMLのtextareaとは

HTMLのtextareaは、Webページ上でユーザーが複数行のテキストを入力できるようにする重要なフォーム要素です。

この要素を使用することで、ユーザーはコメント、メッセージ、長文の入力などを簡単に行うことができます。

textareaは非常に柔軟性が高く、さまざまな用途に対応できる優れた入力フィールドとなっています。

○textareaの基本

textareaタグを使用することで、簡単にテキストエリアを作成できます。

基本的な構造はシンプルですが、属性を追加することで機能を拡張できます。

textareaは、フォームの一部として使用されることが多く、ユーザーからの詳細な情報を収集する際に重宝します。

●textareaの使い方

textareaの使い方は非常にシンプルです。

ここでは、基本的な使用方法から少し複雑な例まで、段階的にサンプルコードを紹介します。

○サンプルコード1：基本的なtextarea

最も基本的なtextareaの使用例です。

このコードだけでも、ユーザーは複数行のテキストを入力することができます。

<textarea></textarea>

○サンプルコード2：制限付きtextarea

テキストエリアのサイズや入力可能な文字数を制限したい場合は、次のように属性を追加します。

<textarea rows="5" cols="30" maxlength="100"></textarea>

○サンプルコード3：複数行対応

長文の入力に対応するため、自動的に折り返しを行うtextareaを作成できます。

<textarea rows="10" cols="30" wrap="soft"></textarea>

●textareaの応用例

基本的な使い方を理解したら、次はより高度な機能を持つtextareaの実装方法を学びましょう。

JavaScriptを組み合わせることで、さらに使いやすいテキストエリアを作成できます。

○サンプルコード4：自動リサイズ

入力テキストの量に応じて自動的にサイズが変わるtextareaを作成できます。

ユーザーの入力体験を向上させる効果があります。

<textarea oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px';" style="overflow:hidden;"></textarea>

○サンプルコード5：入力文字数カウント

ユーザーが入力した文字数をリアルタイムで表示する機能を追加できます。

これで、ユーザーは残りの入力可能文字数を把握しやすくなります。

<textarea id="inputText" oninput="countCharacters();"></textarea>
<div id="counter">0文字</div>

<script>
function countCharacters() {
  var inputText = document.getElementById("inputText");
  var counter = document.getElementById("counter");
  counter.innerHTML = inputText.value.length + "文字";
}
</script>

○サンプルコード6：入力文字制限

maxlength属性を使用することで、入力可能な文字数を簡単に制限できます。

これは、データベースの制限や、特定の入力フィールドの要件に合わせて使用されます。

<textarea maxlength="100"></textarea>

○サンプルコード7：入力内容のリアルタイム表示

ユーザーが入力した内容をリアルタイムで別の場所に表示する機能を実装できます。

この機能は、プレビュー機能の基礎となります。

<textarea id="inputText" oninput="showInput();"></textarea>
<div id="display"></div>

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

○サンプルコード8：リッチテキストエディタ

リッチテキストエディタを実装するには、外部ライブラリを利用すると便利です。

ここでは、広く使われているTinyMCEを例にとって説明します。

TinyMCEは、テキストの書式設定、リンクの挿入、画像のアップロードなど、多彩な機能を提供します。

まず、TinyMCEのCDNリンクをHTMLファイルのhead部分に追加し、次にtextarea要素を配置します。

そして、JavaScriptを使ってTinyMCEを初期化します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>リッチテキストエディタの例</title>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
    <h1>リッチテキストエディタの例</h1>
    <textarea id="myTextarea">ここに初期テキストを入力できます。</textarea>

    <script>
        tinymce.init({
            selector: '#myTextarea',
            plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
            toolbar_mode: 'floating',
            toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
        });
    </script>
</body>
</html>

このコードでは、TinyMCEの基本的な機能を有効にしています。

pluginsオプションで使用するプラグインを指定し、toolbarオプションでツールバーに表示するボタンを設定しています。

実際の使用時には、TinyMCEの公式サイトでAPIキーを取得し、上記のコードのno-api-keyの部分を置き換える必要があります。

また、セキュリティ上の理由から、本番環境では常にhttps経由でスクリプトを読み込むようにしましょう。

○サンプルコード9：投稿プレビュー機能

ユーザーが入力した内容を、実際の表示形式でプレビューする機能を追加できます。

この機能は、ブログやフォーラムの投稿フォームでよく使用されます。

<textarea id="inputText" oninput="showPreview();"></textarea>
<button onclick="showPreview();">プレビュー</button>
<div id="preview"></div>

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

○サンプルコード10：複数のtextareaを連動させる

複数のtextareaの内容を同期させることができます。

この機能は、同じ内容を複数の場所に入力する必要がある場合に便利です。

<textarea id="inputText1" oninput="syncInputs();"></textarea>
<textarea id="inputText2" oninput="syncInputs();"></textarea>

<script>
function syncInputs() {
  var inputText1 = document.getElementById("inputText1");
  var inputText2 = document.getElementById("inputText2");
  inputText2.value = inputText1.value;
}
</script>

●注意点と対処法

textareaを使用する際には、ブラウザによって表示が異なる場合があるので、CSSでスタイルを統一しておくことが望ましいです。

また、ユーザーが入力したデータをそのまま表示する際は、セキュリティ上の理由から、スクリプトやHTMLタグが実行されないようエスケープ処理を行うことが重要です。

●カスタマイズ方法

CSSを利用して、textareaの見た目をカスタマイズできます。

フォントサイズ、ボーダー、パディングなどを調整することで、デザインに合わせたtextareaを作成できます。

例えば、次のようなスタイルが考えられます。

textarea {
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

このようなカスタマイズにより、ユーザーにとってより使いやすく、視覚的にも魅力的なtextareaを作成することができます。

まとめ

この記事では、HTML textareaの基本的な使い方から応用例まで、10のサンプルコードを紹介しました。

これらのコードを参考にして、初心者でも簡単にテキストエリアの作成やカスタマイズができるようになるでしょう。

また、注意点と対処法にも気をつけて、安全にテキストエリアを利用しましょう。

今回学んだことを活かして、自分だけのオリジナルなテキストエリアを作成してみてください。