Input 요소
다양한 타입의 input 요소
HTML에서는 다양한 타입의 input 요소를 이용하여 사용자로부터 입력을 받을 수 있습니다.
대표적인 HTML input 요소는 다음과 같습니다.
1. 텍스트 입력
2. 비밀번호 입력
3. 라디오 버튼
4. 체크박스(check box)
5. 파일 선택 박스
6. 선택(select) 입력(drop-down 리스트)
7. 문장 입력
8. 버튼(button) 입력
9. 전송 버튼(submit)
10. 필드셋(fieldset)
HTML5에서 추가된 다양한 타입의 input 요소
HTML5에서 새롭게 추가된 다양한 타입의 input 요소는 다음과 같습니다.
1. datalist 요소
2. keygen 요소
3. output 요소
datalist 요소
datalist 요소는 input 요소에 대해 미리 정의된 옵션 리스트를 명시해 주는 요소입니다.
사용자는 텍스트를 바로 입력해도 되고, 드롭다운 메뉴에서 미리 정의한 옵션 중의 하나를 골라도 됩니다.
단, input 요소의 list 속성값이 datalist 요소의 id 속성값과 반드시 일치해야 연결됩니다.
예제
<form action="/examples/media/request.php">
<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="/examples/media/request.php">
사용자 : <br>
<input type="text" name="username"><br>
암호화방법 : <br>
<keygen name="security"><br>
</form>
output 요소
output 요소는 스크립트(script) 등으로 실행된 계산의 결과를 바로 표시해주는 요소입니다.
예제
<form action="/examples/media/request.php"
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 속성값을 공백으로 나열해야 합니다.
HTML5에서 추가된 다양한 타입의 input 요소
| 요소 | 설명 |
|---|---|
| <datalist> | input 요소에 대해 미리 정의된 옵션 리스트를 명시함. |
| <keygen> | form 요소 안에 두 개의 key를 만들어주는 생성기를 명시함. |
| <output> | 스크립트 등으로 실행된 계산의 결과를 바로 나타냄. |
