[HTML] Input 요소

HTML에서는 다양한 타입의 input 요소를 이용하여 사용자로부터 입력을 받을 수 있다.

대표적인 HTML input 요소는 다음과 같다.

• 텍스트 입력
• 비밀번호 입력
• 라디오 버튼
• 체크박스(check box)
• 파일 선택 박스
• 선택(select) 입력(drop-down 리스트)
• 문장 입력
• 버튼(button) 입력
• 전송 버튼(submit)
• 필드셋(fieldset)

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

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

• datalist 요소
• keygen 요소
• output 요소

datalist 요소

datalist 요소는 input 요소에 대해 미리 정의된 옵션 리스트를 명시해 주는 요소이다.

사용자는 텍스트를 바로 입력해도 되고, 드롭다운 메뉴에서 미리 정의한 옵션 중의 하나를 골라도 된다.

단, input 요소의 list 속성값이 datalist 요소의 id 속성값과 반드시 일치해야 연결된다.

<form action="주소경로">
    <input list="lectures" name="lecture">
        <datalist id="lectures">
            <option value="HTML">
            <option value="CSS">
            <option value="JAVA">
            <option value="C++">
        </datalist>
    <input type="submit" value="전송">
</form>

keygen 요소

keygen 요소의 목적은 사용자가 인증할 수 있는 안전한 방법을 제공하는 것이다.

keygen 요소는 사용자가 입력한 데이터를 암호화하여 서버로 전송한다.

이때 생성된 키(key)를 가지고 서버는 해당 사용자의 인증을 수행한다.

<form action="주소경로">
    사용자 : <br>
    <input type="text" name="username"><br>
    암호화방법 : <br>
    <keygen name="security"><br>
</form>

output 요소

output 요소는 스크립트(script) 등으로 실행된 계산의 결과를 바로 표시해주는 요소이다.

<form action="주소경로"
    oninput="total.value=parseInt(value01.value)/parseInt(value02.value)">
    <input type="number" id="value01" name="input01" value="20">
    /
    ( 0
    <input type="range" id="value02" name="input02" value="50" min="0" max="100">
    100 )
    =
    <output name="total" for="value01 value02"></output><br><br>
</form>

for 속성을 사용하여 해당 결과에 영향을 줄 수 있는 HTML 문서 내의 요소를 명시할 수 있다.

이때 for 속성의 속성값에는 해당 요소의 id 속성값을 공백으로 나열해야 한다.

요소	설명
<datalist>	input 요소에 대해 미리 정의된 옵션 리스트를 명시함.
<keygen>	form 요소 안에 두 개의 key를 만들어주는 생성기를 명시함.
<output>	스크립트 등으로 실행된 계산의 결과를 바로 나타냄.