메뉴 건너뛰기


Developer > Web Application

HTML5 HTML5 Forms

2013.11.13 23:37

푸우 조회 수:6861

다음은 HTML5에서 추가된 Form 입력 엘리먼트입니다.

HTML5에서는 기존에 JavaScript로 입력데이터의 오류를 검사하던 것을 크게 줄일 수 있게 하였습니다.

다음의 예제는 웹브라우저의 HTML5지원 여부에 따라 달리 보이거나 기능이 지원되지 않을 수 있습니다.



1. <label> 엘리먼트와 <input>엘리먼트 연결


일반적으로 <label>엘리먼트는 <input>엘리먼트의 이름을 붙이기 위해 사용된다.

<label>엘리먼트에 <input>엘리먼트를 연결하면 이름을 표시하는 것 외에도 <label>을 마우스로 선택하면 <input>엘리먼트가 선택되는 효과를 얻을 수 있다.


* <label>엘리먼트의 "for" 속성으로 <input> 엘리먼트의 "id"를 적으면 연결할 수 있다.

<label for="head_size">크기</label>
<input id="head_size" name="head_size" type="text">

<input> 엘리먼트를 <label>엘리먼트로 둘러싸면 연결할 수 있다.

<label>크기
    <input type="text">
</label>



2. 숫자 입력 <input> 엘리먼트


<input>엘리먼트에 type으로 number를 사용합니다.

min, max 속성으로 입력가능한 최소 값과 최대 값을 지정할 수 있습니다.

숫자 입력 <input> 엘리먼트에는 입력란 옆에 값을 변화시키는 버튼이 추가되는데 step을 통해 증감단계를 지정할 수 있습니다.

required라는 속성을 추가하여 꼭 값이 입력되어야 함을 알립니다.

<input type=number min=60 max=100 step=1>

다음은 실제 예 입니다.



3. 이메일 입력 <input> 엘리먼트


<input>엘리먼트에 type으로 email을 사용합니다.

"placeholder"  속성을 사용하여 작성예를 보여 줄 수 있습니다.

<input type=email placeholder="example@abcd.com">

다음은 실제 예 입니다.



4. 전화번호 입력 <input> 엘리먼트


<input>엘리먼트에 type으로 tel을 사용합니다.

"placeholder"  속성을 사용하여 작성예를 보여 줄 수 있습니다.

전화번호 입력 패턴은 나라마다 다르고 다양하므로 정규식으로 패턴을 지정하여야 합니다.

<input type=tel placeholder="010-0000-0000" pattern="\d{2,4}\-?\d{3,4}\-?\d{4}">

다음은 실제 예 입니다.



5. 날짜 입력 <input> 엘리먼트


<input>엘리먼트에 type으로 date, month, week, time을 사용합니다.

min, max 속성으로 입력범위를 제한할 수 있습니다.

<input type=date min="1950-01-01" max="1999-12-31">
<input type=month min="2011-01" max="2011-12">
<input type=week min="2011-W01" max="2011-W52">
<input type=time min="08:00" max="17:00">

다음은 실제 예 입니다.



6. URL입력 <input> 엘리먼트


<input>엘리먼트에 type으로 url를 사용합니다.

<input type=url>

다음은 실제 예 입니다.



7. 컬러 입력 <input> 엘리먼트


<input>엘리먼트에 type으로 color를 사용합니다.

<input type=color>

다음은 실제 예 입니다.



8. 검색어 입력 <input> 엘리먼트


<input>엘리먼트에 type으로 search를 사용합니다. (현재는 사파리 브라우저에서만 정상적으로 지원하는 것 같음)

<input type=search>

다음은 실제 예 입니다.



9. 파일 입력 <input> 엘리먼트


<input>엘리먼트에 type으로 file를 사용합니다.

파일 업로드시 PC의 파일을 선택할 때 하용하는데 multiple 속성으로 다중 파일을 지정할 수 있으며

accept 속성에 MIME타입을 지정하여 지정된 파일만 선택 가능하게 할 수 있습니다.

(현재는 오페라 브라우저에서만 정상적으로 지원하는 것 같음)

<input type=file multiple accept="audio/mp3,text/*">

다음은 실제 예 입니다.




10. 범위 입력 <input> 엘리먼트


<input>엘리먼트에 type으로 range를 사용합니다.

min, max에 범위의 최소, 최대 값을 지정하고 step에 단계별 증감값과 value에 실제 값을 지정할 수 있습니다.

<input type=range min=0 max=10 step=1 value=5>

다음은 실제 예 입니다.




11. <output> 엘리먼트


<ouput>엘리먼트는 값을 출력하는 용도로 사용하는 엘리먼트입니다.

다음과 같이 사용할 수 있습니다.

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

다음은 실제 예 입니다.

+ =



12. <progress> 엘리먼트


진행상태를 표시하는 <progress> 엘리먼트는 다음과 같이 사용할 수 있습니다.

<p><progress id="p" max=100><span>0</span>%</progress></p>
<script>
    var progressBar = document.getElementById('p');
    function updateProgress(newValue) {
        progressBar.value = newValue;
        progressBar.getElementsByTagName('span')[0].textContent = newValue;
    }
</script>

다음은 실제 예 입니다.

0%



13. <meter> 엘리먼트


범위내 수치를 표시하는 <meter> 엘리먼트는 다음과 같이 사용할 수 있습니다.

<meter value=30 min=0 max=100>30%</meter>

다음은 실제 예 입니다.

30%



14. <input> 엘리먼트의 list 속성과 <datalist>엘리먼트 


입력 값을 특정 값으로 제한하기 위하여 <datalsit>엘리먼트에 값들을 지정하고 <datalist>엘리먼트의 id를 <input>엘리먼트의 list속성에 연결하여 사용할 수 있습니다.

<input type=text list=gender_list>
<datalist id=gender_list>
    <option value=male label=남>
    <option value=female label=여>
</datalist>

다음은 실제 예 입니다.



또한 <input> 엘리먼트에 multiple 속성을 지정하여 다중 선택이 가능하도록 할 수 있습니다.

<input type=text list=food_list multiple>
<datalist id=food_list>
    <option value=김치찌게>
    <option value=제육복음>
    <option value=짜장면>
    <option value=짬뽕>
    <option value=라면>
    <option value=김밥>
</datalist>

다음은 실제 예입니다.




크리에이티브 커먼즈 코리아 저작자표시 Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락/3.0에 따라 이용하실 수 있습니다