HTMLとCSSで作るコンタクトフォームの練習をしました。
HTMLは日頃よく使いますが、フォームはあまり作っていないので、いくつか練習してみました。
1つ目は自分で作成しましたが、2つ目のサンプルは他者様のサイトのサンプルを参考にさせていただきました。
HTMLは日頃よく使いますが、フォームはあまり作っていないので、いくつか練習してみました。
1つ目は自分で作成しましたが、2つ目のサンプルは他者様のサイトのサンプルを参考にさせていただきました。
一先ず、dt要素、dd要素をフロートさせる、初歩的なものを作成してみました。
CSSは、始めにモバイル、PC 共通の指定をして、767px以下、768px以上でブレイクポイントを設定し、簡単にレスポンシブ対応しています。
ついでに擬似要素:focusとtransitionで、input要素にフォーカスした時に実行される簡単なアニメーションも指定しています。
ほんとうにはじめてのHTML様のサイトこちらのページに公開してあるサンプル参考にさせていただき、以下のようなコンタクトフォームを作成してみました。
コードはほとんど同じ、フォームの内容を変更し、メディアクエリとフォーカス時のアニメーションを付け足しただけのものになります。
それと、こちらのサイト様を参考にさせていただき、電話番号とメールアドレスは、pattarn属性でバリテーションも実装しました。