以下、追加のHTMLファイルを作成したと仮定しています。とにかく私はそれをkontakt.htmlという名前で保存します。kontakt.htmlはすでにおなじみのindex.htmlと同じ階層にあります。
この最初の部分では、フォームの基本設定が行われます。角丸やグラデーションなどは次のチュートリアルで行います。
kontakt.html内でフォームを作成します。フォームは、クラスがcontentであるdiv要素の中で定義されます。その後、どのフィールドを設定するかを考えます。私は以下の情報を入力することにしました:
• 名前
• メールアドレス
• コメント
もちろん、どの情報を取得するかは自分で決める必要があります。基本的には、実際に必要なデータのみを入力することをお勧めします。実際、Webサイトのほとんどの訪問者は複雑なフォームを敬遠します。ですので、簡潔にまとめてください。
私のフォームの基本構造は次のようになります:
<div class="content">
<formclass="form" action="#" method="post">
<fieldset>
<legend>お問い合わせ</legend>
<ol>
<li>
<label for="name">名前:</label>
<input type="text" name="name"id="name" value="" />
</li>
<li>
<label for="email">メールアドレス:</label>
<input type="text" name="email" id="email"value="" />
</li>
<li>
<label for="comment">コメント:</label>
<textarea cols="32" rows="7"name="content" id="content"></textarea>
</li>
<li class="button">
<input type="submit" name="submit"id="submit" value="送信" />
</li>
</ol>
</fieldset>
</form>
</div>このフォームにはまず特筆すべき点がありません。フォームフィールドのまわりにはfieldset定義が適用されています。フォームフィールドを作成し、label要素がどのように機能するかはすでに十分に説明されています。ここではフォームのスタイリングに全精力を注ぎます。
ブラウザで結果を表示すると、まだ見栄えの良くないフォームが表示されます。
ここで改善が必要です。
フォームに関する基本情報が最初に入ります。
form {
padding: 3px 0 0;
margin: 10px auto;
width: 550px;
}
外部および内部マージンが定義され、フォームの幅が550ピクセルに設定されます。
次はfieldsetのスタイリングです。
fieldset {
padding: 10px 20px 25px;
}
ここでもマージンが定義されます。
フォームフィールド自体は順序付きolリスト内に配置されています。
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
リストがリストとしては見えないようにするためにlist-style-type: none;が使用されます。また、それぞれの余白とパディングがゼロに設定されます。
次に、リスト項目を定義します。これらは左にフロートし、内部マージンは10ピクセルです。
li {
float: left;
padding: 10px;
}
フォームの下にあるボタンについて特筆すべき点があります。このボタンは右寄せになります。
li.button {
float: none;
clear: both;
text-align: right;
}フォームタイトル
ここではlegend要素に注目します。これにより、フォームタイトルが定義されます。
見出しの定義は次のようになります:
fieldset legend {
font-weight: bold;
font-size: 22px;
margin: 20px 0 0 10px;
}ラベル
label要素はこのシリーズの中で既に紹介されています。このlabelを使用すると、フィールドのラベルと実際のフォームフィールドとの論理的な関連性を設定できます。CSS定義に関しては、ここに特筆すべき点があります。
label {
display:block;
cursor: pointer;
font-weight: bold;
line-height: 24px;
}label要素にはcursor指定などを行っています。訪問者にフィールドラベルがクリック可能であることを示すためです。実際にフィールドラベルをクリックすると、関連するフィールドにカーソルが自動的に移動します。
フォームフィールドのスタイリング
次に、実際のフォームフィールドをスタイリングします。最初にinputとtextareaへの一般的な設定が行われます。
input, textarea {
color: #3399FF;
border: 1px solid #3399FF;
font: 13px Helvetica, Arial, sans-serif;
padding: 8px 10px;
width: 190px;
}
それは純粋にデザインに関するものです。特に枠に注意を払うべきです。実際、マウスカーソルをフィールドにセットすると枠の色が変わります。これは美的側面だけでないことでもあります。実際、これはフォームの記入を訪問者が支援することにも役立ちます。つまり、訪問者はいつもカーソルがどのフィールドにあるかをすぐに見ることができます。
この後、複数行のテキスト入力フィールドに関するいくつかの情報が続きます。
textarea {
width: 430px;
overflow: auto;
}
このフィールドの幅は430ピクセルに設定されます。複数行の入力フィールドに関連付けられているoverflow: autoという指示は、最初の見た目では少し奇妙に見えるかもしれません。この行は、古いバージョンのInternet Explorerによるものです。実際、このブラウザは、本来必要ないにもかかわらず、複数行の入力フィールドでもスクロールバーを表示しています。 overflow: auto によって、この見栄えの問題を回避できます。
送信ボタンをデザインする
現在、送信ボタンはまだかなり地味です。これは今後変わります。結果は次のようになります:
ボタンにはさまざまなプロパティが割り当てられます。
• 背景色
• フォントの外観
• 枠線
• 余白
対応するCSS構文は次のようになります:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}
ここで注目すべきは、input[type="submit"]という指定です。このセレクタは、type="submit"属性値の組み合わせを持つ input 要素にアクセスします。
