<textarea>: テキストエリア要素
Baseline
広く利用可能
*
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
* この機能の一部は、対応レベルが異なる場合があります。
<textarea> は HTML の要素で、複数行のプレーンテキスト編集コントロールを表し、レビューのコメントやお問い合わせフォーム等のように、ユーザーが大量の自由記述テキストを入力できるようにするときに便利です。
試してみましょう
<label for="story">あなたのお話を教えてください:</label>
<textarea id="story" name="story" rows="5" cols="33">
それは暗い嵐の夜だった...
</textarea>
label,
textarea {
font-size: 0.8rem;
letter-spacing: 1px;
}
textarea {
padding: 10px;
max-width: 100%;
line-height: 1.5;
border-radius: 5px;
border: 1px solid #cccccc;
box-shadow: 1px 1px 1px #999999;
}
label {
display: block;
margin-bottom: 10px;
}
上記の例では <textarea> の様々な機能を紹介しています。
id属性により、アクセシビリティのために<textarea>を<label>要素に結びつけることができるname属性により、フォームが送信されたときにデータポイントに関連付けられた名前を設定しているrows属性とcols属性により、<textarea>が占める実際の大きさを指定することができます。ブラウザーの既定値が様々である可能性があるため、一貫性のためにこれらの値を設定することはよいことでしょう。<textarea>要素は、 HTML と JavaScript のコンテキストとでは、コンテンツの指定方法が異なります。- HTML では、
<textarea>の初期コンテンツは開始タグと終了タグの間で指定され、value属性としては指定されません。 - JavaScriptでは、
<textarea>要素には現在のコンテンツを取得または設定するために使用できるvalueプロパティと、初期値を取得または設定する
- HTML では、