Login to start creating a burger!

Username:
Password:

ログインページ

<h1>Login to start creating a burger!</h1>

1. Input Type: Text

テキスト入力領域

<label for="username">Username:</label>
<input type="text" name="username" id="username">
<br>
<label for="user-pw">Password:</label>
<input type="text" name="user-pw" id="user-pw">

Create a burger!

What type of protein would you like?
How many patties would you like?
How do you want your patty cooked
Rare
Well-Done
What toppings would you like?
Lettuce
Tomato
Onion
Would you like to add cheese?
Yes
No
What type of sauce would you like?
Ketchup
Mayo
Sriracha
What type of bun would you like?
Sesame
Potato
Pretzel
Anything else you want to add?

オーダーページの作成

<h1>Create a burger!</h1>

1. Input Type: Text

テキスト入力領域

<section class="protein">
    <label for="patty">What type of protein would you like?</label>
    <input type="text" name="patty" id="patty" value="beef">
</section>
<hr>

2. Input Type: Number

数値入力領域

<section class="patties">
    <label for="amount">How many patties would you like?</label>
    <input type="number" name="amount" value="2" id="amount">
</section>
<hr>

3. Input Type: Range

範囲の選択を許可する領域

<section class="cooked">
    <label for="doneness">How do you want your patty cooked</label>
    <br>
    <span>Rare</span>
    <input type="range" name="doneness" id="doneness" value="3" min="1" max="5">
    <span>Well-Done</span>
</section>
<hr>

4. Input Type: Checkbox

オプションの複数のチェックボックス領域

<section class="toppings">
    <span>What toppings would you like?</span>
    <br>
    <input type="checkbox" name="topping" id="lettuce" value="lettuce">
    <label for="lettuce">Lettuce</label>
    <input type="checkbox" name="topping" id="tomato" value="tomato">
    <label for="tomato">Tomato</label>
    <input type="checkbox" name="topping" id="onion" value="onion">
    <label for="onion">Onion</label>
</section>
<hr>

5. Input Type: Radio

複数の項目から1つしか選択できない領域

<section class="cheesy">
    <span>Would you like to add cheese?</span>
    <br>
    <input type="radio" name="cheese" id="yes" value="yes">
    <label for="yes">Yes</label>
    <input type="radio" name="cheese" id="no" value="yes">
    <label for="no">No</label>
</section>
<hr>

6. Input Type: Datalist

オプションの値を検索して選択した領域

<section class="sauce-selection">
    <label for="sauce">What type of sauce would you like?</label>
    <input list="sauces" id="sauce" name="sauce">
    <datalist id="sauces">
    	<option value="ketchup">Ketchup</option>
        <option value="mayo">Mayo</option>
        <option value="sriracha">Sriracha</option>
    </datalist>
</section>

7. Select

オプションから値を選択して選択できる領域

<section class="bun-type">
    <label for="bun">What type of bun would you like?</label>
    <select name="bun" id="bun">
    	<option value="sesame">Sesame</option>
        <option value="potato">Potato</option>
        <option value="pretzel">Pretzel</option>
    </select>
</section>
<hr>

8. Textarea

テキスト入力可能領域

<section class="extra-info">
    <label for="extra">Anything else you want to add?</label>
    <br>
    <textarea id="extra" name="extra" rows="3" cols="40">
    </textarea>
</section>
<hr>

9. Submit

フォームの転送ボタン

<section class="submission">
    <input type="submit" value="Submit">
</section>