Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[Basic HTML/CSS] 4. html - form tags

289 views

Published on

-

Published in: Technology
  • Be the first to comment

  • Be the first to like this

[Basic HTML/CSS] 4. html - form tags

  1. 1. BASIC HTML & CSS 4. html - form tags [ 2017.01.17. Tue ]
  2. 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. 3. form
  4. 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. 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. 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. 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. 8. form, fieldset, legend, label, input, select, option, textarea, button 모바일 사용성
  9. 9. <input type="text" autofocus> <input type="text" required> <input type="text" readonly> form, fieldset, legend, label, input, select, option, textarea, button
  10. 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. 11. <textarea> The HTML <textarea> element represents a multi-line plain-text editing control. form, fieldset, legend, label, input, select, option, textarea, button
  12. 12. <button type="xxx"></button> type="button | reset | submit" form, fieldset, legend, label, input, select, option, textarea, button
  13. 13. Find out!
  14. 14. example
  15. 15. Practice
  16. 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. 17. Facebook / Twitter / Codepen @zineeworld

×