【HTML】placeholder属性で入力エリアにヒントを表示する方法

このページについて

このページではHTMLで使う事ができるplaceholderの機能と使い方の解説をしています。

placeholderは入力エリア・テキストエリアに使う事で、その入力欄に対する説明などを表示する事ができます。使う事ができるタグはinputタグ/textareaタグの2つです。

placeholderで表示している文字に関してはmax属性やmin属性の影響は受けません。そしてユーザーが入力を開始すると、placeholderとして設定している文字は消えます。

placeholderはinputタグやtextareaタグに使う事ができます。

<input type="email" placeholder="メールアドレスを入力">

とすれば以下のような入力フォームができます。

textareaタグも同じように使います。

<textarea maxlength="100" placeholder="100文字以内で入力"></textarea>

最大文字数を設定するmaxlength属性を使っているので、ユーザーがどれだけ入力しても100文字を超えることはできません。min属性を使ってx文字以上という場合もplaceholderで明記することでユーザーが戸惑う事が減ると思います。

placeholderはinputタグ/textareaタグで使う事ができます。入力エリアに表示しているように見えますが、ユーザーが入力を開始すると消えるようになっています。何を入力してほしいかを明記しておくのが良いと思います。