HTML - input태그의 추가된 속성과 type 속성에 추가된 값 - 입력태그 (2)

HTML - input태그의 추가된 속성과 type 속성에 추가된 값

입력태그 (2)

 오늘은 이전 포스팅에 이어 html5에서

input태그의 추가된 속성과 type 속성에 추가된 값에 

대해서 알아 보도록 하겠습니다.

태그 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.)

input태그의 추가된 속성이란?

html5에서 새로운 input 태그가 추가된 내용 입니다.

그중 몇개의 내용은 아래와 같습니다.

추가된 속성	내용
pattern	허용하는 입력의 형태를 정규식으로 지정
required	입력양식 제출전에 반드시 채워져 있어야 함을 표현
readonly	읽기 전용 필드
placeholder	입력 힌트를 희미하게 보여 줌
autofocus	페이지 로드시 자동으로 입력 포커스를 갖춘다.
autocomplete	자동으로 입력을 완성 한다.

      

<html5에서 새롭게 추가된 input의 속성>

여기까지가 html5의 추가된 속성이였습니다.

사용법은 이전 포스팅과 동일한 방법이니 한번씩 타이핑 해보면서

어떤식으로 보여지는지 확인 하신다면 금방 이해가 되실 겁니다. ^^

input태그의 type 속성의 추가된 값이란?

input태그의 type 속성의 추가된 값이란 HTML5에 들어서면서

input 태그의 type 속성에 아주많은 값이 추가된 내용이며

이러한 새로운 값들은 개발자들의 수고를 많이 덜어주는데요

예를 들면 자바스크립트를 이용해 정규식을 이용해서

검사를 해야하는 부분을 많이 줄여주는 부분 입니다.

하지만 여기서 좀더 자세히 검사를 하기 위해서는 

자바스크립트를 이용해야 하긴 하지만요 ^^

(자세한 내용은 추후 자바스크립트에서 다루겠습니다.)

추가된 속성 값	내용
data	날짜를 입력하는 컨트롤 창 생성
datatime	UTC 날짜와시간 형식을 이용한 컨트롤 창 생성
datetime-local	현지 날짜 / 시간
month	월 / 연도
time	시간
color	색상 코드 입력 컨트롤 창 생성
week	주와 연도 선택 컨트롤 창 생성
email	표준 이메일 주소를 입력받아서 검증하는 컨트롤 창 생성
tel	전화번호를 입력받아서 검증하는 컨트롤 창 생성
search	검색어 입력 양식 창 생성
reange	2개의 숫자 사이의 숫자 선택 슬라이더 컨트롤 창 생성
number	숫자만 입력받는 컨트롤 창 생성
url	URL만 입력 받는 컨트롤 창 생성

<html5에서 input태그의 type속성의 새로 추가된 속성 값>

여기까지 

html5에서 input태그의 type속성의 새로 추가된 속성 값에 대해서

알아보았으며 위 속성값은 이전 포스팅과 동일하게 작성하는 방법이라

하나씩 써보면 금방 이해가 되실 겁니다. ^^

 HTML - input태그의 추가된 속성과 type 속성에 

추가된 값에 대해서 기록해 보았습니다.

다시 한번 말하지만 위와 같은 내용은 백번 보는 것 보다 

한두번 써보고 실행해 보는것이 이해하기 쉬우니 한번 해보시기 바랍니다. ^^

이상 HTML - input태그의 추가된 속성과 type 속성에 추가된 값 - 입력태그 (2)에 

관련된 포스팅을 마치도록 하겠습니다.