HTML and CSS - HTML Forms: Getting Interactive(input element, type,select element, option element, textarea element)

Head First HTML and CSS
(O'Reilly Media)
Elisabeth Robson (著), Eric Freeman (著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox + Firebug, Google Chrome(Webプラウザ、プラグイン)
• BBEdit - Bare Bones Software, Inc. (GUI) , Emacs (CUI) (Text Editor)
• HTML (マークアップ言語)
• Cascading Style Sheets(CSS) (スタイルシート)

Head First HTML and CSS (Elisabeth Robson (著)、 Eric Freeman (著)、O'Reilly Media)のChapter 14(HTML Forms: Getting Interactive)、MARKUP MAGNETS(No. 9918)を解いてみる。

MARKUP MAGNETS(No. 9918)

HTML (BBEdit, Emacs)

<form action="" method="">
  <p>
    Choose your beans:
    <select name="beans">
      <option name="bean" value="">House Blend</option>
      <option name="bean" value="">Shade Grown Bolivia Supremo</option>
      <option name="bean" value="">Organic Guatemala</option>
      <option name="bean" value="">Kenya</option>
    </select>
    <br>
    Type<br>
    <input type="radio" name="wholeorground" value="whole">Whole bean<br>
    <input type="radio" name="wholeorground" value="ground" >Ground<br>
    Number of bags: <input type="number" value="bags" min="0"><br>
    Must arrive bay date: <input type="date" name="date"><br>
    Extras:<br>
    <input type="checkbox" name="extras">Gift wrap<br>
    <input type="checkbox" name="extras">Include catalog with order<br>
    Ship to:<br>
    Name: <input type="text" name="name"><br>
    Address: <input type="text" name="address"><br>
    City: <input type="text" name="city"><br>
    State: <input type="text" name="state"><br>
    Zip: <input type="text" name="zip"><br>
    Phone: <input type="tel" name="tel"><br>
    Customer Comments:<br>
    <textarea name="comments" rows="10" cols="50"></textarea><br>
    <input type="submit" value="Order Now">
  </p>
</form>

Choose your beans: House Blend Shade Grown Bolivia Supremo Organic Guatemala Kenya
Type
Whole bean
Ground
Number of bags:
Must arrive bay date:
Extras:
Gift wrap
Include catalog with order
Ship to:
Name:
Address:
City:
State:
Zip:
Phone:
Customer Comments: