HTML5에 새롭게 추가된 input 요소의 type 속성값들
속성값 기능 tel 사용자로부터
입력되는 데이터가 전화번호일 때 사용 search 웹사이트에 검색 기능을 구현할 때 사용 url 사용자로부터
입력되는 데이터가 웹페이지 주소일 때 사용 email 사용자로부터 입력되는 데이터가 이메일 주소일
때 사용 datetime 날짜나 시간을
나타냄. 2012년 2월 8일의 경우 datetime-local 지역 날짜나 시간을 나타냄. date YYYY-MM-DD 형태의 날짜를
나타냄. 2012년 2월 8일의 경우 2012-02-08 month 월를 나타냄. 2012년 2월의 경우는
2012-02 week 주를 나타냄. 2012년의 1월 3째주는 2012-W03 time 00:00 ~
24:00와 같이 하루의 시간을 나타냄 number 특정 범위에
대하여 숫자 데이터로 제한 range 숫자 데이터의 특정 범위에 대해서 슬라이드바
형식으로 나타냄 color 색상을 설정
HTML5에서 새롭게 등장한 type 속성값들 중에서 이메일(email), 웹사이트 주소(URL), 전화번호(tel)에 대한 예제를 알아 볼까요? 메모장을 열어서 기본적인 HTML5 문서의 코드를 작성한 후 <body> … </body> 블록을 다음과 같이 작성합니다.
<body>
<form>
<fieldset>
<legend><b>개인 정보</b></legend>
이메일 <input type="email"
name="myemail" size="30" required="" /><br /><br />
블로그 주소 <input type="url" name="myblog"
size="30" required="" /><br
/><br />
전화번호 <input type="tel"
name="myphone" size="13" required /><br /><br />
<input type="submit"
value="질의 보내기"/>
<input type="reset"
value="초기화"/>
</fieldset>
</form>
</body>
위와 같이 type 속성값으로 각각 email. url, tel 로 설정하고 required 속성을 설정하여 input 요소에 입력되는 데이터에 대하여 유효성 검사를 하도록 하고 “inputwithemailurltel.html”로 저장합니다. 이제 Firefox로 열고 질의 보내기 버튼을 클릭하면 다음과 같이 required 속성에 의해서 입력을 요청합니다.
이메일, 블로그 주소, 전화번호 input에 각각 잘못된 정보를 입력해보면 다음과 같이 “정확한 이메일 주소를 입력해 주십시오.” 같은 메시지가 나타나게 됩니다.
이제 datetime, datetime-local, date, month, week, time 속성값을 사용하는 방법을
알아볼까요?
메모장을 열어서 HTML5 문서의 기본적인 코드를 작성하고 <body>…</body> 블록을 다음과 같이 작성합니다.
<body>
<form>
<fieldset>
<legend><b>날짜와 시간 관련</b></legend>
속성값 :
datetime <input type="datetime" name="idatetime" /><br /><br />
속성값 :
datetime-local<input type="datetime-local"
name="idatetimelocal"/><br /><br />
속성값 : date
<input type="date" min="2012-02-01"
max="2012-02-14" /><br /><br />
속성값 : month
<input type="month" name="imonth" /><br
/><br />
속성값 : week
<input type="week" name="iweek" /><br /><br
/>
속성값 : time
<input type="time" name="itime" min="07:00"
max="12:00"
required="required"
/><br /><br />
</fieldset>
<input type="submit"
value="질의 보내기"/>
</form>
</body>
위와 같이 작성한
후 “inputwithdatetime.html”로 저장합니다. 현재
대부분의 웹 브라우저는 date, time 관련 부분을 지원하지 않고 오페라(Opera) 브라우저만 지원하므로 오페라로 열어보면 다음과 같이 나타납니다.
위에서 datetime 부분을 다음과 같이 클릭하면 달력이 나타나서 원하는 날짜를 선택할 수 있으며 옆에 시간(time) 부분을 선택할 수 있습니다.
같은 방법으로 datetime-local, date, month, week, time도 같은 방법으로 날짜와 시간을 설정할
수 있습니다. 여기서 datetime, datetime-local 간의
차이점은 타임 존(time zone)을 적용해야 하느냐 그렇지 않느냐의 차이점이 존재하며 나머지는 거의
동일한 기능을 합니다. 그러므로 특별히 뉴욕, 서울, 런던 등과 같이 타임 존의 차이가 발생하는 경우를 표시하지 않을 경우에는
datetime을 쓰지 않고 datetime-local을 쓰면 되는 것입니다.
앞서 코드에서 date, time 속성값에 min,
max를 이용하여 입력될 수 있는 값의 범위를 제한했는데 정상적으로 동작하는지 확인하려면 date 속성값의
달력 부분을 보면 min, max에 설정된 값의 범위에서만 선택할 수 있도록 다음과 같이 자동적으로
제한이 걸리는 것을 확인할 수 있을 것입니다.
마지막으로 number, range, color 속성값을 사용하는 방법을 알아봅니다. 메모장을
열어서 HTML5 문서의 기본적인 코드를 작성하고
<body>…</body> 블록을 다음과 같이 작성합니다.
<body>
<form>
<fieldset>
<legend><b>학생 정보</b></legend>
이름
<input type="text" name="s_name" size="20"
required="" /><br /><br />
학번 <input
type="text" name="s_number" size="12"
required="" /><br /><br />
나이 <input type="number"
name="s_age" min="10" max="80" required />
<br
/><br />
체중 <input type="range"
name="s_weight" min="20" max="120" required />
<br
/><br />
좋아하는 색 <input type="color"
name="favorite_color" required /><br
/><br />
<input type="submit" value="질의
보내기"/>
<input type="reset"
value="초기화"/>
</fieldset>
</form>
</body>
위와 같이 type 속성값으로 number, range, color로 각각 설정하고 number, range는 input 요소의
min, max 속성을 이용하여 최소값(시작값), 최대값(끝값)을 설정합니다. 그리고
공통으로 required 속성을 설정하여 유효성 검사를 체크하도록 합니다.
“inputwithnumberrangecolor.html”로 저장한 후 Opera 브라우저를
이용하여 열면 다음과 같이 나타납니다.
위에서 보는 것처럼 나이는 직접 입력하거나 옆의 버튼을 클릭하여 1씩 증감시켜서 값을 설정할 수 있으며 체중은 슬라이드 바 형식으로 마우스를 이용하여 설정할 수 있습니다. 마지막으로 좋아하는 색은 다음과 같이 클릭하여 설정할 수 있습니다.
현재(2012년 2월 2일) number, range, color 속성값들을 모두 지원하는 웹 브라우저는
Opera만 가능하며 chrome, safari는
number, rang만 가능합니다.
끝으로 HTML5에서 새롭게 추가된 type 속성값들에
대해서 일부 브라우저는 지원을 하고 일부 브라우저는 아직 지원되지 않으므로 여러분이 이에 맞게 테스트를 통해 적절하게 구성할 필요가 있음을 알
수 있습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 9.6 select 요소 (0) | 2013.07.31 |
|---|---|
| 9.5 button 요소 (0) | 2013.07.31 |
| 9.4 input 요소 (0) | 2013.07.31 |
| 9.3 lable 요소 (0) | 2013.07.31 |
| 9.2 fieldset, legend 요소 (0) | 2013.07.31 |