【HTML】textareaの使い方をまとめてみた

Contents

　複数行の入力が可能なテキストボックスを作るためにはtextareaを使用することで作成できます。

<textarea>テスト</textarea>

↓↓表示結果↓↓

テスト

　入力フィールドの名前を設定します。データが送信されるときに、フィールドの名前とテキストボックスに入力された内容がセットになって送られます。

<textarea name="textareatest" >テスト</textarea>

↓↓表示結果↓↓

テスト

　見た目上の変化はありませんが、データの送信の際、name属性を取得してテキストエリア内の入力内容を取得することができます。

幅を指定します。

<textarea cols="10">テスト</textarea>

高さを指定します。

<textarea rows="10">テスト</textarea>

↓↓表示結果↓↓

テスト

10行分の高さのテキストエリアが作成されたことが確認できました。

テキストがフィールドの右端まで達したときの改行方法を指定します。

wrap ="soft"  画面上では自動的に改行して表示されるが送信されるデータは改行されない
wrap ="hard"  画面上では自動的に改行して表示し、送信されるデータにも改行がはいる
wrap ="off"   改行されない

●wrap =”off” 表示確認

<textarea> wrap="off">テストあいうえおかきくけこさしすせそたちつてと
テストあいうえおかきくけこさしすせそたちつてと
テストあいうえおかきくけこさしすせそたちつてと</textarea>

↓↓表示結果↓↓

テストあいうえおかきくけこさしすせそたちつてとテストあいうえおかきくけこさしすせそたちつてとテストあいうえおかきくけこさしすせそたちつてと

オススメ記事