BASIC HTML & CSS4. html - form tags

[ 2017.01.17. Tue ]

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

form

formThe 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

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

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

<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

form, fieldset, legend, label, input, select, option, textarea, button

모바일 사용성

<input type="text" autofocus><input type="text" required><input type="text" readonly>

form, fieldset, legend, label, input, select, option, textarea, button

<!-- 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

<textarea>The HTML <textarea> element represents

a multi-line plain-text editing control.

form, fieldset, legend, label, input, select, option, textarea, button

<button type="xxx"></button>type="button | reset | submit"

form, fieldset, legend, label, input, select, option, textarea, button

Find out!

example

Practice

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, placeholder2. label for와 input id로 연결3. select 항목 중 1가지가 선택(selected) 되어 있어야 함4. 성별이 선택(checked)되어 있어야 함5. 사용 가능 한 스킬이 선택(checked)되어 있어야 함

email

Facebook / Twitter / Codepen

@zineeworld