『Web標準の教科書』各章

第6章第13節（p.444-453）

<form action="/cgi-bin/inquiry.cgi" method="post">
  <p>
    <label for="name">お名前</label><br />
    <input type="text" size="50" name="name" id="name" value="" />
  </p>
  <p>
    <label for="email">E-mail</label><br />
    <input type="text" size="50" name="email" id="email" value="" />
  </p>
  <p>
    <label for="uri">URI</label><br />
    <input type="text" size="50" name="uri" id="uri" value="http://" />
  </p>
  <p>
    <label for="comment">コメント</label><br />
    <textarea name="comment" id="comment" rows="7" cols="50">
    ご意見やご質問を入力してください。</textarea>
  </p>
  <p>
    <input type="submit" name="submit" id="submit" value="送信" />
  </p>
</form>

<form action="/cgi-bin/inquiry.cgi" method="post">
  <dl>
    <dt><label for="name">お名前</label></dt>
    <dd><input type="text" size="50" name="name" id="name"
    value="" /></dd>
    <dt><label for="email">E-mail</label></dt>
    <dd><input type="text" size="50" name="email" id="email"
    value="" /></dd>
    <dt><label for="uri">URI</label></dt>
    <dd><input type="text" size="50" name="uri" id="uri"
    value="http://" /></dd>
    <dt><label for="comment">コメント</label></dt>
    <dd><textarea name="comment" id="comment" rows="7"
    cols="50">ご意見やご質問を入力してください。</textarea></dd>
    <dd><input type="submit" name="submit" id="submit"
    value="送信" /></dd>
  </dl>
</form>

dt {
  padding-left: 8px;
  border-left: 8px solid #9cc;
  }
dd { margin: 5px 0 10px; }
：
：

.broad { width: 80%; }
：
：
<form action="/cgi-bin/inquiry.cgi" method="post">
  <dl>
    <dt><label for="name">お名前</label></dt>
    <dd><input class="broad" type="text" size="50"
    name="name" id="name" value="" /></dd>
    <dt><label for="email">E-mail</label></dt>
    <dd><input class="broad" type="text" size="50"
    name="email" id="email" value="" /></dd>
    <dt><label for="uri">URI</label></dt>
    <dd><input class="broad" type="text" size="50"
    name="uri" id="uri" value="http://" /></dd>
    <dt><label for="comment">コメント</label></dt>
    <dd><textarea class="broad" name="comment" id="comment"
    rows="7" cols="50">ご意見やご質問を入力してください。
    </textarea></dd>
    <dd><input type="submit" name="submit" id="submit"
    value="送信" /></dd>
  </dl>
</form>

.broad {
  width: 80%;
  border: 1px solid gray;
  }
：
：

.broad {
  width: 80%;
  border-top: 1px solid gray;
  border-right: 1px solid silver;
  border-bottom: 1px solid silver;
  border-left: 1px solid gray;
  }
：
：

.broad {
  width: 80%;
  padding: 3px;
  border-top: 1px solid gray;
  border-right: 1px solid silver;
  border-bottom: 1px solid silver;
  border-left: 1px solid gray;
  }
：
：

textarea { font-family: monospace; }
：
：

input:focus, textarea:focus { background-color: #dee; }
：
：

fieldset {
  padding: 20px;
  border: 1px solid gray;
  }
legend {
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  font-weight: bold;
  }
：
：
<form action="/cgi-bin/inquiry.cgi" method="post">
  <fieldset>
    <legend>お問い合わせフォーム</legend>
        ：
        ：
  （フォームの内容）
        ：
        ：
  </fieldset>
</form>

fieldset {
  padding: 20px;
  border: 1px solid gray;
  background: url(/images/fieldset_bcg.gif) no-repeat bottom right;
  }
：
：

dt {
  display: block;
  float: left;
  clear: left;
  width: 50px;
  margin: 0 10px 4px 0;
  padding: 0;
  border: 0;
  font-size: 90%; 
  font-weight: normal;
  text-align: right;
  }
dd { margin: 0 0 8px; }
input#submit { margin-left: 60px; }
：
：

fieldset {
  padding: 20px;
  border: 1px solid gray;
  background-color: #699;
  color: white;
  }
legend {
  border-top: 1px solid gray;
  border-right: 1px solid gray;
  border-left: 1px solid gray;
  background-color: #699;
  font-weight: bold;
  }
：
：
.broad {
  width: 80%;
  padding: 3px;
  border: 1px solid silver;
  }
：
：

第6章 第13節（p.444-453）

Chapters

第6章第13節（p.444-453）