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

2021.06.22.

CSS

X 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>

経歴: 3DCG制作の専門学校を卒業後、デザイン会社に就職。デザイン会社では主にWEB制作を担当し、旅館の予約システムや商店街にWEBカメラを設置したプロモーション等を展開し、4年後に転職。 株式会社TREVOでデザイン、コーディング、ディレクション、システム開発を担当

X Facebook Pocket LINE はてブ

関連の記事

お問い合わせ
CONTACT

ホームページ制作に関することなら
お気軽にご相談ください

お電話でのお問い合わせはこちら

0120-838-567

平日9:00~18:00まで 定休日:土 日 祝