20: HTML forms --- the basics

OperaWSC HTML

あまりに長いので最終形態以外のコードは削除することにした。
http://dev.opera.com/articles/view/20-html-forms-the-basics/

Step one: The basic code

簡単なコメントフォームから

<form> と </form> があって、その間にいろいろと。

  • form element: フォームは全てこの中へ。attributes はいくつかあるがまた後で。form elements をネストすることはできない。
  • input: 情報を入力する場所。
    • type attribute: 必須。どんな情報を入力するのか指定する: text, button, checkbox, file, hidden, image, password, radio, reset, submit
    • name attribute: 必須（value attribute が常に type attribute と同じになる場合、つまり type="submit" や "reset"、を除く）。内容（名前）は自由。フォームが送信されたときに、この入力欄のデータがなんなのか名前を付ける。意味のあるわかりやすい名前を付けよう。
    • value attribute: 必須ではないがあった方がいい。空（""）にしておくとユーザが入力したモノをそのまま送信する。type が checkbox, radio button, hidden, sumbit などの input element では、デフォルトの値として指定できる。
      • コードが `<input type="text" name="first-name" id="first-name" value="" />` で、ユーザが "Jenifer" と入力した場合、first-name の値は "Jenifer" として送信される。
      • コードが `<input type="checkbox" name="mailing-list" id="mailing-list" value="no" />` で、ユーザがメーリングリストに参加するを選択すると、mailing-list の値は "yes" として送信される。
  • textarea element: 複数行のテキスト入力欄を作る。
    • rows, cols attributes: 必須。テキスト入力欄の大きさ（行数と列数）を文字数で指定する。
  • value="submit" の input element: 一行のテキスト入力欄ではなく送信ボタンを作る。このボタンが押されるとフォームのデータが送信される。

Step two: Adding structure and behavior

前のフォームは何も起きないし、全部が1行に突っ込まれてた。それはちゃんと構造を決めてないから。

form element に追加された attributes

  • id
  • method: どの方法でデータをサーバに送信するか。よく使われるのは "GET" と "POST"
  • action: どこにデータを送るか。サーバサイド・スクリプトは out of scope。

追加された "hidden" input element はリダイレクト。このフォームが送信された後、ユーザはここで指定した URL にリダイレクトされる。

フォームの見た目をよくするために（な、なんだっｔ）、フォーム内の elements を番号無しリストに入れた。これできれいに並べて、CSS でもっとキレイにすることができる。番号無しリストではなく定義リストを使うべきだという人や、リストなど使わずに label element と input element に CSS でスタイルを指定するべきだという人もいるが、この議論については自分で調べてどうするのが意味として正しいのか自分で決めて欲しい。ここでは番号無しリストを使うことにする。

フォーム内の elements にラベルを付けた。意味としても、いろいろなデバイスで使えるようにという面でも。input や textarea といった element の id attributes と同じ値を for attribute として持つことで、それらと関連づけられる。見た目にわかりやすくなるだけでなく、意味的にもわかりやすくなっている。
id attribute と name attribute がダブってるように見えるが、name attribute が無いとサーバに送信されないのでこれは必要であり、id attribute は label を関連づけるのに必要。つまり常に両方が必要。

Step three: Adding semantics, style and a bit more structure

<form id="contact-form" action="script.php" method="post">
   <fieldset>
      <legend>Contact Us:</legend>
      <ul>
         <li>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" value="" />
         </li>
         <li>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" value="" />
         </li>
         <li>
            <label for="comments">Comments:</label>
            <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
         </li>
         <li>
            <label for="mailing-list">
               Would you like to sign up for our mailing list?
            </label>
            <input type="checkbox" checked="checked" id="mailing-list"
                   value="Yes, sign me up!" />
         </li>
         <li>
            <input type="submit" value="submit" />
            <input type="reset" value="reset" />
         </li>
      </ul>
   </fieldset>
</form>

追加されたのは fieldset element と legend element。これらは必須ではないが、複雑なフォームでは便利だし、見た目にもいい。
fieldset element で各フォームを意味的にグループ分けすることができる。もっと複雑なフォームでは複数の fieldset elements を使うこともできる。legend element で fieldset element に名前を付ける。

CSS について: 略

Summary

ここでは3ステップで標準に従ったフォームを作った。

  • form element 内に input, textarea elements
  • form element の actio, method attributes と、リストによる構造化
  • fieldset element でグループ分け、legend element で名前を

ここでカバーしきれなかったものもたくさんある。

Further reading

パス

Exercise questions

略