[TIL] HTML 5: Forms

Login to start creating a burger!

Username:
Password:

로그인 페이지

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

1. Input Type: Text

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

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

여러 개의 항목 중에서 하나만 선택이 가능한 영역

<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

옵션에 있는 값을 Dropdown하여 선택할 수 있는 영역

<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

Text를 기입할 수 있는 영역

<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

Form을 전송하는 버튼

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

좋은 웹페이지 즐겨찾기