このシリーズの最初の記事では、簡単なフォームの設計、HTML フォームコントロールとその他の HTML 要素を使用した正しい実装、CSS によるとても簡単なスタイル付け、データをサーバーに送る方法を含めた、ウェブフォームを作成する本当に初歩的な経験をします。サブトピックは、モジュールの後で詳しく展開していきます。
| 前提条件: | 基本的なコンピューターリテラシーと、HTML を理解するを理解していること。 |
|---|---|
| 目的: | ウェブフォームとは何か、何に使うのか、どうデザインするのか、サンプル事例に必要な基本の HTML 要素について熟知する。 |
ウェブフォームとは何か?
ウェブフォームとは、ユーザーと ウェブサイトやアプリケーションとの対話の要となるもののひとつです。フォームによって、ユーザーは ウェブサイトへデータを送ることができます。それらのデータはたいてい ウェブサーバーに送られて処理、保存されたり (モジュール後半のサーバーにデータを送るを見てください) 、クライアント側ですぐにインターフェイスを更新する(例えば、リストに他の項目を追加したり、UI の機能を表示/非表示にしたり)こともあります。
ウェブフォームは 1 つ以上のフォームコントロール(ウィジェットともいいます)と、フォーム全体を構成するのに役立つ追加要素 — よく HTML フォームと呼ばれます — とで作られます。それらのコントロールはテキストフィールド (単一行または複数行)、ドロップダウンボックス、ボタン、チェックボックスあるいはラジオボタンがあります。たいていは <input> 要素を使って作成されますが、その他の要素もあります。
フォームコントロールは、特定フォームの値が入力されるのを強制する(フォーム検証)ためにもプログラミングされ、視力のある・盲目のユーザーいずれにとっても、用途を説明するラベルと対になります。
フォームを設計する
コードを書き始める前に、そこから離れてフォームについて考える時間をとるとよいでしょう。簡単なモデルを作ると、あなたがユーザーに入力を依頼したいデータの適切なセットを定義することの助けになります。ユーザー体験 (UX) の観点では、フォームが大規模になるとユーザーが不満を持って離れるリスクが高まると覚えておくことが重要です。簡単に、かつ集中するようにしてください。本当に必要なことだけをたずねてください。
フォームの設計は、サイトやアプリケーションを構築する際の大事なステップです。フォームのユーザー体験まで扱うと本記事の対象を超えてしまいますが、そこまで踏み込みたい場合は以下の記事をご覧ください。
- Smashing Magazine にフォームの UX に関するよい記事がありますが、もっとも重要な記事は Extensive Guide To Web Form Usability でしょう。
- UXMatters もまた、複数ページのフォームといった複雑なことへの基本的なベストプラクティスから良いアドバイスを得られる、思慮深いリソースです。
本記事では、シンプルな連絡フォームを作成します。簡単に図を描いてみましょう。
このフォームには、3 つのテキストフィールドと 1 つのボタンがあります。要するに、ユーザーへ名前(Name)、メールアドレス(E-mail)、送信したいメッセージ(Message)をたずねます。ボタンを押すと、データをウェブサーバーに送信します。
HTML を書きましょう
これで、HTML に移ってフォームのコードを書く準備ができました。連絡フォームを作るために、以下の HTML 要素を使用します: <form>、<label>、<input>、<textarea>、<button> です。
前に進む前に、簡単な HTML テンプレートをローカルにコピーします — ここにフォームの HTML を入力します。
<form> 要素
すべてのフォームは、以下のように <form> 要素から始まります:
<form action="/my-handling-form-page" method="post"> </form>
これは、フォームを正式に定義します。これは <div> 要素や <p> 要素と同様にコンテナ要素ですが、フォームの動作を設定するための固有の属性もサポートします。すべての属性は省略可能ですが、少なくとも action 属性と method属性は常に設定することがベストプラクティスであると考えられます。
action属性は、フォームで収集したデータを送信すべき場所 (URL) を定義しますmethod属性は、データを送信するために使用する HTTP メソッド (getまたはpost) を定義します
注: これらの属性がどのように働くかについて、詳しくはフォームデータの送信と取得で説明しています。
今は、上の <form> 要素を HTML 本文に追加します。
<label>、<input> および <textarea> 要素でウィジェットを追加する
連絡フォームはとてもシンプルで 3 つのテキストフィールドを持っており、それぞれに 対応した <label> がついています。
- 名前の入力フィールドは、基本的な単一行のテキストフィールドです。
- メールアドレスの入力フィールドは、メールアドレスだけを受け付ける単一行のテキストフィールドです。
- メッセージの入力フィールドは、基本的な複数行のテキストフィールドです。
HTML コードで、それらは以下のようになります:
<form action="/my-handling-form-page" method="post">
<ul>
<li>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</li>
<li>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email">
</li>
<li>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</li>
</ul>
</form>
フォームのコードを上に見えるようなものに更新してください。
<li> 要素はコードを扱いやすく構造化するとともに、スタイル設定を容易にするため (後述) に置いています。すべての <label> 要素における、 for 属性の使い方に注目してください。これは、ラベルとフォームウィジェットを関連付けるための正式な方法です。この属性は、対応するウィジェットの id を参照します。
これには利点があります — フォームコントロールにラベルを関連付けて、ユーザーがマウス、トラックパッド、タッチデバイスでラベルをクリックすると対応するウィジェットがアクティブになり、スクリーンリーダーのユーザーに読み上げられるアクセシブルな名前が提供されます。この属性の利点をさらに知りたいのでしたら、こちらの記事ですべてを詳しく説明しています: HTML フォームの構築方法.
<input> 要素でもっとも重要な属性は、type 属性です。この属性は <input> 要素の見た目や動作を定義するため、とても重要です。これは要素を根本的に変えるものですから、注意してください。詳しく知りたい場合は、ネイティブフォームウィジェットの記事をご覧ください。
- 本記事の例では、最初の input に
<input/text>という値を使用しています (これは属性の既定値であり、制御や検証を行わずあらゆるテキストを受け入れる、単一行のテキストフィールドを表します) 。 - 2番目の input では、正しくフォーマットされた E メールアドレスのみを受け付ける単一行として定義された
<input/email>という値を使用しています。この値はベーシックなテキストフィールドを、ユーザーによって入力されたデータをチェックするようにする "知的な" フィールドへと変化させます。またスマートフォンのように動的なキーボードのある端末で、E メールアドレスを入力するのにふさわしいキーボードレイアウト (例えばデフォルトで @ 記号があるもの) が表示されるようにします。フォームの検証について詳しく知りたい場合は、データフォームの検証 の記事をご覧ください。
大事なことを言い忘れましたが、<input> と <textarea></textarea> の構文に注意してください。これは HTML の変わったことの 1 つです。<input> タグは空要素です。つまり、終了タグは不要です。一方 <textarea> は空の要素ではないので、適切な終了タグで閉じる必要があります。これは HTML フォームの特定の機能、つまりデフォルト値の定義方法に影響があります。<input> 要素のデフォルト値を定義するには、次のように value 属性を使う必要があります。
<input type="text" value="デフォルトではこの要素にはこの文章が挿入されます" />
また、<textarea> のデフォルト値を定義したい場合は、デフォルト値を <textarea> の開始タグと終了タグの間に書いてください。以下のとおりです：
<textarea> デフォルトではこの要素にはこの文章が挿入されます </textarea>
<button> を追加する
フォームはほぼできあがりました。あとは、ユーザーがフォームに記入したらデータを"送信"するためのボタンを追加します。これは、<button> 要素を使用して簡単にできます: 閉じタグの </ul> の直前に次の行を追加します:
<li class="button"> <button type="submit">メッセージを送信</button> </li>
<button> 要素は type 属性を受け付けます。3 種類の値を受け付けて、これは submit、reset、button です。
submitボタンをクリックするとフォームのデータを、<form>要素のaction属性で定義した ウェブページへ送信します。resetボタンをクリックすると、直ちにすべてのフォームウィジェットを既定値にリセットします。UX の観点ではこのボタンはバッドプラクティスであると考えられており、どうしても必要な理由がない限りこのボタンの使用は避けるようにします。buttonボタンをクリックすると...何もしません! おかしなことのように見えますが、JavaScript を使用してカスタムボタンを作成するために驚くほど役立ちます。
メモ: <input> 要素で対応する type を指定して、ボタンを作成することもできます。例えば <input type="submit"> のように。<button> 要素との大きな違いは、<input> 要素ではラベルとしてプレーンテキストしか許容しませんが、<button> 要素ではすべての HTML コンテンツを使用して、もっと複雑でクリエイティブなボタンコンテンツを作成できます。
CSS でフォームを少し見栄えよくしましょう
フォームのHTMLコードの記述ができました。このフォームをお気に入りのブラウザーで見ると、見栄えがよくないでしょう。
メモ: あなたの HTML コードが正しくないと考える場合、完成例と比較してみてください — first-form.html にあります (ライブ版も見てください)。
フォームを素敵にスタイル付けるのはトリッキーです。それはこの記事でフォームスタイリングについて教える範囲を超えています。なので当面はまずまずの見ばえとなる CSS を追加するだけにしましょう。
最初に、ページの HTML の head 内に <style> 要素を追加します。次のようになります:
<style> </style>
style タグの中に、次の CSS を追加します:
form {
/* フォームをページの中央に置く */
margin: 0 auto;
width: 500px;
/* フォームの範囲がわかるようにする */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
form li + li {
margin-top: 1em;
}
label {
/* すべてのラベルを同じサイズにして、きちんと揃える */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* すべてのテキストフィールドのフォント設定を一致させる
デフォルトで、textarea は等幅フォントが設定されている */
font: 1em sans-serif;
/* すべてのテキストフィールドを同じサイズにする */
width: 300px;
box-sizing: border-box;
/* テキストフィールドのボーダーの外見を同一にする */
border: 1px solid #999;
}
input:focus,
textarea:focus {
/* アクティブな要素を少し強調する */
border-color: #000;
}
textarea {
/* 複数行のテキストフィールドをラベルにきちんと揃える */
vertical-align: top;
/* テキスト入力に十分な領域を与える */
height: 5em;
}
.button {
/* ボタンを他のテキストフィールドと同じ場所に置く */
padding-left: 90px; /* label 要素と同じサイズ */
}
button {
/* このマージンは、ラベルとテキストフィールドの間のスペースと
おおよそ同じスペースを表す */
margin-left: .5em;
}
保存して再読み込みすると、フォームがよりきれいになりました。
メモ: Github の first-form-styled.html にあります(ライブ版も見てください)。
データをウェブサーバーに送信する
最後の、またもっともややこしいであろう部分が、サーバー側でのフォームデータの扱いです。<form> 要素は action 属性と method 属性により、どこへどのようにデータを送信するかを定義できます。
フォームコントロールに name をつけます。これらの名前はクライアント側とサーバー側の両側で重要です。ブラウザー側ではそれぞれのデータにどのような名前をつけるかを示すものであり、サーバー側では名前によってそれぞれのデータを扱うことができます。フォームデータは名前/値のペアとしてサーバーに送信されます。
データに名前をつけるために、各々のデータを集めるフォームウィジェットの name 属性を使用しなければなりません。ここでもフォームのコードで見てみましょう:
<form action="/my-handling-form-page" method="post">
<ul>
<li>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</li>
<li>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email" />
</li>
<li>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</li>
...
この例では、フォームはそれぞれ "user_name"、"user_email"、"user_message" と名付けられた 3 つのデータを送信します。これらのデータは URL "/my-handling-form-page" へ、HTTP POST メソッドで送信します。
サーバー側では URL "/my-handling-form-page" のスクリプトが、HTTP リクエストに埋め込まれた 3 つのキーおよび値のアイテムリストとしてデータを受け取ります。スクリプトがデータを処理する方法は、あなた次第です。各サーバーサイド言語 (PHP、Python、Ruby、Java、C# など) は、これらのデータを扱う仕組みを持っています。これは本ガイドで踏み込んでいく範囲を超えますが、詳しく知りたい場合はフォームデータの送信と取得の記事にサンプルを載せていますのでご覧ください。
まとめ
おめでとうございます! 初めてのウェブフォームが完成しました。こちらが最終結果のデモです。
これはほんの開始点です、しかし — さて、より深く見ていくときが来ました。ウェブフォームはここで見てきたものよりさらに強力であり、ガイドの他の記事で残りの部分を習得できます。
このモジュール
- 初めてのフォーム
- フォームの構築方法
- ネイティブフォームウィジェット
- The HTML5 input types
- Other form controls
- フォームへのスタイル設定
- フォームへの高度なスタイル設定
- UI pseudo-classes
- フォームデータの検証
- フォームデータの送信