SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】textareaの使い方、複数行のテキスト入力欄を作成しよう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

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

textとtextareaを比較

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

ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge

textareaについて

textareaについて

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

textarea


<form method="post">
	<div>
		<label for="contact">お問い合わせ内容</label>
		<textarea name="contact" rows="○○" cols="○○"></textarea>
	</div>
</form>
指定できる属性
  • cols
    テキスト入力欄の幅を文字数で指定します。 (初期値は20になります)
  • rows
    テキスト入力欄の高さを文字数で指定します。 (初期値は2になります)

ポイント!
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で指定した文字や値は入力する際に、消えますので問題はありません。

placeholder属性について


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

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

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

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

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

required属性について


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

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

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

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

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

maxlength属性について


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

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

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

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

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

minlength属性について


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

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

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

cols、rowsのサイズについて

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

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

cols、rowsのサイズについて


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

CSSでtextareaを整える

CSSでtextareaを整える

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

CSSでtextareaを整える


<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; /*--リサイズを無効を追加してください--*/
  
}

関連記事

type=”text”【HTML】type属性textの使い方、1行のテキスト入力欄を作成しよう!
select【HTML】selectの使い方、プルダウンメニューを作成しよう!
output【HTML】outputの使い方、計算結果を表示させよう!
fieldset【HTML】fieldsetの使い方、フォーム入力欄をグループ化しよう!

まとめ

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

POINT
  • textareaは、 複数行の入力欄を作成します。
  • placeholder属性とは、入力欄に文字や値を薄く表示します。
  • required属性とは、必須項目に設定します。
  • maxlength属性とは、文字数の最大値を指定します。
  • minlength属性とは、文字数の最小値を指定します。
  • colsとは、テキスト入力欄の幅を文字数で指定します。 (初期値は20になります)
  • rowsとは、テキスト入力欄の入力欄の高さで指定します。 (初期値は2になります)
  • CSSでスタイルを整える際には、「クラス名、id名」を使っても問題ありません。
  • textareaのリサイズを無効にしたい場合はCSSでresize: noneを追加しましょう。
ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top