HTMLテキストエリア：ステップバイステップガイド

HTML textareaタグは、フォームに複数行のテキスト入力フィールドを作成するために使用されます。 <textarea>で定義されます タグを付けて、無制限の数の文字を保持できます。

HTMLでフォームを作成するときに、長いテキスト文字列を受け入れることを決定する場合があります。たとえば、小売業者のWebサイトの顧客連絡フォームを作成する場合、顧客が直面している問題の詳細な説明を受け入れるフォーム要素を作成することができます。

ここで、HTMLの<textarea> タグが入ります。<textarea> elementは、複数行のテキスト編集機能を提供するフォーム要素を作成するために使用されます。この要素は、ユーザーからのより長いテキスト応答を受け入れる場合に役立ちます。

このチュートリアルでは、いくつかの例を使用して、HTML <textarea>の使用方法について説明します。 コード内のタグ。このチュートリアルを終了すると、<textarea>を使用するために必要なすべての知識が得られます。 プロのようにタグ付けしてください！

HTMLテキストエリアタグ

<textarea> タグは、フォームに複数行のテキスト入力コントロールフィールドを定義するために使用されます。 <textarea> タグは無制限の文字数を保持できます。

<textarea>の構文 タグは次のとおりです：

<textarea rows="10" cols="10">
Placeholder contents
</textarea>

コードを分解してみましょう。 <textarea> タグは、Webフォームのテキスト領域ボックスを定義するために使用されます。 <input>とは異なり タグ、<textarea> タグには両方の開始（<textarea>）が必要です ）と終了タグ（</textarea> ）。これは、テキスト領域に表示されるデフォルトのテキストが2つのタグの間に含まれているためです。

この例では、2つの属性も指定しています。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

• 行 テキスト領域にデフォルトで必要な行数をブラウザに指示します。つまり、rows属性はテキストエリアの高さを指定します。
• 列 テキスト領域にデフォルトで必要な列数です。つまり、cols属性はテキストエリアの幅を指定します。

地元の衣料品店のウェブフォームを作成しているとしましょう。このフォームでは、顧客が購入に関するフィードバックを提供できるようにする必要があります。ユーザーに詳細なフィードバックを送信する余地を与えたいので、<textarea>を使用します ユーザーのフィードバックを収集するためのHTML要素。

次のコードを使用してフィードバックフォームを作成できます。

<form>
	<label for="feedback">What feedback do you have for us?</label><br /><br />
	<textarea rows="5" cols="30" id="feedback" name="feedback">
	Your feedback goes here.
	</textarea>
</form>

コードは次のようになります：

コードを分解してみましょう。まず、<form>を宣言しました Webフォームを定義するために使用されるタグ。次に、<label>を使用しました タグを付けてページにラベルを追加し、ユーザーにWhat feedback do you have for us?

次に、<textarea>を使用しました フィードバックフォームを作成するためのタグ。次の4つの属性を指定しました。

• rowsは5に設定され、フィールドに必要な行数を格納します。
• colsは30に設定され、フィールドに必要な列数を格納します。
• idは、フォームに割り当てられた一意の識別子であり、フォームを送信するときに使用されます。
• 名前はフォームを識別するためにも使用され、フォームをWebサーバーに送信する場合に必要です。

<textarea> タグはすべての主要なブラウザでサポートされています。

上記の例は、<textarea>の基本的な実装です。 タグを付けますが、フォームをより高度にすることができます。

HTMLテキストエリアの例

<textarea>の使用方法を説明するために、さらに2つの高度な例を見ていきましょう。 タグを付けてテキスト領域を作成します。

最小および最大の長さ

衣料品店の例に戻りましょう。ユーザーがフィードバックを書くときに簡潔にするために、ユーザーが送信する文字数を1000文字に制限したいとします。また、ユーザーがフォームに何かを書き込めるように、最小文字数制限を10に設定します。

そこで、minlength属性とmaxlength属性が登場します。minlengthは、ユーザーが書き込む必要のある最小文字数を指定するために使用され、maxlengthは、ユーザーがフォームに書き込むことができる最大文字数を指定するために使用されます。

これは、minlength属性とmaxlength属性が設定された以前のWebフォームの例です。

<form>
	<textarea rows="5" cols="30" id="feedback" name="feedback" minlength="10" maxlength="1000">
	Your feedback goes here.
	</textarea>
</form>

フォームが返されます：

フォームに目に見える変更はありませんが、フォームを送信しようとすると、ユーザーが1000文字を超えて書き込んだ場合、フォームの内容は無効と見なされます。

ユーザーがフォームに10文字未満しか入力しなくても、textareaは有効であると見なされることに注意してください。最小制限を適用する場合は、requiredを指定する必要があります 属性。

プレースホルダーテキスト

上記のWebフォームでは、フォーム内にデフォルトのテキストを指定しています。このテキストには、Your feedback goes here.と記載されています。 これは有用な情報ですが、ユーザーがフォームの応答にデフォルトのテキストを含めたくない場合は、手動で削除する必要があります。

プレースホルダー値を指定する場合は、placeholderを使用できます 属性。この属性は、フォームが空のときに表示されるプレースホルダー値を示します。ユーザーがボックスに入力し始めるとすぐに、プレースホルダーが消えます。

これが<textarea>の例です プレースホルダーテキストがありますYour feedback goes here. ：

<textarea placeholder="Your feedback goes here." rows="5" cols="30">
</textarea>

コードは次のようになります：

ご覧のとおり、テキストYour feedback goes here. テキストボックスにが表示されます。ただし、ユーザーが入力を開始すると、このテキストは表示されなくなります。このテキストは薄い灰色であるためプレースホルダーであることがわかっていますが、この記事の最初の例で指定したデフォルトのテキストは、特に指定されていない限り、完全に黒のテキストで表示されます。

HTMLテキストエリア属性

<textarea> tagは、いくつかのタグ固有の属性を受け入れます。さらに、<textarea> タグはHTMLのすべてのグローバル属性をサポートします。

<textarea>でサポートされているタグ固有の属性は次のとおりです。 タグ：

結論

HTMLの<textarea> タグは、複数行のテキスト入力要素を作成するために使用されます。これらは、ユーザーからより長いデータ文字列を収集する場合に役立ちます。

このチュートリアルでは、例を参照して、<textarea>の使用方法について説明しました。 タグを付けてテキスト領域を作成します。このチュートリアルでは、<textarea>によって提供されるタグ固有の属性を含む参照テーブルも提供しました。 鬼ごっこ。これで、<textarea>の使用を開始する準備が整いました。 HTMLエキスパートのようなタグ！