大阪のホームページ制作会社 株式会社TREVO
技術ブログ

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

2021.06.22.

CSS

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

通常にフォームの入力欄は真っさらな状態ですが、「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>

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

twitter Facebook Pocket LINE はてブ