The Starbuzz Bean Machine

Fill out the form below and click submit to order

Choose your beans:

Type:

Whale beans
Ground

Number of bags:

Must arrive by date:

Extras:

Gift wrap
Include catalog with order

Ship to:

Name:

Address:

City:

State:

Zip:

Phone:

Customer Comments:

HTML5

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="sample4.css">
  </head>
  <body>
    <h1>The Starbuzz Bean Machine</h1>
    <h2>Fill out the form below and click submit to order</h2>
    <div id="table0">
      <div class="row0">
        <p>Choose your beans:</p>
        <p>
          <select>
            <option>House Blend</option>
            <option>Shade Grown Bolivia Supremo</option>
            <option>Organic Guatemala</option>
            <option>Kenya</option>
          </select>
        </p>
      </div>
      
      <div class="row0">
        <p>Type:</p>
        <p>
          <input type="radio" name="type" value="Whale beans">Whale beans
          <br>
          <input type="radio" name="type" value="Ground" checked>Ground
        </p>
      </div>
      <div class="row0">
        <p>Number of bags:</p>
        <p><input type="number"></p>
      </div>
      <div class="row0">
        <p>Must arrive by date:</p>
        <p><input type="date"></p>
      </div>
      <div class="row0">
        <p>Extras:</p>
        <p>
          <input type="checkbox" name="extras">Gift wrap
          <br>
          <input type="checkbox" name="extras">Include catalog with order
        </p>
      </div>
      <div class="row0">
        <p>Ship to:</p>
        <p></p>
      </div>
      
      <div class="row0">
        <p>Name: </p>
        <p><input type="text" placeholder="Buckaroo Banzai" required></p>
      </div>
      <div class="row0">
        <p>Address: </p>
        <p><input type="text" placeholder="Bnazi Institute" required></p>
      </div>
      <div class="row0">
        <p>City: </p>
        <p><input type="text" placeholder="Los Angeles" required></p>
      </div>
      <div class="row0">
        <p>State: </p>
        <p><input type="text" placeholder="CA" required></p>
      </div>
      <div class="row0">
        <p>Zip: </p>
        <p><input type="text" placeholder="90050" required></p>
      </div>
      <div class="row0">
        <p>Phone: </p>
        <p><input type="tel" placeholder="310-555-1212"></p>
      </div>
      <div class="row0">
        <p>Customer Comments:</p>
        <p>
          <textarea>
          </textarea>
        </p>
      </div>
      <div class="row0">
        <p></p>
        <p>
          <input type="submit">
        </p>        
      </div>
    </div>
  </body>
</html>

CSS(Stylesheet)

#table0 div.row0 {
    display: table-row;
}
#table0 div.row0 p {
    display: table-cell;
}

Kamimura's blog

ほしい物リスト

2017年7月5日水曜日

HTML5 - CSS - HTML Forms: Getting Interactive(input elements, required, placeholder, checked)

The Starbuzz Bean Machine

Fill out the form below and click submit to order

0 コメント:

コメントを投稿