HTML5 요소 - Input 요소의 타입

HTML 문서에서 <input> 요소는 사용자로부터 데이터를 입력받을 때 사용됩니다. 특히 <form> 태그 내에서 자주 활용되며, 다양한 유형의 입력을 지원합니다.

이 글에서는 자주 사용되는 기본 <input> 타입과 HTML5에서 추가된 새로운 타입을 정리하여 알려드립니다.

기본적인 <input> 요소 타입

HTML에서 가장 많이 쓰이는 input 타입들은 다음과 같습니다.

1. 텍스트 입력 (text)

사용자가 자유롭게 텍스트를 입력할 수 있는 기본 입력 필드입니다.

<input type="text" name="username">

2. 비밀번호 입력 (password)

입력된 값이 보이지 않고 ●●● 형태로 마스킹 처리되는 입력 필드입니다.

<input type="password" name="userpass">

3. 제출 버튼 (submit)

사용자가 입력한 폼 데이터를 서버로 전송할 수 있도록 합니다.

<input type="submit" value="전송">

4. 라디오 버튼 (radio)

여러 개의 옵션 중 하나만 선택할 수 있는 버튼입니다.

<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성

5. 체크박스 (checkbox)

사용자가 복수 선택할 수 있도록 하는 입력 요소입니다.

<input type="checkbox" name="hobby" value="reading"> 독서
<input type="checkbox" name="hobby" value="sports"> 운동

6. 일반 버튼 (button)

사용자 정의 동작을 수행하는 버튼입니다.

<input type="button" value="클릭하세요">

 

HTML5에서 추가된 새로운 <input> 타입

HTML5에서는 보다 다양한 입력 유형을 지원하도록 새로운 input 타입이 추가되었습니다.

1. 숫자 입력 (number)

숫자만 입력할 수 있도록 제한하며, 숫자를 조절할 수 있는 위/아래 화살표 버튼이 표시됩니다.

<input type="number" name="quantity" min="1" max="10">

2. 슬라이더 입력 (range)

숫자 범위 내에서 슬라이더를 조작하여 값을 선택할 수 있습니다.

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

3. 색상 선택 (color)

사용자가 색상을 선택할 수 있도록 합니다.

<input type="color" name="favcolor" value="#ff0000">

4. 날짜 입력 (date)

날짜 선택을 위한 캘린더 UI가 표시됩니다.

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

5. 시간 입력 (time)

사용자가 시간을 선택할 수 있도록 합니다.

<input type="time" name="meeting_time">

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

날짜와 시간을 동시에 선택할 수 있습니다.

<input type="datetime-local" name="appointment">

7. 연도 및 월 입력 (month)

연도와 월을 선택할 수 있는 입력 필드입니다.

<input type="month" name="pay_period">

8. 연도 및 주 입력 (week)

연도와 주(Week Number)를 입력할 수 있는 타입입니다.

<input type="week" name="work_week">

9. 이메일 입력 (email)

이메일 형식이 맞는지 자동으로 검증됩니다.

<input type="email" name="user_email">

10. URL 입력 (url)

URL 주소 형식이 맞는지 확인하는 입력 필드입니다.

<input type="url" name="website">

11. 전화번호 입력 (tel)

전화번호 입력을 위한 필드이며, 모바일 환경에서 전화번호 키패드를 활성화합니다.

<input type="tel" name="phone">

12. 검색어 입력 (search)

검색을 위한 입력 필드로, 텍스트 입력 시 입력값을 지울 수 있는 버튼(X) 이 표시됩니다.

<input type="search" name="query">

 

위에서 살펴본 것처럼 <input> 요소는 단순한 텍스트 입력 필드뿐만 아니라, 날짜, 색상, 숫자 입력 등 다양한 타입을 지원합니다. 특히 HTML5에서 추가된 타입들은 사용자 경험(UX)을 향상시키는 데 중요한 역할을 합니다.

<input> 활용 꿀팁

• placeholder 속성을 활용하면 입력 필드에 힌트 텍스트를 표시할 수 있습니다.
• required 속성을 추가하면 필수 입력 필드로 지정할 수 있습니다.
• pattern 속성을 활용하면 정규식을 사용하여 입력값을 제한할 수 있습니다.

<input type="email" name="user_email" placeholder="이메일을 입력하세요" required>

 

이제 <input> 요소를 더욱 효과적으로 활용하여 사용자 친화적인 입력 폼을 만들어 보세요!