HTML & CSS

最終更新日:
公開日:

レシピ

フォーム

複数行のテキストを入力するフォームを作る

textarea要素を使って、複数行にわたるテキストを入力できるフォームを設置する方法について解説します。

この記事のポイント

  • 複数行の入力ができるフォームを設置する
  • 最小文字数と最大文字数を設定する

目次

複数行のテキストを入力できるフォーム

フォームはinput要素を使った1行入力のテキストフォームが用意されていますが、複数行のテキストを入力するためのフォームとしてtextarea要素が用意されています。

表示例
表示例

コード例

<section>
	<h2>お問い合わせフォーム</h2>
	<form action="" method="post">
		<div>
			<label for="i_name">お名前</label>
			<input id="i_name" type="text" name="name" value="" placeholder="山田 太郎">
		</div>
		<div>
			<label for="i_furigana">フリガナ</label>
			<input id="i_furigana" type="text" name="furigana" value="" placeholder="ヤマダ タロウ">
		</div>
		<div>
			<label for="t_message">お問い合わせ内容</label>
			<textarea id="t_message" name="message" placeholder="こちらにお問い合わせ内容を入力してください。"></textarea>
		</div>
		<div class="btn_area">
			<input type="submit" name="btn_confirm" value="入力内容を確認する">
		</div>
	</form>
</section>

お問い合わせいの内容(質問)など、入力される文字数が多かったり、テキストを途中改行できるようにする時はテキストエリアが最適です。

テキストエリアの入力例
テキストエリアの入力例

入力できる文字数を制限する

textarea要素は最小入力文字数と最大入力文字数をそれぞれ設定することができます。
例えば最小入力文字数を設定して、もし入力された文字が満たない場合は次のようなメッセージが表示されます。
※表示されるメッセージはブラウザによって異なります。

最小入力文字数に満たなかった場合のメッセージ
最小入力文字数に満たなかった場合のメッセージ

最小入力文字数を5文字以上、最大入力文字数を10文字までとする場合は、次のようなコードになります。

コード例

<textarea id="t_message" name="message" placeholder="こちらにお問い合わせ内容を入力してください。" minlength="5" maxlength="10"></textarea>

最小文字数はminlength属性、最大文字数はmaxlength属性で指定することができます。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。