【Chapter4】テーブルとフォーム

概要と目標カレンダーなどに利用する表や、
入力フォームに必要な要素を学ぶ。

カレンダーや時間割などで利用する表（テーブル）と、
お問い合わせフォームなどに利用するフォームの要素を学習しましょう。

今回のゴール

RERUN

表（テーブル）テーブルは、ちょっとややこしい。

HTMLでカレンダーや、〇〇表を作るにはtable 要素を使う。
表組み（テーブル）は今まで紹介してきた要素と比べると、少々難しい。

基本的な表組の要素
要素名	意味・役割	カテゴリ	コンテンツ・モデル
`table`	表を表す	フロー・コンテンツ	以下の順番で配置（授業で紹介しない要素は除く）任意で1つの`thead` 要素それに続く１つの`tbody` 要素または、1つ以上の`tr` 要素それに続く任意で１つの`tfoot` 要素
`tr`	table（テーブル） row（ロウ）の略で、表の行を表す	なし	0個以上の`th` 要素、または`td` 要素
`th`	table（テーブル） header（ヘッダー） cell（セル）の略で、表の見出しセルを表す	なし	フレージング・コンテンツ
`td`	table（テーブル） data（データ） cell（セル）の略で、表の内容セルを表す	なし	フロー・コンテンツ

基本的な表を作成してみよう。

テーブルは、table 要素で、全体を囲み、その中にtr 要素で行を作る。
tr 要素の中に、必要な分th 要素か、td 要素でセルを作る。
なお、table 要素に、border 属性を使用し、属性値に空の文字列か "1" を指定することで、
表に境界線を表示すると同時に、この表がレイアウト（デザイン）目的ではないことを表せる。

`table` 要素の主な固有属性
属性名	役割	属性値
`border`	この表がレイアウト目的ではないことを表す属性 HTML5 改	空の文字列か "1"

基本的な表の使い方

<table border="1">
  <tr>
    <th>見出しセル</th>
    <th>見出しセル</th>
    <th>見出しセル</th>
  </tr>
  <tr>
    <td>内容セル</td>
    <td>内容セル</td>
    <td>内容セル</td>
  </tr>
  <tr>
    <td>内容セル</td>
    <td>内容セル</td>
    <td>内容セル</td>
  </tr>
</table>

「html-lessons」 › 「chapter04」 › 「table」フォルダ内にある「index.html」をテキストエディタで開く

h1要素の下に、以下のHTMLタグ一覧表を作成

要素名	意味・役割	カテゴリー
`p`	段落を表す	フロー・コンテンツ
`h1` 〜 `h6`	見出しを表す	フロー・コンテンツ
`br`	改行を表す	フロー・コンテンツフレージング・コンテンツ

chapter04/table/index.html

<table border="1">
  <tr>
    <th>要素名</th>
    <th>意味・役割</th>
    <th>カテゴリー</th>
  </tr>
  <tr>
    <td>p</td>
    <td>段落を表す</td>
    <td>フロー・コンテンツ</td>
  </tr>
  <tr>
    <td>h1 〜 h6</td>
    <td>見出しを表す</td>
    <td>フロー・コンテンツ</td>
  </tr>
  <tr>
    <td>br</td>
    <td>改行を表す</td>
    <td>
      <ul>
        <li>フロー・コンテンツ</li>
        <li>フレージング・コンテンツ</li>
      </ul>
    </td>
  </tr>
</table>

上書き保存
「html-lessons」 › 「chapter04」 › 「table」フォルダ内の「index.html」をダブルクリック。
テーブルが出来ているかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

行のグループ化テーブルのヘッダ、ボディ、フッタを
明示的に表してみよう。

一般的な表（テーブル）は、一番上の行が全て見出しになることが多い。
通常このような表をプリンターで印刷する場合で、それが複数ページにわたる際は、
全てのページに見出しの行を印刷することが一般的。
その場合は、どこが見出しの行で、どこが内容部分かを明示的に表すことで、
プリンターの印刷をサポートできる。

行をグループ化する要素
要素名	意味・役割	カテゴリ	コンテンツ・モデル
`thead`	table（テーブル） header（ヘッダー）の略で、その行が見出し行であることを表す	なし	0個以上の`tr` 要素
`tbody`	table（テーブル） body（ボディ）の略で、その行が内容部分の行であることを表す	なし	0個以上の`tr` 要素
`tfoot`	table（テーブル） footer（フッター）の略で、その行がフッタ部分の行であることを表す	なし	0個以上の`tr` 要素

行をグループ化してみよう。

行をグループ化する要素の使い方

<table border="1">
  <thead>
   <tr>
     <th>見出しセル</th>
     <th>見出しセル</th>
     <th>見出しセル</th>
   </tr>
  </thead>
  <tbody>
   <tr>
     <td>内容セル</td>
     <td>内容セル</td>
     <td>内容セル</td>
   </tr>
  </tbody>
  <tfoot>
   <tr>
     <td>内容セル</td>
     <td>内容セル</td>
     <td>内容セル</td>
   </tr>
  </tfoot>
</table>

「html-lessons」 › 「chapter04」 › 「table」フォルダ内にある「index.html」をテキストエディタで開く
行をグループ化する要素を追加

chapter04/table/index.html

<table border="1">
  <thead>
    <tr>
      <th>要素名</th>
      <th>意味・役割</th>
      <th>カテゴリー</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>p</td>
      <td>段落を表す</td>
      <td>フロー・コンテンツ</td>
    </tr>
    <tr>
      <td>h1 〜 h6</td>
      <td>見出しを表す</td>
      <td>フロー・コンテンツ</td>
    </tr>
    <tr>
      <td>br</td>
      <td>改行を表す</td>
      <td>
        <ul>
          <li>フロー・コンテンツ</li>
          <li>フレージング・コンテンツ</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

上書き保存
「html-lessons」 › 「chapter04」 › 「table」フォルダ内の「index.html」をダブルクリック。
テーブルがきちんと表示されているかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

フォームフォームは、様々な要素から成り立つ。
まずは、全体を`form`要素で包む。

HTMLは、ユーザーが入力したテキストや選択した項目を送信することが出来る。（情報を受け取ることが出来ない）
フォームの各部品は、全て<form> 〜 </form> の中に配置することが基本となる。
なお、form 要素には、action 属性で、データの送信先を指定する。

フォームの要素
要素名	意味・役割	カテゴリ	コンテンツ・モデル
`form`	interactive（インタラクティブ） form（フォーム）の略で、フォームを表す	フロー・コンテンツ	フロー・コンテンツ（ただし、別の`form`　要素は配置できない）

`form`要素を使ってみよう。

`form` 要素の主な固有属性
属性名	役割	属性値
`action`	送信先を指定する属性 HTML5 改	送信先（値を空に場合や、属性を省略した場合は、自身に送信する）
`method`	送信方法を指定する属性	`"get"` : URLの後ろにデータを付けて送信する方法（初期値） `"post"` : HTTPリクエストのボディ部分にデータを付けて送信する方法
`enctype`	データの形式を指定する属性	`"application/x-www-form-urlencoded"` : 基本の形式（初期値） `"multipart/form-data"` : 添付ファイル送信用の形式 `"text/plain"` : 変換されない

基本的なform要素の使い方

<form action="データの送信先" method="post または　get">
  ・・・
</form>

「html-lessons」 › 「chapter04」 › 「form」フォルダ内の「index.html」をテキストエディタで開く
フォームになる箇所をform要素で囲む

chapter04/form/index.html

<form action="conf.php" method="post">
  <dl>
    <dt>お名前</dt>
    <dd>

    </dd>
    <dt>メールアドレス</dt>
    <dd>

    </dd>
    <dt>性別</dt>
    <dd>

    </dd>
    <dt>希望する職種</dt>
    <dd>

    </dd>
    <dt>出来ること（複数選択可）</dt>
    <dd>

    </dd>
    <dt>メッセージ</dt>
    <dd>

    </dd>
  </dl>
  <p>送信する</p>
</form>

上書き保存

コントロール部品コントロール部品は、
`input`要素で生成する。

ユーザーがテキストを入力するフィールドや、項目を選択する部品、送信ボタンなどは、
このinput要素で生成する。どの部品にするかは、type 属性で指定する。

コントロール部品の要素
要素名	意味・役割	カテゴリ	コンテンツ・モデル
`input`	フォームの部品を表す	フロー・コンテンツフレージング・コンテンツインタラクティブ・コンテンツ（`type` 属性が "`hidden`"以外の場合）	なし（空要素）

`input`要素を使ってみよう。

`input` 要素の主な固有属性
属性名	役割	属性値
`type`	部品の種類を指定する	`"text"` : 1行分のテキストフィールド `"password"` : パスワードフィールド `"email"` : メールアドレスフィールド HTML5 新 `"url"` : URLフィールド HTML5 新 `"radio"` : ラジオボタン `"checkbox"` : チェックボックス `"file"` : ファイル送信用ボタン `"submit"` : 送信用ボタン `"reset"` : リセットボタンなど
`name`	部品の名前を指定する	任意の文字列
`value`	入力フィールドの場合・・・「初期値」選択系部品・・・「送信する値」ボタン・・・「ボタンの文字」	任意の文字列
`checked`	予め選択状態にする（選択系部品のみ）	`checked` : 予め選択状態

input要素の基本的な使い方

<input type="部品の種類" name="部品の名前" value="初期値 / 送信される値 / ボタンの文字>

「html-lessons」 › 「chapter04」 › 「form」フォルダ内の「index.html」をテキストエディタで開く
input要素で部品を生成

chapter04/form/index.html

<form action="conf.php" method="post">
  <dl>
    <dt>お名前</dt>
    <dd>
      <input type="text" name="your_name">
    </dd>
    <dt>メールアドレス</dt>
    <dd>
      <input type="email" name="your_mail">
    </dd>
    <dt>性別</dt>
    <dd>
      <ul>
        <li><input type="radio" name="gender" value="男">男性</li>
        <li><input type="radio" name="gender" value="女">女性</li>
      </ul>
    </dd>
    <dt>希望する職種</dt>
    <dd>

    </dd>
    <dt>出来ること（複数選択可）</dt>
    <dd>
      <ul>
        <li><input type="checkbox" name="skill" value="HTML">HTML</li>
        <li><input type="checkbox" name="skill" value="CSS">CSS</li>
        <li><input type="checkbox" name="skill" value="JavaScript">JavaScript</li>
        <li><input type="checkbox" name="skill" value="PHP">PHP</li>
        <li><input type="checkbox" name="skill" value="SQL">SQL</li>
        <li><input type="checkbox" name="skill" value="Photoshop">Photoshop</li>
        <li><input type="checkbox" name="skill" value="Illustrator">Illustrator</li>
      </ul>
    </dd>
    <dt>メッセージ</dt>
    <dd>

    </dd>
  </dl>
  <p><input type="submit" value="送信する"></p>
</form>

上書き保存
「html-lessons」 › 「chapter04」 › 「form」フォルダ内の「index.html」をダブルクリック。
コントロール部品がきちんと表示されているかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

テキストエリア複数行入力できるフィールドは、
`textarea`要素。

input要素のテキストフィールドは全て1行分の入力フィールド。
複数行入力するにはtextarea要素を使う。

テキストエリアの要素
要素名	意味・役割	カテゴリ	コンテンツ・モデル
`textarea`	複数行の入力フィールドを表す	フロー・コンテンツフレージング・コンテンツインタラクティブ・コンテンツ	テキストのみ

`textarea`要素を使ってみよう。

`textarea` 要素の主な固有属性
属性名	役割	属性値
`name`	テキストエリアの名前を指定する	任意の文字列
`cols`	テキストエリアの1行あたりに表示する文字数を半角で指定する属性	数値（初期値：20）
`rows`	テキストエリアに表示する行数を指定する属性	数値（初期値：2）

textarea要素の使い方

<textarea name="テキストエリアの名前" cols="1行あたりの文字数 rows="表示する行数"></textarea>

要素内に文字を入力すると初期値になる

「html-lessons」 › 「chapter04」 › 「form」フォルダ内の「index.html」をテキストエディタで開く
メッセージの部分にtextarea要素でフィールドを生成

chapter04/form/index.html

<form action="conf.php" method="post">
  <dl>
    <dt>お名前</dt>
    <dd>
      <input type="text" name="your_name">
    </dd>
    <dt>メールアドレス</dt>
    <dd>
      <input type="email" name="your_mail">
    </dd>
    <dt>性別</dt>
    <dd>
      <ul>
        <li><input type="radio" name="gender" value="男">男性</li>
        <li><input type="radio" name="gender" value="女">女性</li>
      </ul>
    </dd>
    <dt>希望する職種</dt>
    <dd>

    </dd>
    <dt>出来ること（複数選択可）</dt>
    <dd>
      <ul>
        <li><input type="checkbox" name="skill" value="HTML">HTML</li>
        <li><input type="checkbox" name="skill" value="CSS">CSS</li>
        <li><input type="checkbox" name="skill" value="JavaScript">JavaScript</li>
        <li><input type="checkbox" name="skill" value="PHP">PHP</li>
        <li><input type="checkbox" name="skill" value="SQL">SQL</li>
        <li><input type="checkbox" name="skill" value="Photoshop">Photoshop</li>
        <li><input type="checkbox" name="skill" value="Illustrator">Illustrator</li>
      </ul>
    </dd>
    <dt>メッセージ</dt>
    <dd>
      <textarea name="message" cols="40" rows="8"></textarea>
    </dd>
  </dl>
  <p><input type="submit" value="送信する"></p>
</form>

上書き保存
「html-lessons」 › 「chapter04」 › 「form」フォルダ内の「index.html」をダブルクリック。
テキストエリアがきちんと表示されているかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

セレクトボックスプルダウンメニューから
選択することも出来る。

都道府県の選択など、大量の選択肢の中から項目を選択する際、
ラジオボタンやチェックボックスでは、無駄にスペースを使ってしまう。
このような場合は、セレクトボックスを使うと便利。
セレクトボックスは、select要素内に、option要素を使って選択肢を生成する。

セレクトボックスの要素
要素名	意味・役割	カテゴリ	コンテンツ・モデル
`select`	セレクトボックスを表す	フロー・コンテンツフレージング・コンテンツインタラクティブ・コンテンツ	0個以上の`option`要素、または`optgroup`要素
`option`	セレクトボックスの選択肢であることを表す	なし	`label`属性と、`value`属性が指定されている場合は「空」 `label`属性はあるが、`value`属性がない場合は「テキスト」 `label`属性がない場合は「空白ではないテキスト」

セレクトボックスを使ってみよう。

`select` 要素の主な固有属性
属性名	役割	属性値
`name`	セレクトボックスの名前を指定する	任意の文字列
`size`	１度に見れる項目の数を指定する（リストボックスになる）	数値
`multiple`	複数の項目を選択できるようにする	`"multiple"` : 複数選択を可能にする

`option` 要素の主な固有属性
属性名	役割	属性値
`label`	選択肢のラベルを指定する	任意の文字列
`value`	送信する値を指定する	任意の文字列
`selected`	予め選択状態にする	`"selected"` : 予め選択状態

セレクトボックスの使い方

<select name="セレクトボックスの名前">
  <option value="送信する値1">選択肢のラベル1</option>
  <option value="送信する値2">選択肢のラベル2</option>
  <option value="送信する値3">選択肢のラベル3</option>
</select>

「html-lessons」 › 「chapter04」 › 「form」フォルダ内の「index.html」をテキストエディタで開く
「希望する職種」の部分にセレクトボックスを生成

chapter04/form/index.html

<form action="conf.php" method="post">
  <dl>
    <dt>お名前</dt>
    <dd>
      <input type="text" name="your_name">
    </dd>
    <dt>メールアドレス</dt>
    <dd>
      <input type="email" name="your_mail">
    </dd>
    <dt>性別</dt>
    <dd>
      <ul>
        <li><input type="radio" name="gender" value="男">男性</li>
        <li><input type="radio" name="gender" value="女">女性</li>
      </ul>
    </dd>
    <dt>希望する職種</dt>
    <dd>
      <select name="job">
        <option value="Webディレクター">Webディレクター</option>
        <option value="Webデザイナー">Webデザイナー</option>
        <option value="Webプログラマー">Webプログラマー</option>
        <option value="フロントエンド・エンジニア">フロントエンド・エンジニア</option>
      </select>
    </dd>
    <dt>出来ること（複数選択可）</dt>
    <dd>
      <ul>
        <li><input type="checkbox" name="skill" value="HTML">HTML</li>
        <li><input type="checkbox" name="skill" value="CSS">CSS</li>
        <li><input type="checkbox" name="skill" value="JavaScript">JavaScript</li>
        <li><input type="checkbox" name="skill" value="PHP">PHP</li>
        <li><input type="checkbox" name="skill" value="SQL">SQL</li>
        <li><input type="checkbox" name="skill" value="Photoshop">Photoshop</li>
        <li><input type="checkbox" name="skill" value="Illustrator">Illustrator</li>
      </ul>
    </dd>
    <dt>メッセージ</dt>
    <dd>
      <textarea name="message" cols="40" rows="8"></textarea>
    </dd>
  </dl>
  <p><input type="submit" value="送信する"></p>
</form>

上書き保存
「html-lessons」 › 「chapter04」 › 「form」フォルダ内の「index.html」をダブルクリック。
セレクトボックスがきちんと表示されているかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

ラベルラベルと部品を関連付けよう。

一般的なフォームは、ユーザーが何を入力（または、選択）すればいいのかを表すラベルと、
実際に入力（または、選択）するコントロール部品がある。
これらを関連付けることで、視覚的にWebサイトを閲覧することが困難なユーザーに対しても、
どのラベルに対してのコントロール部品かを伝えるサポートができる。
また、ラベルをクリックすることで、コントロール部品を選択状態にすることも可能になる。

フォームのラベルと部品を関連付ける要素
要素名	意味・役割	カテゴリ	コンテンツ・モデル
`label`	form（フォーム） field（フィールド） label（ラベル） text（テキスト）の略で、コントロール部品のラベルを表す	フロー・コンテンツフレージング・コンテンツインタラクティブ・コンテンツ	フレージング・コンテンツ（ただし、別`label`要素は配置できない）

`label`要素を使ってみる。

`label` 要素の主な固有属性
属性名	役割	属性値
`for`	関連付けるコントロール部品を指定する属性	関連付けるコントロール部品の `id` 名を指定する

label要素にラベルと、コントロール部品を挟む使い方

<label>
  ラベル <input type="部品の種類" name="部品の名前" value="初期値 / 送信する値">
</label>

※ 他のコントロール部品でも可

label要素にfor属性で関連付ける使い方

<label for="関連付けるコントロール部品のid名">ラベル</label>
<input type="部品の種類" id="id名" name="部品の名前" value="初期値 / 送信する値">

※ 他のコントロール部品でも可

「html-lessons」 › 「chapter04」 › 「form」フォルダ内の「index.html」をテキストエディタで開く
各ラベルとコントロール部品を関連付ける

chapter04/form/index.html

<form action="conf.php" method="post">
  <dl>
    <dt><label for="your_name">お名前</label></dt>
    <dd>
      <input type="text" id="your_name" name="your_name">
    </dd>
    <dt><label for="your_mail">メールアドレス</label></dt>
    <dd>
      <input type="email" id="your_mail" name="your_mail">
    </dd>
    <dt>性別</dt>
    <dd>
      <ul>
        <li><label><input type="radio" name="gender" value="男">男性</label></li>
        <li><label><input type="radio" name="gender" value="女">女性</label></li>
      </ul>
    </dd>
    <dt><label for="job">希望する職種</label></dt>
    <dd>
      <select id="job" name="job">
        <option value="Webディレクター">Webディレクター</option>
        <option value="Webデザイナー">Webデザイナー</option>
        <option value="Webプログラマー">Webプログラマー</option>
        <option value="フロントエンド・エンジニア">フロントエンド・エンジニア</option>
      </select>
    </dd>
    <dt>出来ること（複数選択可）</dt>
    <dd>
      <ul>
        <li><label><input type="checkbox" name="skill" value="HTML">HTML</label></li>
        <li><label><input type="checkbox" name="skill" value="CSS">CSS</label></li>
        <li><label><input type="checkbox" name="skill" value="JavaScript">JavaScript</label></li>
        <li><label><input type="checkbox" name="skill" value="PHP">PHP</label></li>
        <li><label><input type="checkbox" name="skill" value="SQL">SQL</label></li>
        <li><label><input type="checkbox" name="skill" value="Photoshop">Photoshop</label></li>
        <li><label><input type="checkbox" name="skill" value="Illustrator">Illustrator</label></li>
      </ul>
    </dd>
    <dt><label for="message">メッセージ</label></dt>
    <dd>
      <textarea id="message" name="message" cols="40" rows="8"></textarea>
    </dd>
  </dl>
  <p><input type="submit" value="送信する"></p>
</form>

上書き保存
「html-lessons」 › 「chapter04」 › 「form」フォルダ内の「index.html」をダブルクリック。
ラベルをクリックした時、コントロール部品にフォーカスされるかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題今回の理解度をチェック。

「chapter04」 › 「training」フォルダ内に「index.html」を作成し、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

「chapter04」 › 「training」フォルダ内に新規ファイルを作成して下さい。
- ファイル名： index.html
HTMLの全体構造の要素を記述して下さい。
- HTMLのバージョン： HTML 5
- 文字コード： UTF-8
- タイトルの文字列： "商品のご購入"
body要素内に下記の文字列を、大見出しとしてマークアップして下さい。
- 文字列： "商品のご購入"
上記の大見出しの下に、下記の2つの中見出しを記述して下さい。
- 文字列： "料金表"
- 文字列： "注文フォーム"

見出し「料金表」の下に下記のテーブルを作成して下さい。
なお、テーブルは、レイアウト目的でないことを表し、各行はグループ化する。

商品ID	商品名	金額
D001	えんぴつ	50円
D002	ものさし	80円
D003	のり	100円

見出し「注文フォーム」の下に下記のフォームを作成して下さい。
- 送信先： "conf.php"
- 送信方法： "post"

フォーム内に下記のコントロール部品を作成して下さい。
なお、コントロール部品は、ラベルをクリックしてもフォーカスされるようにする。

項目	ラベル	コントロール部品
お名前	お名前	１行分のテキストフィールド
メールアドレス	メールアドレス	メールアドレスフィールド
ご注文商品	えんぴつ	チェックボックス（送信する値： "D001"）
	ものさし	チェックボックス（送信する値： "D002"）
	のり	チェックボックス（送信する値： "D003"）
メッセージ	メッセージ	テキストエリア（表示する文字数や行数は任意）

フォーム内に送信ボタンを作成して下さい。
- ボタンの文字： "注文"

解答例

chapter04/training/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>商品のご購入</title>
</head>
<body>
  <h1>商品のご購入</h1>
  <h2>料金表</h2>
  <table border="1">
    <thead>
      <tr>
        <th>商品ID</th>
        <th>商品名</th>
        <th>金額</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>D001</td>
        <td>えんぴつ</td>
        <td>50円</td>
      </tr>
      <tr>
        <td>D002</td>
        <td>ものさし</td>
        <td>80円</td>
      </tr>
      <tr>
        <td>D003</td>
        <td>のり</td>
        <td>100円</td>
      </tr>
    </tbody>
  </table>

  <h2>注文フォーム</h2>
  <form action="conf.php" method="post">
    <dl>
      <dt><label for="your_name">お名前</label></dt>
      <dd>
        <input type="text" id="your_name" name="your_name">
      </dd>
      <dt><label for="your_mail">メールアドレス</label></dt>
      <dd>
        <input type="email" id="your_mail" name="your_mail">
      </dd>
      <dt>ご注文商品</dt>
      <dd>
        <ul>
          <li><label><input type="checkbox" name="item" value="D001">えんぴつ</label></li>
          <li><label><input type="checkbox" name="item" value="D002">ものさし</label></li>
          <li><label><input type="checkbox" name="item" value="D003">のり</label></li>
        </ul>
      </dd>
      <dt><label for="message">メッセージ</label></dt>
      <dd>
        <textarea id="message" name="message" rows="4" cols="40"></textarea>
      </dd>
    </dl>
    <p><input type="submit" value="注文"></p>
  </form>

</body>
</html>

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ表はフォームは、ややこしい。

HTMLで表や、フォームを作成する場合は、様々な要素を使う必要がある。

テーブルは、レイアウト目的では使わない
フォームの部品は、form 要素内に配置する
フォームの送信先はaction属性で指定する

Chapter04 テーブルとフォーム

基本的な表を作成してみよう。

行をグループ化してみよう。

form要素を使ってみよう。

input要素を使ってみよう。

textarea要素を使ってみよう。

セレクトボックスを使ってみよう。

label要素を使ってみる。

`form`要素を使ってみよう。

`input`要素を使ってみよう。

`textarea`要素を使ってみよう。

`label`要素を使ってみる。