対象読者
- （X）HTMLとCSSの基本を理解している方。
- デザインのコツを学びたい方。
必要な環境
本連載で動作確認を行ったブラウザは次のとおりです。
- Windows 7 Internet Explorer 11（以下IE 11）
- Windows 7 Firefox 30
- Windows 7 Chrome 35
エアメール風デザインのお問い合わせフォーム
今回は、図1のようなエアメール風デザインのお問い合わせフォームをCSSでスタイリングする方法を紹介します。
フォーム全体のマークアップ
まずはフォーム全体のマークアップを確認しましょう。HTML5で書いたもので、p要素でlabel要素とinput要素を囲んだシンプルなコードです。赤と青の斜線を表現するために、全体をdivで囲み、sampleというID名を付けています。また、最後のp要素は送信ボタンを紙のように装飾するため、ここにもsubmitというID名を付けました。
<div id="sample">
<form>
<h1>Contact Us</h1>
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" required="required">
</p>
<p>
<label for="mail">E-mail</label>
<input type="email" name="mail" id="mail" required="required">
</p>
<p>
<label for="tel">Phone</label>
<input type="tel" name="tel" id="tel" required="required">
</p>
<p>
<label for="message">Message</label>
<textarea name="message" id="message" required="required"></textarea>
</p>
<p id="submit"><input type="submit" value="Send Message"></p>
</form>
</div>
required属性で必須項目を指定
HTML5では、入力必須、妥当性のチェック、入力補助など、これまでJavaScriptで作成されることの多かったフォームに関する機能をHTMLで指定することができます。ただし、これらのチェックは未対応ブラウザによっては働きませんし、JavaScriptをほとんど用いずに入力値チェックが可能になったとしても、サーバー側でのチェックが不要になるわけではありませんので使用の際には気を付けましょう。
サンプルでは、入力必須の指定にHTML5で追加されたrequired属性を使っています。
<p> <label for="name">Name</label> <input type="text" name="name" id="name" required="required"> </p>
図2のように、required属性をサポートしている一般的なブラウザで値が空のまま送信ボタンを押すと、注意を促す表示が出てPOSTできなくなります。
<input type="email">
HTML5では、input要素のtype属性に新しい値が多数追加されました。
| 値 | 説明 |
|---|---|
| メールアドレス | |
| url | URL |
| search | 検索テキスト |
| tel | 電話番号 |
| date | 日付 |
| datetime | UTC（協定世界時）による日時 |
| datetime-local | UTC（協定世界時）によらないローカル日時 |
| month | 月 |
| week | 週 |
| time | 時間 |
| month | 月 |
| week | 週 |
| time | 時間 |
| number | 数値 |
| range | 大まかな数値 |
| color | 色 |
サンプルでは、type属性の値にemailを指定しメールアドレス入力欄を作成しています。
<p> <label for="mail">E-mail</label> <input type="email" name="mail" id="mail" required="required"> </p>
図3のように、type="email"をサポートしている一般的なブラウザでは、メールアドレス以外の内容を入力して送信しようとするとエラーが表示されます。
<input type="tel">
input要素のtype属性の値にtelを指定すると、電話番号入力欄を作成できます。こちらもHTML5で追加された値です。
<p> <label for="tel">Phone</label> <input type="tel" name="tel" id="tel" required="required"> </p>
type="email"のように、入力形式が決まっているわけではなく、type="text"と同じような動作になりますが、スマホ／タブレットなどのソフトウェアキーボードがある環境によっては、キーボードがテンキーになります。
