HTML

<textarea> 複数行テキストボックス

詳細を開く 詳細を閉じる

<textarea>要素は、

初期値

  • 初期値は開始タグと終了タグに挟まれた文字列です。
  • 改行・タブ・スペースがある場合、それらも含みます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<textarea name="ta">
初期値です。
	改行・タブ・スペースも        含みます。
</textarea>
	
<br><br>

<input type="submit" value="送信">

</form>

ヒント : placeholder

  • ユーザにヒントを与えるにはplaceholder属性を使います。
  • なお、初期値を設定すると、初期値が優先されplaceholderは表示されません。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<textarea name="ta"
	placeholder="複数行入力可能です。" >
</textarea>
	
<br><br>

<input type="submit" value="送信">

</form>

最大長 : maxlength

  • maxlength属性を使うと、入力可能な最大文字数が指定できます。全角文字も1文字として数えられます。
  • 以下の例では、maxlengthが5であるので、「123456」と6文字の入力はできません。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<textarea name="ta" maxlength="5">
1234</textarea>
	
<br><br>

<input type="submit" value="送信">

</form>

大きさ : cols rows

  • 見た目の大きさを変えるにはcols属性(行の長さ、横方向)とrows属性(行数、縦方向)を使います。
  • ただし、あくまでも見た目であり、設定値以上の行の長さや行数を入力することは可能です。また、入力できる最大長は無制限です。
  • 入力できる(全体の)最大長を指定するのは、上のmaxlength属性です。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<textarea name="ta" cols="28" rows="5">
123456789_123456789_123456789_
あいうえおかきくけこさしすせそ
</textarea>
	
<br><br>

<input type="submit" value="送信">

</form>

必須入力 : required

  • required属性を使うと、必須入力となります。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<textarea name="ta" required
		  placeholder="必ず入力してください。">
</textarea>
	
<br><br>

<input type="submit" value="送信">

</form>

読取専用 : readonly


別ウィンドウで表示

<form action="../aaa.php" method="GET">

<textarea name="ta" readonly>
読み取り専用です。
文字列を選択しコピーすることはできますが、変更はできません。
</textarea>
	
<br><br>

<input type="submit" value="送信">

</form>

無効 : disabled


別ウィンドウで表示

<form action="../aaa.php" method="GET">

<textarea name="ta" disabled>
無効です。
文字列を選択することもできません。
</textarea>
	
<br><br>

<input type="submit" value="送信">

</form>

自動で改行挿入 : wrap="hard"

  • wrap属性は、ブラウザが自動的に改行コードを挿入するか否かを指定します。
  • デフォルトでは「soft(自動で挿入しない)」です。
  • 設定を「hard(自動で挿入する)」にすると、テキストボックスの幅を超えないように、ブラウザが自動的に改行コードを挿入します。
  • サンプルの「送信」ボタンをクリックしましょう。サーバに送られたデータを確認すると、3)の場合のみ改行が含まれています。(別のウィンドウで表示した方が分かりやすいです。)

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<textarea name="ta">
1)0123456789 0123456789 0123456789 あいうえおかきくけこさしすせそ
</textarea>
	
<br><br>

<textarea name="soft" wrap="soft">
2)0123456789 0123456789 0123456789 あいうえおかきくけこさしすせそ
</textarea>
	
<br><br>

<textarea name="hard" wrap="hard">
3)0123456789 0123456789 0123456789 あいうえおかきくけこさしすせそ
</textarea>

<br><br>

<input type="submit" value="送信">

</form>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ