【HTML】wrap属性で改行の情報を保つかどうかを指定する

このページについて

このページではHTMLで使う事ができるwrapの機能と使い方を解説しています。

wrapはtextareaタグで使う事ができるタグで、そのフォーム内に存在する改行をそのまま送信するかどうかを選ぶ事ができます。wrapはラップといって包むアレの事です。ちなみにワープはwarpです。

改行が不要な場合は指定無し、もしくはsoftを指定します。改行を含めた、そのフォームの内容をそのまま受け取りたい場合はhardを指定します。

wrapはtextareaタグでのみ使う事ができて、softかhardのどちらかを用途に応じて指定するだけでOKです。デフォルトではsoftとなっています。

<textarea rows="2" cols="20" wrap="hard"></textarea>

これで縦二行・横20文字相当のテキストエリアが出来上がります。そしてwrapをhardにしたので、ユーザーがここで入力した改行は保持されたまま送信されます。

textareaタグでは横幅を文字数で指定するcols属性というものがあります。ユーザーが入力している時はその文字数の指定に応じて自動で改行されますが、wrapをsoftにした場合は改行が含まれません。

完全に余談ではありますが、CSSにはflex-wrapというプロパティがあります。これは「コンテナ内のアイテムを画面の幅に応じて複数行で表示するかどうか」を決めたり操作するものです。

HTMLのwrapは改行のみを扱うのに対し、CSSのflex-wrapは表示コンテンツの位置操作を行うため、全くの別物だという事だけでも覚えておきましょう。

wrapはtextareaタグの改行情報を保持したまま送信するかどうかを選ぶ事ができる属性です。softは無し、hardは保持したまま送信します。CSSのwrapとは全くの別物なので、そこだけは覚えておきましょう。