HTMLやCSSを勉強として、シンプルな申し込みフォームを作りました。
どんなフォームをどのように作ったかを簡潔にまとめました。

成果物

作ったものはこんな感じ。
会員制サイトにありそうなシンプルな申し込みフォームを作りました。

HTML

<div class="content">
   <h1>入会申し込み</h1>
   <p>入会するには、次のフォームに必要事項をご記入ください。</p>
   <div class="controll">
      <label for="myemail">メールアドレス <span class="required">必須</span></label>
      <input id="myemail" type="email" name="email">
   </div>
   <div class="controll">
      <label for="mypassword">パスワード <span class="required">必須</span></label>
      <input id="mypassword" type="password" name="password">
   </div>
   <div class="controll">
      <button type="submit">登録する</button>
   </div>
</div>

フォームのタイトルはh1タグで、タイトル直下の注釈をpタグで出力。
フォームの送信項目であるメールアドレスとパスワードはinputで出力して、
buttonタグがクリックされた時に、inputタグの入力値が送信される想定。

でもフォームって言うからにはformタグを使った方が良かったなぁ・・・
formタグで書き換えたやつがこんな感じ↓↓

<form class="content">
   <h1>入会申し込み</h1>
   <p>入会するには、次のフォームに必要事項をご記入ください。</p>
   <div class="controll">
      <label for="myemail">メールアドレス <span class="required">必須</span></label>
      <input id="myemail" type="email" name="email">
   </div>
   <div class="controll">
      <label for="mypassword">パスワード <span class="required">必須</span></label>
      <input id="mypassword" type="password" name="password">
   </div>
   <div class="controll">
      <input class="submit" type="submit" value="登録する">
   </div>
</form>

全体を囲っていたdivタグがformタグになって、「登録する」ボタンのタグがinputタグになる感じですね。
本来であればformタグには送信先等を定義してあげます。

CSS

個人的にcssは苦手です。
まだお洒落なアニメーションを作るなんてことはできませんが、とにかくシンプルな見た目にすること意識しました。

.submit {
    width:100%;
    background-color: #2096f3;
    color:#fff;
    padding:15px;
    border: 0;
    border-radius:5px;
    box-shadow: 0 0 8px rgba(0,0,0,.4);

}

.required {
    color:#f33;
    font-size: .9em;
    padding: 3px;
    background-color: #fee;
    font-weight: bold;
}

要点だけ。

「.submit」では「登録する」ボタンのデザインを当てています。
色とか枠はいいとして、box-shadowの各設定値は注意です。
x軸、y軸、影の濃さ、影の色（r,g,b,不透明度）をそれぞれ設定します。

まとめ

今回は簡単な申し込みフォームを作りました。
cssの色付けで原色は使わない方が良さそうですね。
色使いなんかはこれから色々と作っていく中で学んでいきます。

応用としてフォームの送信先を作成して、DBに送信内容を登録して、、、なんてところまで作れるようになると良さそう。

参考

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門