-

1. BASIC HTML & CSS
4. html - form tags
[ 2017.01.17. Tue ]

2. To Do
1. Basic Tags
○ h1~h6, div, p, span, img, a, strong, b, em, i
2. List tags
○ ul li, ol li, dl dt dd
3. Table tags
○ table, thead, tbody, tfoot, tr, td, colgroup, col
4. Form tags
○ form, fieldset, legend, label, input, select, option, textarea, button
5. Etc
○ header, footer, nav, aside, section, article
○ iframe, blockquote, ruby, sup, sub, pre, code, mark

3. form

4. form
The HTML <form> element represents a document section that contains
interactive controls to submit information to a web server.
form, fieldset, legend, label, input, select, option, textarea, button

5. fieldset, legend
● The HTML <fieldset> element is used to group several controls as
well as labels (<label>) within a web form.
● The HTML <legend> element represents a caption for the content of
its parent <fieldset>.
form, fieldset, legend, label, input, select, option, textarea, button

6. 1.
<label for="test"></label>
<input type="text" id="test">
2.
<label><input type="text"></label>
form, fieldset, legend, label, input, select, option, textarea, button

7. <input type="xxx">
type="text | email | tel | password | checkbox | radio"
hidden, search, url, datetime, data, month, week, time, number,
range, color, file, submit, image, reset, button, progress, meter
form, fieldset, legend, label, input, select, option, textarea, button

8. form, fieldset, legend, label, input, select, option, textarea, button
모바일 사용성

9. <input type="text" autofocus>
<input type="text" required>
<input type="text" readonly>
form, fieldset, legend, label, input, select, option, textarea, button

10. <!-- multiple은 ctrl(cmd)을 누르고 여러항목 선택 가능 -->
<select size="n" multiple>
<optgroup label="그룹">
<option value="xx">항목1</option>
<option value="xx" selected>항목2</option>
</optgroup>
</select>
form, fieldset, legend, label, input, select, option, textarea, button

11. <textarea>
The HTML <textarea> element represents
a multi-line plain-text editing control.
form, fieldset, legend, label, input, select, option, textarea, button

12. <button type="xxx"></button>
type="button | reset | submit"
form, fieldset, legend, label, input, select, option, textarea, button

13. Find out!

14. example

15. Practice

16. practice
/* CSS */
form {
width: 500px;
}
div {
margin: 10px 0;
}
label {
display: inline-block;
width: 100px;
}
input:not([type="radio"]):not([type="checkbox"]) {
padding: 0 10px;
width: 150px;
height: 25px;
}
체크리스트
1. 적절한 input type, placeholder
2. label for와 input id로 연결
3. select 항목 중 1가지가 선택(selected) 되어 있어야 함
4. 성별이 선택(checked)되어 있어야 함
5. 사용 가능 한 스킬이 선택(checked)되어 있어야 함
email

17. Facebook / Twitter / Codepen
@zineeworld