HTML/HTML5

HTML5 독학하기 HTML5 input 요소와 속성

헤리헬이 2023. 6. 10.

HTML5 input 요소

다양한 타입의 input 요소

1. 텍스트 입력

2. 비밀번호 입력

3. 라디오 버튼

4. 체크박스(check box)

5. 파일 선택 박스

6. 선택(select) 입력(drop-down 리스트)

7. 문장 입력

8. 버튼(button) 입력

9. 전송 버튼(submit)

10. 필드셋(fieldset)

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

datalist 요소
keygen 요소
output 요소

datalist 요소

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

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

<form action="URL">
<input list="a" name="a">
<datalist id="a">
<option value="A">
<option value="B">
<option value="C">
<option value="D">
</datalist>
<input type="submit" value="전송">
</form>

*datalist 요소는 사파리, 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

keygen 요소

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

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

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

<form action="URL">
사용자명 입력 : <br>
<input type="text" name="username"><br>
암호화방법 : <br>
<keygen name="security"><br>
</form>

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

output 요소

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

<form action="URL"
oninput="total.value=parseInt(value01.value)/parseInt(value02.value)">
<input type="number" id="value01" name="input01" value="1~ 100사이 값입력">
/
( 0
<input type="range" id="value02" name="input02" value="1~ 100사이 값입력" min="0" max="100">
100 )
=
<output name="total" for="value01 value02"></output><br><br>
</form>

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

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

OUTPUT 속성은 익스플로러에서 지원되지 않습니다.

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

추가된 input 요소

1. 숫자 입력(number)

2. 입력 범위 지정(range)

3. 색상 입력(color)

4. 날짜 입력(date)

5. 시간 입력(time)

6. 날짜와 시간 입력(datetime-local)

7. 연도와 월 입력(month)

8. 연도와 주 입력(week)

9. 이메일 입력(email)

10. URL 주소 입력(url)

11. 전화번호 입력(tel)

12. 검색어 입력(search)

숫자 입력(number)

<input>태그의 type 속성값을 "number"로 설정하면, input 요소는 사용자가 숫자를 입력할 수 있도록 해줍니다.

number 타입이 일반 text 타입과 차이점은 입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생깁니다.

또한 브라우저의 지원 여부에 따라 min 속성과 max 속성을 이용하여 숫자 선택에 제한값을 설정할 수도 있습니다.

number 타입은 익스플로러 9와 그 이전 버전에서 지원하지 않습니다.

<input type="number" name="favnum" min="1" max="100">

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
<title>HTML5 Input Types</title>
</head>
<body>
	<h1>number 타입 숫자 입력</h1>
	<form action=""action.jsp" id="frm" method="post">
	숫자 하나 고르기 <br>
	(1~100사이 숫자 고르기)<br>
	<input type="number" name="number" min="1" max="100">
	<input type="submit" value="전송">
</form>
</body>
</html>

입력 범위 지정(range)

<input>태그의 type 속성값을 "range"로 설정하면, input 요소는 사용자가 일정 범위 안의 값만을 입력할 수 있도록 해줍니다.

브라우저 지원 여부에 따라 값을 선택하기 위한 수평 조절바를 보여줍니다.

0 <input type="range" name="number" min="1" max="100"> 100

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>HTML5 Input Types</title>
</head>
<body>
	<h1>range 타입을 이용한 값의 입력</h1>
	<form action=""action.jsp" id="frm" method="post">
	이번에는 수평바를 조절해서 숫자고르기 <br><br>
	0 <input type="range" name="number" min="1" max="100"> 100
	<input type="submit" value="전송">
	</form>
</body>
</html>

색상 입력(color)

<input>태그의 type 속성값을 "color"로 설정하면, input 요소는 사용자가 색상을 입력할 수 있도록 해줍니다.

선택된 색상은 #을 제외한 6자리의 16진수 색상값으로 전송됩니다.

브라우저 지원 여부에 따라 색상을 선택하기 위한 도구를 보여줍니다.

기본문법

<input type="color" name="colors" value="#aa0132">

<!DOCTYPE html>
	<html lang="ko">
<head>
	<meta charset="UTF-8">
<title>HTML5 Input Types</title>
</head>
<body>
	<h1>color 색상 선택 input 타입</h1>
	<form action=""action.jsp" id="frm" method="post">
	색 고르기 :<br><br>
	<input type="color" name="colors" value="#aa0132">
	<input type="submit" value="전송">
</form>
</body>
</html>

날짜 입력(date)

<input>태그의 type 속성값을 "date"로 설정하면, input 요소는 사용자가 날짜를 입력할 수 있도록 해줍니다.

브라우저 지원 여부에 따라 날짜를 선택하기 위한 캘린더를 보여줍니다.

또한, min과 max 속성을 사용하여 날짜 선택에 제한값을 설정할 수도 있습니다.

기본 문법

<input type="date" name="selectday">

//제한값 설정 <input type="date" name="selectday" min="1900-01-01" max="2100-12-31">

<!DOCTYPE html>
	<html lang="ko">
<head>
	<meta charset="UTF-8">
<title>HTML5 Input Types</title>
</head>
<body>
	<h1>date 타입을 이용한 날짜 선택</h1>
<form action=""action.jsp" id="frm" method="post">
	날짜 선택하기<br>
	<input type="date" name="selectday">
	<input type="submit" value="전송">
</form>
</body>
</html>

시간 입력(time)

<input>태그의 type 속성값을 "time"로 설정하면, input 요소는 사용자가 시간을 입력할 수 있도록 해줍니다.

브라우저 지원 여부에 따라 시간을 선택하기 위한 도구를 보여줍니다.