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に送信内容を登録して、、、なんてところまで作れるようになると良さそう。