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>	입력창을 정의함