HTML5 input 엘리먼트와 새로운 type

웹표준/HTML5 훑어보기 2010.07.15 13:04

HTML5 input 엘리먼트와 새로운 type

html5에서 많은 타입이생겼다 기존에 있던것은 생략하고 새로생긴것을 살펴보자. 명확성이 강조 되었다고 보면 된다.오페라 프라우저에서 대부분 지원한다.

결과를 당장보려면 여기로 http://sianasiatiger.cafe24.com/study/5_html_input.html

<p><label>찾아보기:<input type="search"  /></label></p>
<p><label>천화번호:<input type="tel"  placeholder="02)123-4567" /></label></p>
<p><label>주소:<input type="url" /></label></p>
<p><label>이메일:<input type="email" multiple /></label></p>

위의것은 간단한예 대부분우리가 기존에 입력하던 텍스트 타입이 명확하게 분류되었다.search는 찾아볼떄 tel은 전화번호 입력으로 특정한 입력 방식은 없지만  placeholder로  입력값 힌트를 준다. 위의 예는 xx)xxx-xxxx방식으로 입력하라고 예를들어주고있다.url은 경로주소 입력 email은 이메일로 multiple입력으로 콤마로 여러개 입력가능하게 해준다.

년,월,날짜,시간

date의 경우 달력이 나온다! 오페라에서 확인가능. step속성은 달력중 날짜인데.. 4를 입력시 4의배수만 지정할수있다. 출력에서 선택될 수도 있고, 2010-07-15 이형태로 입력도 가능하다. month역시 마찬가지 단지 날짜를 정하지 않는다. time의 경우는 12:34:56:123 형식이다.시분초 1/1000 여기서step속성은 초를이야기한다.

<p><label>년월날짜:<input type="date" step="4" /></label></p>
<p><label>년월:<input type="month" step="2" /></label></p>

step속성의 차이

시간에서 디폴트값은 60이다. 아래 예와같이 step값에따라 소수점자리 까지 입력가능하다.

<p><label>시간:<input type="time"  step="60" /></label></p>
<p><label>시분초:<input type="time"  step="1" /></label></p>
<p><label>시분초.소수:<input type="time"  step="0.1" /></label></p>

위의 그림은 오페라에서의 실행 결과 이다

그외

<p><label>UTC일자:<input type="datetime"  /></label></p>
<p><label>지역별:<input type="datetime-local"  /></label></p>
<p><label>주:<input type="week" step="1" /></label></p>

<p><label>숫자:<input type="number"step="1"  /></label></p>
<p><label>범위임력 스크롤:<input type="range"  />크롬사파리오페라</label><

<p><label>색깔:<input type="color"  /></label></p> 

<p><label>파일:<input type="file" /> 파폭크롬오페라</label></p>

datetime : UTC 방법으로 일자를 표시한다. week : 한주를 입력할떄

range : 스크롤로 범위를보여준다.

file:입력할파일을 열게한다.

저작자 표시
신고

설정

트랙백

댓글

HTML5 meter 엘리먼트(element)

웹표준/HTML5 훑어보기 2010.07.14 16:24

HTML5 meter 엘리먼트(element)

현재의 상태가어느정도인지보여줄때 사용한다. 아래의 3개의 예는 같은뜻을 다른 방법으로 표현한 것이다.


<meter value="0.75"><img src="" alt=""></meter>
<meter value="6" max="8">6/8</meter>
<meter min="0" max="100" value="75" >75/100</meter>

1. 첫번째는 그림으로 철도를 보여주고 value로 현재상태를나타 내었다.

2. 두번째는 최대값을 8으로 잡아주고 value로 현재상태를나타 내었다.

3. 세번째는 최대(max) 최소값(min)을 잡아주고 value로 현재상태를나타 내었다.

저작자 표시
신고

설정

트랙백

댓글

HTML5 output 엘리먼트(element)

웹표준/HTML5 훑어보기 2010.07.14 16:03

HTML5 output 엘리먼트(element)

output 엘리먼트는 계산결과를 표현한다.

아래는 a + b = z 형식의덧셈결과를 결과를 보여준 예이다.


<form onsubmit="return false">
 <input name="a" type="number" step="any"> +
 <input name="b" type="number" step="any"> =
 <output onforminput="value = a.valueAsNumber + b.valueAsNumber">답</output>
</form>

현재는 오페라만 지원되다.아래는 오페라에서 캡쳐한것

http://sianasiatiger.cafe24.com/study/Html5_Formlink.html

저작자 표시
신고

설정

트랙백

댓글

HTML5 keygen 엘리먼트(element)

웹표준/HTML5 훑어보기 2010.07.14 15:42

HTML5 keygen 엘리먼트(element)

keygen은 비밀키와 공개키를 생성한다


<form id="test" action="test.php" method="post">
<p><keygen name="key"/></p>
<p><input type=submit value="Submit key..."/></p>
</form>

속성을 살펴보자

<keygen name="key" form="test" keytype="">

http://100.naver.com/100.nhn?docid=770223

form : form과 연계시킬떄사용한다 대상이될 form의 #id를 적는다.
keytype : 키타입을 지정한다 디폴트값은 rsa

rsa참조 : http://100.naver.com/100.nhn?docid=770223

저작자 표시
신고

설정

트랙백

댓글

HTML5 datalist 엘리먼트(element)

웹표준/HTML5 훑어보기 2010.07.14 15:25

HTML5 datalist 엘리먼트(element)

datalist 엘리먼트는 option엘리먼트 세트를 표현할 때 사용한다.
select와 차이점은 바로 표시되어나타나지않고 포커스 했을떄 나타난다.


<input type="text" list="test" />
<datalist id="test">
 <option value="어쩌고저쩌고">어쩌고저쩌고</option>
 <option value="dlfjgrhwjfjgrh">dlfjgrhwjfjgrh</option>
</datalist>


저작자 표시
신고

설정

트랙백

댓글

웹표준 폼(form) 코딩(1)

웹표준 2009.09.10 15:00

웹표준 폼(form) :: 필드셋(fieldset)과 레이블(label)

예시로 소스부터보자

이름:
     
   

fieldset:관련 정보를 하나로 묶는 역할을 한다.

legend: 필드섹의 목적 명시

label : 레이블 엘리먼트를 클릭하면 연결된 폼 엘리먼트에 포커스가 옮겨진다.또 접근성을 높일 수 있는데 lable사용시 스크린리더 프로그램이 관련된 폼요소와 정확하게 연결시켜준다

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바