[TIL] HTML 5: Forms
35006 단어 CODECADEMYhtmlCODECADEMY
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>
Author And Source
이 문제에 관하여([TIL] HTML 5: Forms), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@songbetter/Today-I-Learned
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<h1>Login to start creating a burger!</h1>
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">
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>
Author And Source
이 문제에 관하여([TIL] HTML 5: Forms), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@songbetter/Today-I-Learned저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)