HTML5 새로운 폼 요소

1. input 요소

HTML5 에서는 강력한 form 속성을 지원한다. 때문에 어려운 스크립트 없이도 다양한 ui를 표현할 수 있다.

 

 

이메일 입력을 위한 email

<input type="email" value="some@email.com">

 

 

리소스 주소 입력을 위한 url

<input type="url" name="user_url">

 

 

일정한 범위의 숫자를 입력받기 위한 number

<input type="number" step="1" min="-5" max="10" value="0">

* min - 범위의 최소 값

* max - 범위의 최대 값

* step - 벙뮈 이동의 크기

 

 

일정한 범위의 숫자를 입력받기 위한 range

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

* min - 범위의 최소 값

* max - 범위의 최대 값

* step - 벙뮈 이동의 크기

 

 

날짜를 입력받기 위한 date

<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14">

<input type="time">
<input type="date">
<input type="datetime-local">
<input type="week">
<input type="month">

 

 

검색을 위한 search

<input type="search" results="10" placeholder="Search...">

 

 

전화번호 입력을 위한 tel

<input type="tel" placeholder="(555) 555-5555">

 

 

색상 입력을 위한 color

<input type="color" placeholder="#000000">

 

 

---

 

 

2. output요소

output 요소는 사용자가 입력을 받기 위한 요소가 아니라 서식에서 출역용으로 사용하는 요소이다.

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" name="a" min="0" max="100" step="1" value="0">
    +
    <input type="number" name="b" min="0" max="100" step="1" value="0">
    =
    <output name="x" for="a b">0</output>
</form>

 

 

---

3. keygen 요소

keygen은 폼 전송의 보안을 위한 키 쌍을 생성하는 요소

keygen요소를 작성하면 웹 브라우저가 제공하는 암호화의 정도가 표시된다

keygen요소가 포함된 form을 전송하면 생성한 공개키를 전송한다.

<form id="outputKeygen" action="action.php" method="post">
    <label for="key">암호화의 정도</label>
    <keygen id="key" name="key">
    <button type="submit">전송</button>
</form>

 

 

---

 

 

4. datalist 요소

datalist는 서식 요소에 입력 추천값을 제시해주는 요소.

검색 웹사이트 등에서 보이는 검색어 추천 등과 같은 기능이다.

input의 list값과 datalist의 id값으로 링크됨

<form id="datalistTest" action="00_action.php" method="post">
    <label for="keyword">검색어를 입력하세요</label>
    <input type="search" id="keyText" name="keyword" list="dataList_id">

    <datalist id="dataList_id">
        <option value="html5"></option>
        <option value="html5 video"></option>
        <option value="html5 강좌"></option>
        <option value="html5 canvas"></option>
        <option value="html5 demo"></option>
    </datalist>
    <button type="submit">전송</button> 
</form>

 

 

---

 

5. button 요소

button의 추가된 속성으로 변화.

form요소에 지정하는 속성이 모두 포함되어 있다.

하나의 서식요소를 서로 다른 서버측으로 전달 가능하게 한다.

<button type="submit" formaction=“button_action01.html" formmethod="get">action1로 전송</button>
<button type="submit" formaction=“button_action02.html" formmethod="post">action2로 전송</button>

 

 

---

 

 

6. form 요소

공통으로 사용될 수 있는 form요소가 추가되었다.

input과 같은 요소들이 기존엔 form요소 안에 포함되어 있어야 했지만 html5에서는 반드시 안에 들어가지 않아도 된다.

form 속성에 form요소 id값을 지정하면 연결 된다.

<form id="html5Form" name="html5Form" action="00_action.php" method="post"></form>

<label for="testText">단어를 입력하세요</label> 
<input type="text" id="testText" name="testText" form="html5Form">
<button type="submit" form="html5Form">전송</button>

 

 

---

 

 

7. 추가 된 속성들

 

 

1) placeholder

기존에 자바스크립트로 만들어야 했던 입력내용 안내가 HTML5에서는 placeholder 속성으로 가능해졌다.

<input type="tel" id="placeholder" name="placeholder" placeholder="숫자로만 입력해주세요">

 

 

2) autofocus

페이지가 로딩되었을때 마우스 커서가 포커싱된다. 기존 자바스크립트로 구현하던 방법이 HTML5에서는 간단히 구현 가능하게 되었다.

<label for="input01">첫 번째 서식요소</label>
<input type="text" id="input01" name="input01">
<label for="input02">두 번째 서식요소</label>
<input type="text" id="input02" name="input02" autofocus="autofocus">

 

 

3) required

입력값이 있는지를 검증. 없으면 경고 알림이 뜬다. 보이는 경고 알림은 브라우저마다 상이하다.

필수 입력 사항의 용도로 사용한다.

<form id="requiredTest" name="requiredTest" action="action.php" method="post">
    <label for="required">필수 입력 사항</label>
    <input type="text" id="required" name="required" required="required">
    <button type="submit">전송</button>
</form>

 

 

4) pattern

입력 값의 형식이 지정된 정규식과 일치하는지를 검증. \s는 비공백 문자를 의미

패턴이 일치하지 않으면 폼이 전송되지 않고 오류 메세지를 표시한다.

<form id="patternTest" name="patternTest" action="00_action.php" method="post">
    <label for="pattern1">다섯자리 숫자로 입력하세요</label>
    <input type="text" id="pattern" name="pattern" pattern=“\d{5}">
    
    <label for="pattern2">영문 3자리로 입력하세요</label>
    <input type="text" id="" name="" pattern="[A-Za-z]{3}">
    
    <label for="pattern3">전화번호 입력</label>
    <input type="text" id="" name="" pattern="(010|011)-\d{3,4}-\d{4}">
    
    <button type="submit">전송</button>
</form>

 

* pattern 관련 참고 사이트

http://html5pattern.com/

HTML5Pattern

 

 

5) min / max

입력값이 최소 및 최대 범위를 정해 검증한다. 다를경우 경고 알림이 뜬다.

<form id="minMaxTest" name="minMaxTest" action="00_action.php" method="post">
    <label for="minMax">50에서 100까지 숫자중 입력해 주세요</label>
    <input type="number" id="minMax" name="minMax" min="50" max="100" title="50부터 100까지 사이값으로 입력해 주세요">
    <button type="submit">전송</button>
</form>

 

 

6) step

숫자나 시간 단위 입력을 받는 서식 요소에서 입력 수치의 단위를 지정할 수 있는 속성

짝/홀수를 지정해서 받을 수 있고, 특정 단위(10분 단위 등)의 시간 필터링을 하여 받는 것도 가능하다.

<form id="stepTest" name="stepTest" action="00_action.php" method="post">
    <label for="step">짝수로 입력하세요</label>
    <input type="number" id="step" name="step" step="2">
    <button type="submit">전송</button>
</form>

 

 

7) novalidate

기본적으로 포함된 검증 기능을 사용하지 않을때 사용한다.

<form id="emailTest" name="emailTest" action="00_action.php" method="post" novalidate="novalidate">
    <label for="email">이메일을 입력하세요</label>
    <input type="email" id="email" name="email" required="required">
    <button type="submit">전송</button>
</form>