デイトラWeb制作コース中級編DAY18 お問い合わせフォームのコーディング②

ファイルが添付できるフォーム

ファイルが添付できるタイプのフォームです。今回は少しですがjQueryも出てくるので難易度が上がってます。ファイルを選択ボタンのみ別に記事を書きましたのでそちらも併せてご覧ください。

https://nagimio.com/input-type-file/

目次

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

前回ほどではないですが、複雑になるので画像を用意しました。

フォーム図解

前回と同様に、どの要素になんの属性が必要かの表を作りましたのでよろしければご活用下さい。

https://docs.google.com/spreadsheets/d/1N6GhpWsohO1juPDEPe7_jIbdKZyHrnfwfILWUyFm_yw/edit?usp=sharing

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

.contact

base.scssと同じ。

.contact__inner

base.scssと同じ。

.contact__item

base.scssと同じ。

.contact__controls

base.scssと同じ。

.contact__control

base.scssと同じ。

.contact__label

base.scssと同じ。

.contact__label–required

base.scssと同じ。

.contact__required

base.scssと同じ。

.contact__radio

記述がありますが今回は使いません。

.contact__submit

base.scssと同じ。

.contact__radio-item

記述がありますが今回は使いません。

.contact__check

記述がありますが今回は使いません。

.form-input

base.scssと同じ。

.form-select

記述がありますが今回は使いません。

.form-textarea

記述がありますが今回は使いません。

.form-radio

記述がありますが今回は使いません。

.form-checkbox

記述がありますが今回は使いません。

.form-file

特に指定はありません。

.form-file__select

display: none;にします。

.form-file__label

「ファイルを選択する」ボタン。私は.form-file__buttonにクラス名を変えています。いつものボタンのセットで指定します。

.your-file-attention

「ファイルを選択するボタン」の下の注意書き。line-hightを行間÷フォントサイズの計算式で指定します。上マージンを少し空けます。

.form-file__result

添付したファイルのファイル名が表示されるブロック。上マージンを空けます。ファイルが選択されるまでは非表示にします。position: relative;で相対配置にしておきます。

.form-file__result-input

ファイルが添付された時にファイル名が表示される部分。

  • なんちゃらappearance: noneでブラウザのデフォルトスタイルをリセット
  • 背景を薄いグレーに
  • 背景画像はなし
  • グレーのボーダーで囲む
  • 角丸はなし
  • 文字色は継承
  • フォントファミリーは継承
  • フォントサイズは標準
  • パディングを少しとります
  • 幅は100%に

.form-file__result-close

添付ファイルの欄の閉じるボタン。画像を使います。position: absolute;に、widthとheightをpxで指定してtop、light、transformで位置調整します。カーソルは指マークに。

以上でDAY18は終わりです。次はフッターのコーディングです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次