シュウ

今回は【HTML】textareaの使い方、複数行のテキスト入力欄を作成しよう!
の解説になります！

こんな方に読んでほしい

• HTMLを学び始めた方へ
• HTMLについて学びたい方へ
• 今回はtextarea(複数行のテキスト)について解説しております。

今回は、textarea(複数行のテキスト)について詳しく解説していきます。
textareaでは、「複数行のテキスト」の入力欄を作成します。

textareaで作成すると、複数行のテキストの入力欄が作成されます。

左の図が、input type="text"になり、通常の入力欄になります。
右の図が、textareaになり、複数行のテキストの入力欄になります。

Chrome	Safari	Firefox	IE	Edge

textareaについて

textareaを指定すると、複数行のテキストの入力欄になります。
お問い合わせフォームの「お問い合わせ内容」、「ご質問」など、1行では入らない時に使います。
書き方は以下のようになります。

<form method="post">
	<div>
		<label for="contact">お問い合わせ内容</label>
		<textarea name="contact" rows="○○" cols="○○"></textarea>
	</div>
</form>

ポイント！
input type="text"は、1行の入力欄になります。
例)「お名前」、「電話番号」、「メールアドレス」、「パスワード」など
textareaは、複数の入力欄になります。
例)「お問い合わせ」、「ご質問」、「ブログのコメント」など

入力欄に初期値について

inputタイプでは、value属性に初期値(文字)を指定していましたが、
textareaでは、textarea〜初期値(文字)〜/textareaと指定すれば問題はありません。

※CSSは最後に解説しております。

<form method="post">
	<div>
		<label for="contact">お問い合わせ内容</label>
		<textarea name="contact">お問い合わせ内容を入力してください。</textarea>
	</div>
</form>

placeholder属性(入力欄に薄く表示)について

placeholder属性とは、入力欄に文字や値を薄く表示します、入力例などを表示するときに指定します。
placeholderで指定した文字や値は入力する際に、消えますので問題はありません。

<form method="post">
	<div>
		<label for="contact">お問い合わせ内容</label>
		<textarea name="contact" 
		placeholder="お問い合わせ内容を入力してください。"></textarea>
	</div>
</form>

※上記のコードは分かりやすいように、改行を入れております。

required属性(必須項目)について

required属性とは、必須項目に設定します、エラー表示はブラウザによって違います。
requiredのみ記述すれば問題ありません。

<form method="post">
	<div>
		<label for="contact">お問い合わせ内容</label>
		<textarea name="contact" 
		placeholder="お問い合わせ内容を入力してください。" required></textarea>
	</div>
</form>

※上記のコードは分かりやすいように、改行を入れております。

maxlength属性(文字数の最大値)について

maxlength属性とは、文字数の最大値を指定します。
maxlength="10"と指定すると、10文字を超えることはありません。

<form method="post">
	<div>
		<label for="contact">お問い合わせ内容</label>
		<textarea name="contact" 
		placeholder="10字まで入力可能です。" maxlength="10" required></textarea>
	</div>
</form>

※上記のコードは分かりやすいように、改行を入れております。

minlength属性(文字数の最小値)について

minlength属性とは、文字数の最小値を指定します。
minlength="5"と指定すると、5文字以上入力しないとエラーが表示されます。

<form method="post">
	<div>
		<label for="contact">お問い合わせ内容</label>
		<textarea name="contact" 
		placeholder="5字以上の入力が必要になります。" minlength="5" required></textarea>
	</div>
</form>

※上記のコードは分かりやすいように、改行を入れております。

ポイント！
maxlength、minlengthに関しては、文字数を制限するため、
ユーザーが「急に文字が入力できない」と混乱してしまう可能性がある為、placeholderを使い、文字数制限についての説明を残しておくと良いでしょう。
また、minlength属性を使う際には、空(0文字)でも送信できる為、必ずrequired(必須項目)も合わせて設定しておきましょう。

cols、rowsのサイズについて

colsとは、テキスト入力欄の幅を文字数で指定します。 (初期値は20になります)
rowsとは、テキスト入力欄の高さを文字数で指定します。 (初期値は2になります)

rows="8" cols="40"にしております。
CSSでの高さ、幅の指定もできますが、HTMLでのサイズ変更も可能になります。
また、rows、colsを指定しない場合は上記の初期値の値がサイズになります。

<form method="post">
	<div>
		<label for="contact">お問い合わせ内容</label>
		<textarea name="contact" rows="8" cols="40"></textarea>
	</div>
</form>

CSSでtextareaを整える

上記で「rows、cols」でのサイズを指定しましたが、CSSでもサイズの変更は可能です。
CSSでは、余白、ボーダー線などの指定も可能になってきます。

<form method="post">
	<div>
		<label for="contact">お問い合わせ内容</label>
		<textarea name="contact"></textarea>
	</div>
</form>

textarea {
	width: 60%; /*--幅--*/
	height: 140px; /*--高さ--*/
	margin: 1em 0; /*--外側の余白--*/
	padding: 1em;　/*--内側の余白--*/
	font-size: 1em;　/*--文字サイズ--*/
	border: solid 2px #e1e3e8;　/*--ボーダー線--*/
}

/*--focus--*/
textarea:focus {
  background-color: #febe3e; /*--背景色--*/
}

:focusとは、テキストフィールドなどのフォーム部品がフォーカス状態になったときに、
スタイルが適用されます。
今回は、「背景色」が変わるようになっております。

ドラッグによるサイズ変更を無効にする方法

textareaには、右下に小さいリサイズアイコン(一部のブラウザのみ)があり、ドラッグするとサイズが変わります。
サイズ変更を無効するにはCSSで無効するしかありません。

textarea {
	width: 60%; /*--幅--*/
	height: 140px; /*--高さ--*/
	margin: 1em 0; /*--外側の余白--*/
	padding: 1em;　/*--内側の余白--*/
	font-size: 1em;　/*--文字サイズ--*/
	border: solid 2px #e1e3e8;　/*--ボーダー線--*/
	
	resize: none; /*--リサイズを無効を追加してください--*/
  
}

関連記事

まとめ

今回はこれで以上です。
次回も「フォーム」について解説していきます。

Chrome	Safari	Firefox	IE	Edge

< 前の記事

【HTML】type属性searchの使い方、検索キーワードの入力欄を作成しよう!

次の記事 >

【HTML】selectの使い方、プルダウンメニューを作成しよう!