개발자의 길

html5 추가된 form input 태그들 본문

10. HTML

html5 추가된 form input 태그들

자르르 2015. 12. 30. 16:57


1. 새로운 input types

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

2. 새로운 form elements

  • <datalist>
  • <keygen>
  • <output>

3. 새로운 input attributes

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

4. 새로운 form attributes

  • autocomplete
  • novalidate


  1. <!DOCTYPE html>
  4. <meta charset="EUC-KR">
  5. <title>Insert title here</title>
  6. </head>
  8.     <form action="search_result.jsp">  
  9.         <table>
  10.             <tr>
  11.                 <td>search</td>
  12.                 <td><input type="search" autofocus="autofocus"/></td>
  13.             </tr>
  14.         </table>
  15.     </form>
  16.    
  17.     <form action="form_result.jsp">
  18.         <table border="1">
  19.            
  20.             <tr>
  21.                 <td colspan="2"><input type="submit"/> | <input type="reset"/></td>
  22.             </tr>
  23.             <tr>
  24.                 <td>text,placeholder,pattern,title</td>
  25.                 <td><input type="text" required="required" placeholder="우편번호" pattern="\d{3}-\d{3}" title="111-111양식"/></td>
  26.             </tr>
  27.            
  28.             <tr>
  29.                 <td>number</td>
  30.                 <td><input type="number" required="required" min="0" max="9" step="1"/></td>
  31.             </tr>
  32.            
  33.             <tr>
  34.                 <td>range</td>
  35.                 <td><input type="range" required="required" min="0" max="100" step="5"/></td>
  36.             </tr>
  37.            
  38.             <tr>
  39.                 <td>url</td>
  40.                 <td><input type="url" required="required"/></td>
  41.             </tr>
  42.            
  43.             <tr>
  44.                 <td>email</td>
  45.                 <td><input type="email" required="required"/></td>
  46.             </tr>
  47.            
  48.             <tr>
  49.                 <td>date</td>
  50.                 <td><input type="date" required="required"/></td>
  51.             </tr>
  52.            
  53.             <tr>
  54.                 <td>month</td>
  55.                 <td><input type="month" required="required"/></td>
  56.             </tr>
  57.            
  58.             <tr>
  59.                 <td>week</td>
  60.                 <td><input type="week" required="required"/></td>
  61.             </tr>
  62.            
  63.             <tr>
  64.                 <td>time</td>
  65.                 <td><input type="time" required="required"/></td>
  66.             </tr>
  67.            
  68.             <tr>
  69.                 <td>color</td>
  70.                 <td><input type="color" required="required"/></td>
  71.             </tr>
  72.             <tr>
  73.                 <td>datalist</td>
  74.                 <td>
  75.                     <input list="browsers">
  76.                     <datalist id="browsers">
  77.                       <option value="Internet Explorer">
  78.                       <option value="Firefox">
  79.                       <option value="Chrome">
  80.                       <option value="Opera">
  81.                       <option value="Safari">
  82.                     </datalist>
  83.                 </td>
  84.             </tr>
  85.         </table>
  86.     </form>
  87. </body>
  88. </html>
[chrome 에서 test]




저작자표시

'10. HTML' 카테고리의 다른 글

[html] html,jsp,php,asp redirect - 언어별 리다이렉트 방법  (0) 2015.12.09
html 특수 문자 표현식  (0) 2015.02.09
[html]반응형 웹 테스트  (0) 2013.07.26
[HTML]document.body.scrollTop 대체  (0) 2010.04.30
text 박스 테두리 없애기  (1) 2010.01.21


이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공유하기 링크
'10. HTML' Related Articles more
Comments