본문 바로가기

HTML5

W3Schools HTML5 튜토리얼 (한글) -9

W3Schools HTML5 튜토리얼

HTML5 홈
HTML5 소개
HTML5 새 엘리먼트 (Elements)
HTML5 비디오 (Video)
HTML5 비디오/Dom (Video/DOM)
HTML5 오디오 (Audio)
HTML5 캔버스 (Canvas)
HTML5 웹 저장공간 (Web Storage)

HTML5 폼 (Forms)

HTML5 입력타입 (Input Types)
HTML5 폼 엘리먼트 (Form Elements)
HTML5 폼 속성 (Form Attributes)

HTML5 참조목록 (Reference)

HTML5 태그 (Tags)
HTML5 속성 (Attributes)
HTML5 이벤트 (Events)
HTML5 2D 캔버스 (Canvas 2d)
HTML 유효 DTD (Valid DTDs)



HTML5의 새로운 입력 방식들

HTML5 폼은 몇 종류의 새로운 입력 방식을 가지고 있습니다. 이 새 기능들은 더 나은 입력제어와 유효성검사를 가능하게 해줍니다.

이 장에서 언급할 새 입력 방식들:
  • 이메일 (email)
  • url
  • 숫자
  • 범위 (range)
  • 날짜고르기 - Date pickers (date, month, week, time, datetime, datetime-local)
  • 검색 (search)
  • 색상 (color)



지원하는 브라우저

입력 방식익스플로러파이어폭스오페라크롬사파리
이메일 - email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
숫자 - number No No 9.0 7.0 5.1
범위 - range No No 9.0 4.0 4.0
날짜고르기 -Date pickers No No 9.0 10.0 5.1
검색 - search No 4.0 11.0 10.0 No
색상 - color No No 11.0 12 No

Note: 오페라는 새 입력방식을 가장 잘 지원합니다. 하지만 이미 구현하고 사용한다면 대다수의 브라우저에서는 그것을 지원하지않는다면 예전의 일반적인 입력상자로서 인식할것입니다.

 


입력방식 - 이메일

이메일 방식은 입력값이 이메일일때 사용합니다.

이메일 입력창의 입력값은 폼을 submit하기전에 자동으로 이메일 유효성검사를 할 것입니다.

예제

E-mail: <input type="email" name="user_email" />

직접 해보기 »

Tip: 아이폰의 사파리는 이메일 입력방식을 인식하고 터치키보드에 @ 나 .com  옵션들을 매치시켜줍니다.


입력방식 - url

url 방식은 입력값이 URL주소일때 사용합니다.

url 입력창은 입력값은 폼을 submit하기전에 자동으로 url 유효성검사를 할 것입니다.

예제

Homepage: <input type="url" name="user_url" />

직접 해보기 »

Tip: 아이폰의 사파리는 url 입력방식을 인식하고 터치키보드에 .com 옵션을 매치시켜줍니다.


입력방식 - 숫자 number

숫자방식은 입력값이 숫자일때 사용합니다.

허용되는 숫자값을 제한할수있습니다:

예제

Points: <input type="number" name="points" min="1" max="10" />

직접 해보기 »

다음 속성은 숫자방식의 제한을 걸때 사용합니다:

속성입력값설명
max 숫자 최대값 허용치를 기술함
min 숫자 최소값 허용치를 기술함
step 숫자 유효 입력값의 간격을 기술함 (step="3"이면 유효입력값은 -3,0,3,6, 등등이 됨)
value 숫자 초기값을 기술함

모든  속성 제한값에 대한 예제모음: 직접 해보기



입력 방식 - 범위 range

범위 방식은 입력값이 숫자 범위일때 사용합니다.

범위 방식은 슬라이더 바로 표시됩니다.

허용되는 숫자값을 제한할수있습니다:

예제

<input type="range" name="points" min="1" max="10" />

직접 해보기 »

다음의 속성은 범위방식의 제한을 걸때 사용합니다:

속성입력값설명
max 숫자 최대값 허용치를 기술함
min 숫자 최소값 허용치를 기술함
step 숫자 유효 입력값의 간격을 기술함 (step="3"이면 유효입력값은 -3,0,3,6, 등등이 됨)
value 숫자 초기값을 기술함



입력방식 - 날짜 고르기 Date Pickers

HTML5는 날짜와 시간을 선택할수있는 몇가지 새 입력 방식을 가지고 있습니다:

  • date - 일, 월, 년을 선택함
  • month - 월, 년을 선택함
  • week - 주, 년을 선택함
  • time - 시간을 선택함 (시간 및 분)
  • datetime - 시간, 날짜, 월, 년을 선택함 (UTC시간대 기준)
  • datetime-local - 시간, 날짜, 월, 년을 선택함 (로컬시간대 기준)

다음의 예제에서 캘린더로 날짜를 선택할수있습니다:

예제

Date: <input type="date" name="user_date" />

직접 해보기 »

입력 방식 - 월 "month": 직접 해보기

입력 방식 - 주 "week": 직접 해보기

입력 방식 - 시 "time": 직접 해보기

입력 방식 - 날짜시간 "datetime": 직접 해보기

입력 방식 - 날짜시간 로컬 "datetime-local": 직접 해보기



입력방식 - 검색 search

검색방식은 입력창에 구글검색, 사이검색과 같이 검색을 위해 사용합니다.

이 검색창은 일반적인 입력상자 처럼 작동합니다.
 


입력방식 - 색상 color

색상방식은 입력창에 색상값을 포함합니다.

오페라 브라우저는 색상고르기를 통해 색상을 선택할수있습니다.
구글 크롬에서는 16진수 색상값만 허용합니다:

예제

Color: <input type="color" name="user_color" />

직접 해보기 »



HTML5 <input> 태그

태그설명
<input> 입력창을 정의함