[HTML5] 폼 요소 (Form Elements)

HTML5의 새로운 폼 요소

• <datalist>
• <keygen>
• <output>

<datalist> 요소

<datalist> 요소는 <input> 요소를 위해 미리 정의된 옵션들의 리스트를 설명한다.

<datalist> 요소는 <input> 요소의 "자동완성" 특징 제공을 위해 사용된다. 사용자들은 입력 자료의 미리 정의된 옵션의 드롭다운 리스트를 보게될 것이다.

<input>요소의 리스트 속성에 <datalist> 요소와 함께 묶어서 사용한다.

예)

<input> 요소는 <datalist>에 미리 정의된 값과 함께한다.

<input list="browsers"> <datalist id="browsers">     <option value="Internet Explorer">     <option value="Firefox">     <option value="Chrome">     <option value="Opera">     <option value="Safari"> </datalist>

실행 화면

<keygen> 요소

<keygen> 요소의 목적은 사용자 인증에 보안된 방법을 제공하는 것이다.

<keygen> 태그는 폼에 키-패어 생성 필드를 특징하는 것이다.

폼이 전송될 때, 사적인 하나와 공적인 하나의 두 키가 생성된다.

사적인 키는 로컬에 저장되고 공적인 키는 서버로 전송한다. 공적 키는 나중에 사용자 인증을 위한 클라이언트 인증 생성에 사용되어진다.

예)

<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>

실행화면

<output> 요소
<output> 요소는 스크립트에 의해 동작된 것과 같은 계산된 결과를 재표현한다.

예)

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 + <input type="number" id="b" value="50">= <output name="x" for="a b"></output> </form>

실행화면