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

投稿日：2021.06.22.
更新日：2025.04.12.

執筆・編集衣川知秀

デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。

3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み：AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条：私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。

通常にフォームの入力欄は真っさらな状態ですが、「placeholder属性」を使うことによって、入力した例を表示することが出来ます。
ちょっとしたことですがユーザーの入力を手助けすることが出来ます。

■サンプル

■HTML


            <form action="" method="post">
                <div>
                    <label>お名前</label>
                    <input name="お名前" type="text" placeholder="山田 太郎" />
                </div>
                <div>
                    <label>メールアドレス</label>
                    <input name="email" type="email" placeholder="test@trevo.com">
                </div>
                <div>
                    <label>電話番号</label>
                    <input name="電話番号" type="tel" placeholder="06-6536-3062">
                </div>
                <div>
                    <label>お問い合わせ内容</label>
                    <textarea name="お問い合わせ内容" placeholder="お問い合わせ内容を入力してください。"></textarea>
                </div>
                <div class="btn_area">
                    <input type="submit" value="送信する">
                </div>
            </form>