\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > L_HTML/CSS > HTML,CSSでフォームを作ってみよう
フォームを作ってみよう記事サムネイル

HTML,CSSでフォームを作ってみよう

2022/07/14

2022/07/14

今回は一般的なお問い合わせフォームを実際に作っていきます。ひとつひとつのコードを細かく確認しながら進めていきましょう。

コンタクトフォーム自体の見た目・デザインはHTML, CSSで作成が可能ですが、実際に使用する場合は下記のような他の技術・プログラミング言語を使用する必要があります。

  • メール送信のためのPHPの技術
  • 入力項目チェックのためにJavaScript

よって今回は、HTML, CSSを用いて、コンタクトフォームの見た目のみを作っていきます。

サンプルのダウンロード

以下のリンクからサンプルをダウンロードしましょう。

ダウンロード

ファイルを開くと

  • 「code」→HTML・CSSファイル・画像ファイルが入っているファイル
  • 「mock-img」→モックアップ画像

の2つが入っています。

デザインの確認

エディタでファイルを開いてみましょう。

中に、画像ファイル「mock-img」がありますので、見るとデザインの全体像が確認ができます。

それぞれの要素や余白の大きさについては、次の通りです。

コーディングしてみよう

それでは、早速コーディングの作業を行っていきます。

コーディングを行う際は、いきなりコードを記述せず、サイトのデザインをよく確認することが大切です。

サイトのデザインを確認する

HTMLでサイトの構造を記述する

CSSでサイトの見た目を整えていく

上記の流れを意識して、実際にコーディングを行っていきます。

全体のレイアウト

サイトのデザインを確認する

今回のコンタクトフォーム全体の構図は画像のようになります。

全体のコンテンツ部分を一つの入れ物に入っているイメージです。

HTMLで構造を記述する

<body>
  <div class="contact"></div>
</body>

サイトのデザインを確認したら、HTMLで構造を記述します。

divタグを用いてを覆う構造を作ります。

CSSでサイトの見た目を整えていく

サイト全体のスタイル

* {
  box-sizing: border-box;
}

body {
  color: #333;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

まずは、全ての要素に対してbox-sizing: border-box;を指定しpaddingやborderをwidthに含めるようにします。さらに、サイト全体の文字色とフォントファミリーを指定します。

contactのスタイル

.contact {
  width: 960px;/*横幅*/
  margin: 0 auto;/*中央寄せ*/
  padding: 60px 0;
}

次に、先ほどcontactとクラス名を付けたdivタグに対し、横幅と中央配置を指定します。

上下にも余白が欲しいので、paddingを用いて余白を付けましょう。

横幅や余白などの指定なので表示を確認しても、目視で分かるような変更はありません。

引き続き、タイトルを作っていきましょう。

タイトル

サイトのデザインを確認する

特に難しい要素はないですが、記述された文字の確認などを行いましょう。タイトルとフォームとの間に余白があるのが分かるかと思います。このような余白もどの要素に対して付けるべきか、デザインを見て判断できるといいでしょう。

HTMLで構造を記述する

 <h1 class="contact-ttl">Contact</h1>

基本的にページのタイトルはh1タグを使用します。

CSSでサイトの見た目を整えていく

.contact-ttl{
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 40px;
  text-align: center;
}

今回、タイトルとフォームの間の余白は、タイトルに対して付けるようにしていきます。

その他、フォントサイズ40px、太字、テキスト中央寄せのスタイルを記述します。

ブラウザで確認するとこのような見た目になっています。

コンタクトフォーム

サイトのデザインを確認する

コンタクトフォームの機能はPHPなどと連帯し、仕組みを作る必要があるため、HTML側では入力周りをformタグで囲う必要があります。

HTMLで構造を記述する

<form action="">
  <table class="contact-table"></table>

  <!-- 後ほど送信ボタンを作成 -->
</form>

前述した通り、コンタクトフォームはformタグで囲います。その中に、表のような見た目を作るためにtableタグを記述しcontact-tableというクラスを命名します。

CSSでサイトの見た目を整えていく

.contact-table {
  width: 100%;
  margin-bottom: 20px;
}

tableタグに対して命名したcontact-tableクラスに対して、横幅をいっぱいに広げ、送信ボタンとの間の余白を作るためにmargin-bottomを指定します。

引き続き中身を作っていきましょう。

tableの中を作る

tableの中身を記述していきましょう。

HTMLで構造を記述する

   <tr>
     <th class="contact-item"></th>
     <td class="contact-body"></td>
   </tr>

tableは使用するタグが多い上にタグの名前が似ていて、間違いやすいので注意しましょう。

以下の記事でtableで使用するタグを紹介しているので、復習をしたい方は確認してみましょう。

https://zero-plus.io/media/html-css/tags/

trタグで行を作り、その中に行の見出しとしてthタグとデータとしてtdタグを記述します。

thタグに対してはcontact-itemというクラスを、tdタグにはcontact-bodyというクラスを命名します。

このtrタグ(行のまとまり)をコンタクトフォームのデザインの入力項目の数に合わせて複製しましょう。今回は「名前、性別、メール、電話、職業、スキル、お問い合わせ内容」と合計7つあるので、7つ分作ります。

CSSでサイトの見た目を整えていく

.contact-item,
.contact-body {
    padding: 20px;
    border: 1px solid #ccc;
}

.contact-item {
    text-align: left;
    width: 30%;
    background-color: #eee;
}

.contact-body {
    width: 70%;
}

ここでは、contact-itemとcontact-bodyに対して内側に余白を設け、枠線を付けています。

さらに、contact-itemにはテキストを左寄せ、横幅と背景色を指定し、contact-bodyには横幅のみ指定し3:7の割合としています。

ここまで書き、ブラウザで確認すると上記の画像のようになります。

入力欄を作る

表ができたら、あとは中身の項目名と入力欄を作成すればいいでしょう。

HTMLで構造を記述する

<tr>
  <th class="contact-item">名前</th>
  <td class="contact-body">
    <input type="text" name="名前" class="form-text" />
  </td>
</tr>
<tr>
  <th class="contact-item">性別</th>
  <td class="contact-body">
    <label class="contact-sex">
      <input type="radio" name="性別" />
      <span class="contact-sex-txt">男</span>
    </label>
    <label class="contact-sex">
      <input type="radio" name="性別" />
      <span class="contact-sex-txt">女</span>
    </label>
  </td>
</tr>
<tr>
  <th class="contact-item">メール</th>
  <td class="contact-body">
    <input type="email" name="メール" class="form-text" />
  </td>
</tr>
<tr>
  <th class="contact-item">電話</th>
  <td class="contact-body">
    <input type="tel" name="電話" class="form-text" />
  </td>
</tr>
<tr>
  <th class="contact-item">職業</th>
  <td class="contact-body">
    <select name="職業" class="form-select">
      <option>選択</option>
      <option>学生</option>
      <option>主婦</option>
      <option>会社員</option>
    </select>
  </td>
</tr>
<tr>
  <th class="contact-item">スキル</th>
  <td class="contact-body">
    <label class="contact-skill">
      <input type="checkbox" name="スキル" />
      <span class="contact-skill-txt">HTML,CSS</span>
    </label>
    <label class="contact-skill">
      <input type="checkbox" name="スキル" />
      <span class="contact-skill-txt">JavaScript,jQuery</span>
    </label>
    <label class="contact-skill">
      <input type="checkbox" name="スキル" />
      <span class="contact-skill-txt">WordPress</span>
    </label>
    <label class="contact-skill">
      <input type="checkbox" name="スキル" />
      <span class="contact-skill-txt">その他</span>
    </label>
  </td>
</tr>
<tr>
  <th class="contact-item">お問い合わせ内容</th>
  <td class="contact-body">
    <textarea name="問い合わせ" class="form-textarea"></textarea>
  </td>
</tr>

入力欄はinputタグなどで作成することができます。

inputタグは、

type属性でフォーム部品の種類(値によって種類の選択をする)

name属性で部品の名前

value属性で初期値

などを指定する事ができます。

今回は、項目ごとに以下のように指定しています。

項目タイプ意味
名前text1行のテキスト入力
性別radio一つだけ選択させるラジオボタン
メールemailメールアドレスの入力
電話tel電話番号の入力
スキルcheckbox複数選択可能なチェックボックス

ラベルの関連付け

ラジオボタンやチェックボックスは入力部品とラベルの関連付けをするためにlabelタグで囲っています。そうすることで、「男」、「女」や「HTML, CSS」、「JavaScript,jQuery」、「WordPress」、「その他」などの文字をクリックすると関連する入力部品が選択状態となります。

「職業」の項目はselectタグとoptionタグで実装しています。selectタグは、optionタグを同時に用いる事で選択肢を増やす事ができます。

そして、最後の自由記述の部分「お問い合わせ内容」は、入力部分に行数が欲しいためtextareaタグを使用します。inputタグには閉じタグがありませんでしたが、textareaタグには必要ですので注意しましょう。

CSSでサイトの見た目を整えていく

名前、メール、電話のスタイル

.form-text {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    max-width: 400px;
}

名前の項目などの1行の入力欄は見た目を統一したいので、同じクラスとしてform-textを命名しています。スタイルとしては、横幅、最大横幅や内側に余白、角丸などを付けて見た目を整えています。また、appearanceプロパティを用いてPCによって異なるスタイルを解除するようにしています。ブラウザ対応するためにもベンダープレフィックス付きでも指定しています。

性別のスタイル

.contact-sex + .contact-sex {
    margin-left: 10px;
}

.contact-sex-txt {
    margin-left: 5px;
}

隣接セレクタを用いることで、一つ目以降の要素にのみ指定することができ、今回は「女」の左側に余白を付けています。文字とラジオボタンの間に余白を付けるためにspanタグのcontact-sex-txtクラスに対してmargin-leftを指定しています。

職業のスタイル

.form-select {
    width: 180px;
    height: 40px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

職業のスタイルはシンプルに幅、高さ、余白、角丸などを付けています。

スキルのスタイル

.contact-skill {
    display: block;
}

.contact-skill + .contact-skill {
    margin-top: 10px;
}

.contact-skill-txt {
    margin-left: 5px;
}

各labelタグに対してcontact-skillクラスを付けていますが、インライン要素になるので横に並んでしまいます。縦に並べるためにdisplay: blockを指定しています。

次に、性別のスタイルと同じように一つ目以降の要素に対して上に余白を付けるようにしています。

最後に、文字とチェックボックスの間に余白を入れるためにspanタグのcontact-skill-txtに対してmargin-leftを指定しています。

お問い合わせ内容のスタイル

.form-textarea {
    width: 100%;
    padding: 10px;
    height: 200px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

最後のお問い合わせ内容に対しては、幅、高さ、余白、角丸などを付けています。幅に関してはセルいっぱいに広げるために100%としています。あとは、「名前、メール、電話のスタイル」と同様にappearanceプロパティを指定しています。

ここまで書き、ブラウザで確認すると上記の画像のようになります。

送信ボタン

サイトのデザインを確認する

最後にコンタクトフォームを送信するために、必ず必要な送信ボタンの作成をしていきます。

HTMLで構造を記述する

<input class="contact-submit" type="submit" value="送信" />

送信ボタンは、inputタグにtype属性submitを指定すると、送信ボタンを作成することができます。value属性の値はボタンのラベルとして表示されます。今回は「送信」と表示させたいので、「送信」という値をvalueに入れています。class属性にはcontact-submitを入れています。

CSSでサイトの見た目を整えていく

.contact-submit {
  width: 250px;
  background-color: #333;
  color: #fff;
  font-weight: bold;
  display: block;
  margin: 0 auto;
  font-size: 16px;
  padding: 15px;
  border-radius: 100vh;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

contact-submitに対して横幅、背景色、文字色、フォントサイズ、太字、内側に余白、角丸などを指定しています。その他、inputタグはインライン要素なのでblockに変更し、margin: 0 autoで中央寄せをして、appearanceプロパティを指定します。そして最後にマウスカーソルを載せたときにボタンであることを視覚化するためにcursor: pointerを指定し完成です。

完成

以上でコンタクトフォームの実装は終わりになります。

コンタクトフォームはポートフォリオサイトや企業HPなどと実践的に多く使われますので、細かい知識もしっかりと吸収していきましょう！

\ 学んだことをSNSでシェアしよう /

FacBook
Twitter
LINE
はてブ
PPocket

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

あなたの目的に合わせた２つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

記事のアイキャッチ画像

完全無料！30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

記事のアイキャッチ画像

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから