2. 유형 설명 코드
텍스트 텍스트를 입력합니다 <input type="text">
패스워드 비밀번호 입력. <input type="password">
체크박스 클릭할 때마다 on/off <input type="checkbox">
라디오 버튼 그룹 중에서 한가지 선택 <input type="radio">
파일 파일 업로드 <input type="file">
전송 버튼 폼에 입력한 값 전송 <input type="submit">
리셋 버튼 폼에 입력한 값 모두 취소 <input type="reset">

3. 유형 설명 코드
이메일 주소 이메일 주소를 입력합니다 <input type="email">
웹 사이트 주소를 입력합니
웹 주소 <input type="url">
다
숫자(스핀상자) 숫자를 ▲ /▼ 로 눌러 선택 <input type="nuber">
슬라이드 막대로 지정된 범
숫자(슬라이드더) <input type="range">
위의 숫자 선택
달력에서 날짜 선 택 , <input type="date">
날짜/시간 등
스핀 박스에서 시간 선택 <input type="datetime">
검색 상자 검색 상자 삽입 <input type="search">
색상 색상 선택 <input type="color">

4. HTML 5 <input> 요소
이메일 주소 필드 type=“email”
• 기존 HTML에서는 자바스크립트를 이용해서 이메일
형식에 맞는지 체크
• HTML5에서는 사용자 입력 단계에서 이메일 주소인지
아닌지 확인 가능

5. HTML 5 <input> 요소
이메일 주소 필드 type=“email”
• <input type="email">로 지정해
놓으면 사용자가 해당 필드에
포커스를 갖다놓으면 자동으로
키보드 입력 화면이 전환됨
• 길게 <space> 키가 표시되었던
자리에 메일 주소를 입력하기
편하도록 작은 <space> 키와 <@>
키, 그리고 <.>키가 함께 표시됨

6. <form>
<label for=mail>메일주소</label>
<input id="mail" type="email"
placeholder="example@domain.com" required>
<input type="submit" value="등록">
</form>

7. HTML 5 <input> 요소
이메일 주소 필드 type=“url”
• 기존 HTML에서는 텍스트 필드로 사용
• HTML5에서는 웹 주소 필드를 따로 인식

8. HTML 5 <input> 요소
이메일 주소 필드 type=“url”
• <input type="url">로 되어 있는
필드에 입력하려고 할 경우 텍스트
필드나 이메일 필드에서 보였던
<space>키는 보이지 않는다.
• <.com> 키를 오래 누르고 있으면
<.edu>나 <.org> 같은 다른
도메인도 선택할 수 있다.

9. HTML 5 <input> 요소
스핀 박스 숫자 필드 type=“number”
<input type="number" min="최소값" max="최대값" step="간격"
value="초기값">
• min="최소" : 필드에 입력할 수 있는 최소값
• max="최대값" : 필드에 입력할 수 있는 최대값
• step="간격" : 짝수나 홀수 등 특정 숫자로 제한하려고
할 때 숫자의 간격 지정. 기본값은 1이며 생략 가능.
• value="기본값" : 필드에 표시할 초기값.

10. <ol>
……
<li>
<label>주문개수</label>
<input id="num" type="number" min="1" max="3"
value="1">
</li>
</ol>

11. 아이폰의 숫자 필드 입력 화면

12. HTML 5 <input> 요소
날짜 필드 type=“date”, type=“datetime”
유형 설명 코드
날짜 연도와 월, 날짜까지 선택 <input type="date">
월 연도와 월까지 선택 <input type="month">
주 연도와 주까지 선택 <input type="week">
시간 시간 표시 <input type="time">
날짜 선택 후, 시간 함께 표
날짜와 시간 시 <input type="datetime">
UTC 시간대 기준
날짜와 시간
날짜 선택 후 시간 함께 표시 <input type="datetime-local">

13. <ol>
……
<li>
<label>원하는 배송일</label>
<input id="wanted" type="date">
</li>
</ol>
오페라에서만 제대로
지원함 

14. HTML 5 <input> 요소
슬라이드 막대 숫자 필드 type=“range”
<input type=“range” min="최소값" max="최대값" step="간격"
value="초기값">
• min="최소" : 움직일 수 있는 최소값
• max="최대값" : 움직일 수 있는 최대값
• step="간격" : 숫자의 간격 지정.
기본값은 1이며 생략 가능.
• value="기본값" : 슬라이드의 초기 위치.
생략하면 중간에 놓임.

15. <ol>
……
<li>
<label>주문개수</label>
<input id="num" type="range" min="1" max="5"
value="1">
</li>
</ol>

16. HTML 5 <input> 요소
<input type="month">
• 달력에서 날짜를 선택하면 월까지만 입력된다.
• 날짜 형식은 'yyyy-mm'

17. HTML 5 <input> 요소
<input type=“week”>
• 달력에서 날짜를 선택하면 1월 첫째주를 시작으로 몇 번째
주인지, 그 날짜가 속한 주(week)가 자동으로 입력됨

18. HTML 5 <input> 요소
<input type=“time”>
• 시간 지정
• 00:00부터 23:59까지 입력하거나 화살표로 조절

19. HTML 5 <input> 요소
검색 상자 필드 type=“search”
<input type=“search”>
• 검색어를 입력하자마자 검색 상자 오른쪽에 ×가
표시되고, ×를 클릭하면 검색 상자 안에 입력한
검색어를 손쉽게 지울 수 있다

20. HTML 5 <input> 요소
색상 필드 type=“search”
<input type=“color”>
오페라에서만 제대로
지원함 

21. <input> 태그의 새로운 속성들
자동 완성 제어 autocomplete
• 사용할 수 있는 값 : on(기본값), off
• 폼에서 개인 정보를 입력할 때 사용자가 따로 자동
완성 기능을 끄지 않더라도 문서에서 알아서 자동
완성 기능을 꺼줌.

22. <li>
……
<input id="email" type="email"
placeholder="example@domain.com" required
autocomplete="off" >
……
<input id="phone" name="phone" placeholder="02)1111-
1111" required autocomplete="off">

23. autocomplete=“on” autocomplete=“off”

24. <input> 태그의 새로운 속성들
입력 필드에 커서 표시 autofocus
• 페이지 불러오자 마자 필드 안에 마우스 커서 표시
• HTML4에서는 자바스크립트 이용
 HTML5는 autofocus 속성으로 해결

25. <li>
<label for="name">이름</label>
<input id=name type="text" placeholder="8자 미만
공백없이" autofocus>
</li>
<li>
<label for=email>메일주소</label>
<input id="email" type="email"
placeholder="example@domain.com">
</li>
……

26. <li>
<label for="name">이름</label>
<input id=name type="text" placeholder="8자 미만
공백없이" autofocus>
</li>
<li>
<label for=email>메일주소</label>
<input id="email" type="email"
placeholder="example@domain.com">
</li>
……

27. HTML 5 <input> 요소
사용 가능 값 제시 list=“...”, <datalist>
<datalist>
<option value="서버 값" label="사용자를 위한 레이블“>
<option value="서버 값" label="사용자를 위한 레이블">
....
</datalist>
• 사용자가 텍스트 필드에 내용을 입력할 때 몇 개의
입력 가능한 값들을 데이터 목록으로 보여준다

28. <li>
<label for="prodid">색상</label>
<input id="prod" type="text" list="mycolor">
<datalist id="mycolor">
<option value="black" label="검정색">
<option value="white" label="흰색">
<option value="skyblue" label="하늘색">
</datalist>
</li>
……

29. <li>
<label for="prodid">색상</label>
<input id="prod" type="text" list="mycolor">
<datalist id="mycolor">
<option value="black" label="검정색">
<option value="white" label="흰색">
<option value="skyblue" label="하늘색">
</datalist>
</li>
……

30. HTML 5 <input> 요소
힌트 표시하기 placeholder
• 필드 안에 적당한 내용을 표시하고 있다가
사용자가 클릭하면 내용이 사라진다
• HTML4에서는 자바스크립트로 처리
HTML5에서는 placeholder 속성으로 처리 가능

31. <li>
<label for="name">이름</label>
<input id=name type="text" placeholder="8자 미만
공백없이">
</li>
<li>
<label for=email>메일주소</label>
<input id="email" type="email"
placeholder="example@domain.com">
</li>
……

32. <li>
<label for="name">이름</label>
<input id=name type="text" placeholder="8자 미만
공백없이">
</li>
<li>
<label for=email>메일주소</label>
<input id="email" type="email"
placeholder="example@domain.com">
</li>
……

33. HTML 5 <input> 요소
필수 입력 필드 체크 required
• submit 단추를 클릭하면 서버로 폼을 전송하기
전에 필수 필드에 내용들이 모두 채워졌는지 검사
• HTML4에서는 자바스크립트로 필수 필드 처리
HTML5에서는 required 속성 확인가능
• required ="required"라고 하거나 required라고만
해도 된다

34. <li>
<label for="name">이름</label>
<input id=name type="text" placeholder="8자 미만
공백없이" autofocus required>
</li>
<li>
<label for=email>메일주소</label>
<input id="email" type="email"
placeholder="example@domain.com" required>
</li>
……

35. <li>
<label for="name">이름</label>
<input id=name type="text" placeholder="8자 미만
공백없이" autofocus required>
</li>
<li>
<label for=email>메일주소</label>
<input id="email" type="email"
placeholder="example@domain.com" required>
</li>
……

36. HTML 5 <input> 요소
단추로 폼 컨트롤 formaction, formenctype,
formmethod, formnovalidate, formtarget
<form> 태그의 action 속성을 덮어쓴다.
formaction
폼을 전송해서 처리할 프로그램이 있는 URL을 지정.
<form> 태그의 method 속성을 덮어쓴다.
formmethod action URL로 폼을 전송하기 위한 방법 지정
사용할 수 있는 값은 get, post, put, delete
http://wufoo.com/html5/attributes/13-formaction.html

37. HTML 5 <input> 요소
<form> 태그의 enctype 속성을 덮어쓴다
폼 컨텐츠를 인코딩하기 위한 mime 유형 지정
formenctype
사용할 수 있는 값: application/x-www-form-
urlencoded, multipart/form-data, text/plain
<form>의 novalidate 속성을 덮어쓴다.
formnovalidate 'true' 값이 선택되면 전송될 때 input 필드 값을 검증
하지 않는다
<form>의 target 속성을 덮어쓴다.
formtarget
사용할 수 있는 값 : _blank, _self, _parent, _top