HTML5 Textarea Attributes:

<textarea> は何のために使うのか?

ほとんどの HTML フォームは、親フォーム要素、いくつかの入力要素 (そのうち少なくとも 1 つは submit タイプ)、1 つまたは複数の textarea で構成されています。 電子メールアドレスや電話番号、その他定義が簡単な内容を受け付けるフォームフィールドが必要な場合は、適切な入力タイプを使用します。

HTML5 の textarea 属性

HTML5 では、textarea 要素で使用できるいくつかの新しい属性が導入されました。

  • form.Textarea 要素で使用できる新しい属性をいくつか紹介します。 textareaをフォームと関連付けます。 テキストエリアのフォーム属性の値として、フォームのID属性を使用します。 これにより、textareaをウェブページのどこにでも、たとえform要素の外側でも配置でき、formが送信されたときにtextareaの内容が含まれるようになります。 textareaに入力できる最小または最大の文字数を指定するために使用されます。
  • placeholder:
  • required: ユーザーが要素の内部にカーソルを置くとすぐに消えるプレースホルダーテキストを textarea に追加します。
  • wrap: textarea で送信されたコンテンツにハードリターンを追加するかどうかを指定します。

動作中の属性

これらの新しい属性のいくつかを使用して textarea の動作を制御できる例を以下に示します。

<p>This text area is limited to just 10 characters</p> <textarea cols="50" rows="3" maxlength="10" placeholder="Just 10 characters allowed"></textarea> <p>This text area is readonly and cannot be changed</p> <textarea cols="50" rows="3" readonly>This value can't be changed</textarea> 

If we pair those textarea elements with a simple script and button element, we get the following form:

Adam is a technical writer who specializes in developer documentation and tutorials.