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> 요소를 더욱 효과적으로 활용하여 사용자 친화적인 입력 폼을 만들어 보세요!
'Web > html' 카테고리의 다른 글
HTML5 멀티미디어 - 멀티미디어 파일 형식 (1) | 2025.02.05 |
---|---|
HTML5 요소 - Input 요소의 속성 (0) | 2025.02.05 |
HTML5 요소 - Input 요소 (3) | 2025.02.04 |
HTML5 요소 - 의미 요소 (1) | 2025.02.03 |
HTML5 - 추가요소 (1) | 2025.02.03 |