10_input 태그(2)

input태그(2)에서는 HTML5에서부터 지원하는 타입들에 대해서 쓰겠다.

(윈7, 익스플로러8에서는 지원이 안되는 타입들)

1. e-mail

 email 타입은 간단한 이메일 형식을 확인해준다. @이의 앞뒤 정도만 확인해서 정확하지는 않지만 어느정도 잘못된 이메일을 걸러줄 수 있다.

required - 아무것도 입력하지 않고 submit을 눌렀을때 공백을 채우라는 메세지를 띄워준다.

2. number, range

number은 숫자만 입력하도록 제한해주고 range는 스크롤바와 비슷한 바를 생성해서 컨트롤 할 수 있다.

number에 숫자 이외의 문자를 넣으면 입력되지 않는다. value로 초기값을 min으로 최소값을 max로 최대값을 설정할 수 있다.

range또한 min,max를 설정할 수 있고 step을 통해서 한번에 움직일때마다 증가하거나 감소하는 숫자를 지정할 수 있다.

사용하는 모습

3. color

색상을 지정할 수 있게 해주는 input태그의 타입

색상을 눌러서 색상을 바꿀 수 있다.

4. date, month

date는 날짜까지 month는 월까지 제한하여 날짜를 선택할 수 있게 해준다.

5. image

img태그 이외에 input태그의 image 타입으로도 이미지를 삽입할 수 있다.

6. time, url, week, reset

reset을 누르면 입력된 값을 초기화 할 수 있다.