[Moblie] html5 Web Form

1. input Element

● input 유형

유형	코드
날짜와 시간	<input type ="date"><input type ="time"> (type = month,week, datetime, datetime-local)
숫자 (슬라이드막대)	<input type ="range">
숫자(스핀 박스)	<input type ="number">
검색	<input type ="search">
URL	<input type ="url">
이메일	<input type ="email">
색상	<input type ="color">

● input 속성

    - max 와 min | 최소값 및 최대값 지정

    - list | text input 폼 요소에 키워드를 입력하는 순간 미리 입력되어 있는 내용과 입력하면 추천 키워드로 제안해 줌.  

    

    - pattern | 제약조건 지정 ex)  (010|011) - \D{3,4} -\D{4}

    - placeholder | 입력 힌트 표시 지정

    - required | 입력값 요구

    - autofocus

    - novalidate | 자동 유효성 검사 해제, <form>태그에 속성지정

3. output Element

계산결과를 나타냄.  

<!-- 
 계산을 수행하고 <output> 요소에 결과를 표시 : 
 for 속성은 계산에 사용된 element들을  나타낸다.
 Browser Support : Crome, Opera, Safari
-->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" name="a" value="50" />100
  +<input type="number" name="b" value="50" />
  =<output name="x" for="a b"></output>
</form>

4.  keygen Element

요소는 폼을 전송할 때 키를 생성하는 컨트롤. 

폼이 전송되면 비밀 키와 공개 키를 생성하여 비밀 키는 브라우저 쪽에 저장하고 공개 키는 서버로 전송.

      생성할 키의 타입을 지정하는 keytype속성은 "rsa"가 기본값으로 적용되며 키의 비트수가 나타남.

      전자 증명서 발행에 자주 사용된다.

keygen: <keygen name="key" type="rsa" />

5. progress Element

작업 직행 정도 나타내는 progress bar

<progress value="0.65" max="1"> 0 </progress>

 

6. meter Element

한정된 범위값을 그래픽형식으로 데이터 표시하고 싶을 때 (크롬의 경우 value값이 범위에 따라 red, yellow, green 표현됨)

       -  value | 측정된 값

       -  low | 입력된 데이터 값의 사용자가 허용할 수 있는 최저값

       -  high | 입력된 데이터 값의 사용자가 허용할 수 있는 최대값

       -  max | meter에서 인식할 수 있는 최고값

       -  min | meter에서 인식할 수 있는 최저값

       -  optimum | 최적의 측정값

       -  title | 툴팁

<meter value ="75" min="0" low="30" high="70" max="100" optimum ="100"> 75점 </meter>