プラカンブログ
プラカンブログ

プラカンブログ

入力フォーム内に初期値を設定!placeholderの簡単設定方法

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

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

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

placeholder

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

placeholderってそもそも何?

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

placeholderの書き方

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

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

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

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

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

この記事は NAKAMURA が書きました。

プラカン(PLUS DESIGN COMPANY)が目指す3つの顧客満足

  1. ホームページのできあがりに
    満足していただく

    • お客様のご要望、目的の達成
    • ホームページの利便性や満足度の向上
    • ブランドイメージの向上 など
  2. 仕事の進め方に
    満足していただく

    • スケジュール遅延のないスムーズな進行
    • お客様の理解度、知識、経験に応じた親切で分かりやすい進行
    • セキュリティ意識の高い安全な進行管理 など
  3. サポート・フォーローに
    満足していただく

    • 公開後も安心なサーバー保守、CMS保守、コンテンツの保守管理
    • 集客、コンバージョンを強化するためのアクセスログ解析
    • 集客、コンバージョンを強化するためのコンテンツの改善 など

詳しくはWEBコンサルティングをご覧ください

WEBコンサルティング

ホームページに関するご要望がございましたら、お気軽にご相談ください。

Contact Us

お問い合わせをお考えの方

お問い合わせ

Estimate

お見積りをご希望の方

お見積り

お電話でのお問い合わせ