HTML 입문 | HTML5 시작 | HTML5 기타 요소

HTML5에서 추가된 다양한 타입의 input 요소

HTML5에서 새롭게 추가된 다양한 타입의 input 요소는 다음과 같다.

datalist 요소

datalist 요소는 input 요소에 미리 정의된 옵션 목록을 제공해 주는 요소이다.
사용자는 텍스트를 바로 입력해도 되고, 드롭다운 메뉴에서 미리 정의한 옵션 중의 하나를 선택해도 된다.

작성하는 방법은 input 요소의 list 속성값과 datalist 요소의 id 속성값과 동일해야 연결이 된다.

좋아하는 과일은?
<input list="fruits" name="fruit">
<datalist id="fruits">
   <option value="apple">
   <option value="strawberry">
   <option value="banana">
   <option value="grape">
</datalist>

코드 실행

datalist 요소는 익스플로러 10 이전 버전에서는 지원하지 않는다.

keygen 요소

keygen 요소는 사용자가 입력한 데이터를 공개키 암호 방식의 키를 생성하여 폼을 전송한다. 폼 전송시 비밀 키와 공개 키가 동시에 생성되어 비밀 키는 클라이언트 측에, 공개 키는 서버 측에 전송된다.

이는 주로 사용자가 인증할 시에 사용할 수 있다.

<form>
  아래 값을 입력하고 전송 버튼을 누르면 암호화하여 전송하게 된다.
  <input type="text" name="username">
  <keygen name="security">
  <input type="submit" value="전송"> 
</form>

keygen 요소는 익스플로러에서 지원하지 않는다.

output 요소

output 요소는 스크립트(script)에 의해 실행된 계산의 결과를 바로 표시해준다

<form oninput="total.value=parseInt(val1.value) + parseInt(val2.value)">
  0<input type="range" id="val2" value="50" min="0" max="100">100
  + <input type="number" id="val1" value="20">
  = <output name="total" for="val1 val2"></output>
</form>

코드 실행

for 속성에는 해당 결과와 관련 있는 요소의 id를 공백으로 구분으로 나열한다.

output 요소는 익스플로러에서 지원하지 않는다.