textarea : 複数行テキスト入力フィールド

カテゴリ

デモ

<textarea placeholder="Dear Francine,

They closed the parks this week, so we won't be able to
meet your there. Should we just have dinner?

Love,
Daddy">Dear Madam Speaker,

Regarding your letter dated ...

...

Yours Sincerely,

...</textarea>
↑この領域は編集できます(シンタックスハイライトは同期しません)。

説明

中身はテキストで、初期値(他のほとんどのフォーム部品ではvalue属性)として利用される。 だいたいの場合は他フィールドと比べて文字サイズが大きいので、スタイルを気にする場合は調整すると良い。

最近のブラウザでは、フォーム部品の大きさを指定してもだいたい右下のマークからユーザーが広げられるようになっているので、サイズの強制力は無いと考えたほうが良い。

値が妥当でなかった場合のメッセージについてはHTMLでは制御できないが、 JavaScriptのcheckValidity()setCustomValidity()を用いて自前のメッセージに変更できる。

属性 属性値の見方

autocomplete  newon|off|[オートフィル]chromefirefoxieandroid
オートコンプリートの有効/無効。デフォルトon
autofocus  new(真偽値)ie
ページロード時、ダイアログ表示時に自動でその要素にフォーカスする。
cols  変更[正の整数]
フィールドの横幅。だいたい半角文字くらいの幅x指定値+αになるが、等幅フォントやプロポーショナルフォントの違いなどは意識されていないので、余裕を持って指定すると良い。HTML5では任意になり、デフォルト値は20。
dirname  new[文字列]firefoxedgeie
入力値の書字方向を送る別のフィールド名を指定。例えばname="comment" dirname="comment.dir"とすると、入力されたのが英語の場合はcomment=Hello&comment.dir=ltr、アラビア語の場合はcomment=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&comment.dir=rtlといった感じになる。
disabled(真偽値)
そのフィールドを無効にする。値も送信されない。
form  new[ID]ie
関連付けるformのid属性の値を指定(name属性ではなく)。無い場合は親になっているform要素に関連付けられる。
maxlength  new[正の整数]|0
最大文字数。
minlength  new[正の整数]|0ie
最小文字数。
name[文字列]
そのフィールドの名前。name属性と中身のペアでサーバーに送信される。
placeholder  new[文字列]
その欄に入力するためのヒント。入力例など。ラベルではない。
readonly(真偽値)
そのフィールドを読み取り専用にする。
required  new(真偽値)
そのフィールドを入力必須にする。
rows  変更[正の整数]
フィールドの行数。HTML5では任意になり、デフォルト値は2。
wrap  newsoft|hard
折返し情報の送信方法を指定。既定値はsoft
  • soft: そのまま送信。
  • hard: 見た目上で折り返されている箇所にも改行コードを挿入して送信。
inputmode
HTML5で追加されたけど廃止された