こんにちは。 新型コロナウイルスが本当に怖い今日このごろですが、皆さんご無事でしょうか？これを読んでいる方が元気でいることをただただ願うばかりです... 休日も自粛ムードで外に出れず憂鬱な毎日ですが、なんとかしておうち時間を楽しんでやろうという意気込みだけはあるNAKAMURAです！

さて、気を取り直してブログを書きます。 今回は入力フォーム内に簡単に初期値を設定できるplaceholderの設定方法をご紹介したいと思います。

placeholderってなんだろう...って方も中にはいらっしゃるかと思いますが、 お問合せフォームとかの入力欄に最初から入っているグレーの文字、見たことはありませんか？

placeholderを設定しておくと、ユーザーが何を記入するべきなのかひと目で分かるのでとても親切ですよね。 どうせ難しいことしてるんでしょ...と思っていましたが大丈夫です。本当に簡単です。 では実際にどのように記述するのかご紹介します！

placeholderってそもそも何？

• HTMLのinput要素やtextarea要素に記述できる属性のこと
• placeholder属性を使って記述した値はそのまま入力欄に反映される
• ユーザーが記入した時点でplaceholder属性の値は見えなくなる

placeholderの書き方

「placeholderの書き方」などと大きく見出しを作ってみたは良いものの、書き方は至ってシンプルです。 このようにinput要素に対してplaceholderを記述、後は好きな値を入れるだけです。

<form><label>氏名<input type="name" name="name" placeholder="山田 太郎"></label></form>

ものすごく難しいことをしているのかと思いきや、こんなに簡単に設定できます。

例えばユーザーに、名前を漢字で記入してほしい時、住所を全角文字で記入してほしいときなどヒントとしてplaceholderを入れておくと良いかもしれません！

これからフォームの作成に挑戦される方、ぜひお試しください！