フォームの入力欄に入力ヒントを表示する

フォームにヒントを表示して入力しやすくする

フォームの入力欄は真っさらな状態よりも、あらかじめ入力した例を提示してある方がイメージが湧き入力しやすいことがあります。

この入力のヒントとなるテキストを「プレースホルダー」と言い、placeholder属性を使って指定することができます。

コード例

<section>
	<h2>お問い合わせフォーム</h2>
	<form action="" method="post">
		<div>
			<label>お名前</label>
			<input type="text" name="name" value="" placeholder="山田 太郎">
		</div>
		<div>
			<label>フリガナ</label>
			<input type="text" name="furigana" value="" placeholder="ヤマダ タロウ">
		</div>
		<div>
			<label>メールアドレス</label>
			<input type="email" name="email" value="" placeholder="test@test.com">
		</div>
		<div>
			<label>電話番号</label>
			<input type="tel" name="tel" value="" placeholder="080-xxxx-xxxx">
		</div>
		<div>
			<label>お問い合わせ内容</label>
			<textarea name="message" placeholder="こちらにお問い合わせ内容を入力してください。"></textarea>
		</div>
		<div class="btn_area">
			<input type="submit" name="btn_confirm" value="入力内容を確認する">
		</div>
	</form>
</section>

input要素以外に複数行のテキストを入力するtextarea要素についても、同じ属性を使って指定することができます。

なお、プレースホルダーの文字の色は変更することも可能です。
設定方法については、別記事「placeholder(プレースホルダー)属性のテキストカラーを変える」をご覧ください。