〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

【コピペOK】HTML textareaの使い方から応用まで!テキストエリア要素の全て!

本記事は、「textareaを使っているけど、スクロールバーのカスタマイズが難しい…」と思いつつ

UIHACK
編集長
UIHACK 編集長

・テキストエリアのデフォルトの見た目が気に入らない人
・textareaを使っているけど、スクロールバーのカスタマイズが難しい人
・ユーザーが入力したテキストの改行を正しく表示させたいんだけど、どうすればいいのか分からない人

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向け現役エンジニアが解説します。

この記事では、「前半」では「textarea要素の基礎知識と使い方」「後半」では「textareaの自動リサイズ方法」「入力欄にカーソルを合わせるときにデザインを変更」する方法を詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください!

HTML textarea要素の基礎知識と使い方をわかりやすく解説

textarea要素は、Webページやアプリでテキストを入力する場所を作るためのツールです。例えば、コメントを書く欄メッセージを送信する欄などに使われます。この記事では、HTML textarea要素の基本的な使い方を分かりやすく解説します。

1.HTML textarea要素の基本の使い方

HTML textarea要素を使うと、次のようなテキスト入力欄を作ることができます。

【完成デモ】textarea要素の基本の使い方

HTML

<textarea rows="4" cols="50"></textarea>
HTML
プチ解説

これで、4行分のテキストが入る入力欄が表示されます。

2.デフォルトのテキストを指定する

このテキスト入力欄は、最初は何も書いていない状態ですが、デフォルトのテキストを指定することができます。

【完成デモ】デフォルトのテキストを指定

HTML

<textarea rows="4" cols="50">ここにテキストを入力してください。</textarea>
HTML
プチ解説

これで、入力欄に最初から「ここにテキストを入力してください。」と表示されるようになります。

3.フォームとして使う

HTML textarea要素は、フォームの一部として使われることが多いです。例えば、お問い合わせフォームのメッセージ欄などに使われます。次のように使います。

【完成デモ】フォームとして使う

HTML

<form action="/submit" method="post">
  <textarea name="user_message" rows="6" cols="50"></textarea>
  <input type="submit" value="送信">
</form>
HTML
プチ解説

このようにすると、ユーザーがメッセージを入力して「送信」ボタンを押すと、メッセージがサーバーに送信されます。

4.必須入力やその他の設定

また、入力欄を必ず埋めてもらいたい場合は、次のように required という属性を追加します。

【完成デモ】必須入力やその他の設定

HTML

<textarea name="user_message" rows="6" cols="50" required></textarea>
HTML
プチ解説

さらに、リサイズ(大きさを変えること)を無効にしたり、最初からフォーカス(カーソルが自動的に入力欄に表示されること)を設定することもできます。

textarea要素の基礎知識のまとめ

textarea要素は、Webページやアプリでテキストを入力する場所を作るための場所です。

フォームの一部として使われることが多く、必須入力やリサイズ、フォーカスの設定もできます。

inputタグとtextareaタグの基本的な違いとは?

プログラムを書く際に、テキスト入力欄を作成する方法には、Inputタグtextareaタグ2つがあります。それぞれの違いを簡単に説明しますね。

inputタグ

inputタグは、一行だけのテキスト入力欄を作成するときに使います。例えば、ユーザー名やパスワードを入力する欄などです。inputタグは次のように書きます。

【完成デモ】inputタグ

HTML

<input type="text" name="username">
HTML
プチ解説

上記のコードでは、“username” という名前のテキストボックスが表示されます。

textareaタグ

textareaタグは、複数行のテキスト入力欄を作成するときに使います。例えば、ブログ記事の本文やお問い合わせフォームのメッセージを入力する欄などです。textareaタグは次のように書きます。

【完成デモ】textareaタグ

HTML

<textarea name="message" rows="4" cols="50"></textarea>
HTML
プチ解説

念のため、前の章でも解説しましたが、上記のコードでは、4行分のテキストが入る入力欄が表示されます。

inputタグとtextareaタグの使い分けのポイント

inputタグ短いテキストを入力させるときに使い、textareaタグ長い文章を入力させるときに使います。

例えば、ログインフォームのユーザー名やパスワードにはInputタグを使い、ブログの記事を書く欄やお問い合わせフォームのメッセージ欄にはtextareaタグを使います。

inputタグとtextareaタグの使い方の違い

inputタグには type 属性を使って入力の種類を指定しますが、textareaタグにはそのような属性はありません。また、textareaタグには rows 属性cols 属性を使って、入力欄の大きさを指定することができます。

inputタグとtextareaタグの基本的な違いを比較した表をまとめておきます。

inputタグtextareaタグ
用途一行のテキスト入力欄を作成する複数行のテキスト入力欄を作成する
書き方<input type=”text” name=”username”><textarea name=”message” rows=”4″ cols=”50″></textarea>
属性type属性で入力欄の種類を指定行数(rows)と列数(cols)を指定
使い分け短いテキストを入力させる場合に適している長い文章やコメントを入力させる場合に適している
inputタグとtextareaタグについてのまとめ

Inputタグは一行だけの短いテキストを入力させる場合に使い、type 属性で入力欄の種類を指定します。一方、textareaタグは複数行の長い文章やコメントを入力させる場合に適しており、rows 属性と cols 属性で入力欄の大きさを指定します。適切に使い分けることで、ユーザーにとって使いやすいテキスト入力欄を提供できます。

HTML textarea自動リサイズの実装方法

HTMLのtextarea要素を使って、ユーザーがテキストを入力する入力欄を作ることができると以前に解説しましたが、より便利にする為に、入力欄を自動的にリサイズして、ユーザーが快適に入力できるようにする方法を説明しますね。

1.CSSを使った自動リサイズの実装

まず1つ目の方法は、CSSというスタイルを指定する言語を使う方法です。resizeというプロパティを使って、入力欄を垂直方向に自動的にリサイズすることができます。

【完成デモ】CSSを使った自動リサイズの実装

HTML

<!-- 自動リサイズが有効なtextarea要素 -->
<textarea id="myTextarea"></textarea>
HTML

CSS

textarea {
  resize: vertical;
  width: 300px; /* 入力欄の横幅を指定(例として300pxに設定) */
  height: 100px; /* 入力欄の最初の高さを指定(例として100pxに設定) */
}
CSS
プチ解説

上記のHTMLコードでは、CSSのresize: vertical;により自動リサイズ機能を有効にしています。

また、widthheight入力欄の初期のサイズを指定しています(例として300pxの横幅(width)100pxの高さ(height)に設定していますが、実際の使用に合わせて適切な値を設定してください)。

フォーカスイベントを使った動的なスタイル変更の実装

フォーカスイベントを使って、入力欄にカーソルを合わせるときと外すときに、スタイル(見た目)を変える方法を説明します。

フォーカスイベントとは?

フォーカスイベントは、入力欄にカーソルを合わせたり外したりすると発生するイベントのことです。入力欄にカーソルを合わせるときには、その入力欄がアクティブになり、外すと非アクティブになります。

【完成デモ】フォーカスイベント

プチ解説

このJavaScriptのコードでは、changeStyle関数isFocusedという引数を受け取ります。

この引数にはtrueまたはfalseが渡されます。trueフォーカスが合わさったとき(アクティブな状態)falseフォーカスが外れたとき(非アクティブな状態)を表します。それに応じて、入力欄のスタイルを変更しています。

この例では、フォーカスが合わさったとき入力欄の背景色を淡い青(lightblue)、文字色を黒に変え、フォーカスが外れたとき背景色を白、文字色を灰色に戻すようにしています。

textarea要素の基礎知識ついての結論とまとめ

UIHACK
編集長
UIHACK 編集長

今回は、textarea要素の基礎知識と使い方についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

本記事で学んだ事
  • textarea要素の基礎知識と使い方をわかりやすく解説
  • inputタグとtextareaタグの基本的な違いとは?
  • textarea自動リサイズの実装方法
  • フォーカスイベントを使った動的なスタイル変更の実装

もう一度、最初から「textarea要素の基礎知識と使い方をわかりやすく解説」を読む↑

HTML・CSSでログイン画面を実装したい方は、ぜひ以下の記事もご覧ください。

CSSでアニメーションを実装したい方は、ぜひ以下の記事もご覧ください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です