フォーム設計の例

このページでは、このページのソースを表示したものを見て、実際のフォームの作り方を理解すること。

テキトーに作った例

適当にコントロールを並べれば、一応、フォームは完成するが、見やすい、使いやすいと言えるかどうか？なお、ここでは、getメソッドを使ってデータの送信を行っており、入力されたフォームデータは、送信後のURLにすべて含まれた形で見ることができる。

table を使用して、コントロールの位置をうまく揃えて並べれば、一般的には、見やすく、使いやすいフォームになる。ここに示したフォーム設計のポイントは、

tableタグの属性を、cellspacing=10 とし、項目間の距離を少し離して見やすくしている
表のデザインを分かりやすくするため、border=1にしているが、実際には、 border=0 として、表の枠線を表示させない方がよい
ドキュメントレベルのスタイルとして、
```
  TH { text-align: right }
  TD { text-align: left }
  .c { text-align: center }
```
を使用して、項目名は右寄せ、コントロール部は左寄せ、必要な部分は中央揃えにして位置を揃えている
「送信」ボタンと、「回答をクリアする」ボタンは画面上の距離が離れるようにデザインされており、押し間違いによる誤送信や、せっかく入力したデータをリセットしてしまう危険性を少なくしている。

なお、ここでは、postメソッドを使ってデータの送信を行っており、入力されたフォームデータは、送信後のURLには含まれない。