Web制作コース中級編

企業と仕事できるコーディング力をつけよう

DAY 15

お問い合わせフォームのコーディング

さぁ、だいぶページの完成が見えてきましたね!次は、鉄板の『お問い合わせフォーム』の実装練習です。

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。

※パスワードはDAY9に記載したものと一緒です!

フォームは苦しむ人が多かったですねw


でもサイトには必須のパーツなので、レスポンシブ込みで実装できるようになっておきましょう!

コーディングに必要な値はデザインカンプから取得できます。その他の条件としては、以下の条件で作成してください。

  • ドロップダウンリストの中身はダミーテキストを3項目ほど
  • フォームの送信の仕組みは作らなくてOK(デザインの再現が目的)
  • プライバシーリンクはリンク(リンク先は空)
  • スマホ時は縦に並べる

01 余裕がある人向けの課題

02 参考にすべき記事

03 labelとフォームコントロールを結びつける

04 フォームのデザインをオリジナルにする

05 フォームのレスポンシブ表示について

06 回答例コード