HTML inputmode 속성 기준 정리

본문 중간의 쿠팡 추천 상품 구매시 쿠팡 파트너스에서 일정액의 수수료를 제공받습니다.

HTML inputmode 속성 기준 정리

inputmode는 브라우저가 어떤 가상 키보드를 보여 주면 좋을지 알려 주는 HTML 전역 속성이다. 2026년 7월 16일 확인 기준 WHATWG HTML Living Standard는 이 속성을 text, numeric, decimal, tel, email, url, search, none 같은 키워드를 받는 열거형 속성으로 정의한다. 모바일 폼에서 숫자 키패드, 전화 키패드, 검색용 엔터 키를 유도하고 싶을 때 주로 쓴다.

실무에서 중요한 점은 세 가지다. 첫째, inputmode는 입력 형식을 강제하는 속성이 아니라 입력 장치 힌트에 가깝다. 둘째, 같은 숫자 입력처럼 보여도 정수 PIN인지 소수 포함 금액인지에 따라 numeric과 decimal의 선택이 달라진다. 셋째, 이 속성은 input과 textarea뿐 아니라 contenteditable 편집 영역에도 적용할 수 있다.

inputmode는 정확히 무엇을 바꿀까?

WHATWG 표준은 inputmode를 "사용자가 내용을 입력할 때 어떤 입력 메커니즘이 가장 도움이 될지"를 지정하는 속성으로 설명한다. 즉 값 자체의 의미를 바꾸는 것이 아니라, 사용자 에이전트가 적절한 입력 UI를 고르는 데 참고하는 힌트다.

그래서 같은 텍스트 입력 필드라도 목적에 따라 키보드 모양을 다르게 유도할 수 있다. 예를 들어 숫자만 받는 회원번호라면 숫자 중심 키패드가 더 낫고, 검색창이라면 검색 동작에 맞는 엔터 키 라벨이 더 낫다.

어떤 요소에 적용할 수 있을까?

표준은 사용자 에이전트가 inputmode를 form control과 editing host에서 지원할 수 있다고 설명한다. 실무에서는 다음 두 경우를 먼저 생각하면 된다.

적용 대상	대표 예시	메모
폼 컨트롤	<input>, <textarea>	모바일 폼 입력 UX 개선에 가장 많이 사용한다
편집 가능한 영역	contenteditable가 붙은 요소	커스텀 에디터나 채팅 입력 UI에서도 쓸 수 있다

즉 네이티브 폼 요소만 대상으로 생각할 필요는 없다. 다만 편집 가능 영역은 브라우저별 편집 동작 차이가 존재할 수 있으므로, 실제 화면에서는 의도한 키보드가 나오는지 확인하는 편이 안전하다.

numeric와 decimal은 어떻게 나눌까?

표준 정의상 numeric은 숫자 입력에 맞는 가상 키보드이고, decimal은 locale에 맞는 소수 구분자까지 포함한 분수형 숫자 입력 키보드다. 즉 정수 위주의 입력과 소수 가능 입력을 구분하는 것이 핵심이다.

값	표준 설명의 핵심	무난한 사용 예
numeric	숫자 입력용 가상 키보드	PIN, 우편번호, 사번, 인증번호처럼 정수 중심 입력
decimal	숫자 키와 locale별 소수 구분자를 보여 주는 가상 키보드	금액, 수량, 비율, 좌표처럼 소수 입력 가능 값

예를 들어 6자리 인증번호 입력창이라면 numeric가 더 자연스럽다. 반대로 12.5kg, 3.14, 127.5 같은 값을 받는 필드라면 decimal이 의도와 더 가깝다.

type과 inputmode 중 무엇이 우선일까?

표준은 inputmode가 지정되지 않았거나 사용자 에이전트가 해당 상태를 지원하지 않을 때, type이나 pattern 같은 맥락 정보를 사용해 기본 가상 키보드를 결정할 수 있다고 설명한다. 이 말은 type과 pattern이 여전히 중요한 신호라는 뜻이다.

실무 기준은 단순하다. 데이터 의미가 분명하면 먼저 맞는 type을 선택하고, 키보드 힌트를 더 조정하고 싶을 때 inputmode를 추가한다. 예를 들어 전화번호라면 type="tel"이 우선이고, URL이라면 type="url"이 자연스럽다. 반대로 실제 데이터 타입은 텍스트로 유지하되 숫자 키패드만 유도하고 싶다면 type="text" inputmode="numeric" 같은 조합이 유용할 수 있다.

<input type="text" inputmode="numeric" pattern="[0-9]*">
<input type="text" inputmode="decimal">
<input type="search" inputmode="search">
<div contenteditable="true" inputmode="email"></div>

언제 tel, email, url, search를 쓰면 될까?

값	표준이 기대하는 키보드	선택 기준
tel	0~9와 *, #를 포함한 전화 키패드	전화번호, 내선 번호, ARS 입력처럼 전화식 배열이 편할 때
email	@, . 입력을 돕는 이메일용 키보드	로그인 ID가 아니라 실제 이메일 주소를 받을 때
url	/, ., 도메인 입력을 돕는 URL용 키보드	홈페이지 주소, callback URL, 링크 입력창일 때
search	검색에 최적화된 가상 키보드	검색 제출 동작을 더 분명하게 보여 주고 싶을 때

여기서도 원칙은 같다. 값의 의미를 표현하는 적절한 type이 있다면 그것을 먼저 쓰고, 사용자 경험을 더 명확히 하고 싶을 때 inputmode를 함께 고려한다.

none은 언제 써야 할까?

WHATWG 표준은 none을 "사용자 에이전트가 가상 키보드를 표시하지 않아야 한다"는 의미로 정의한다. 표준 설명상 자체 키보드 컨트롤을 렌더링하는 콘텐츠에 유용한 값이다.

따라서 일반 로그인 폼이나 일반 텍스트 입력에는 거의 필요하지 않다. 반대로 숫자 패드나 특수 입력 UI를 페이지가 직접 제공하는 경우라면 none이 맞을 수 있다. 다만 실제 브라우저 동작은 사용자 에이전트 구현에 좌우되므로, 커스텀 키패드 UI를 쓰는 화면이라면 기기별 확인이 필요하다.

 

 

pattern과 함께 써야 할까?

표준은 inputmode가 없을 때 pattern을 포함한 맥락 정보를 보고 기본 가상 키보드를 정할 수 있다고 설명한다. 이 점을 뒤집어 보면, pattern은 입력 형식 제한 쪽에, inputmode는 입력 편의 쪽에 더 가깝다.

예를 들어 숫자만 허용하고 싶다면 pattern, 서버 검증, 애플리케이션 검증이 필요할 수 있다. 여기에 모바일 키패드까지 숫자 중심으로 보이게 하려면 inputmode="numeric"를 함께 두는 구성이 읽기 쉽다. 즉 둘은 대체재라기보다 역할이 다른 보완 수단으로 보는 편이 정확하다.

실무에서 무난한 선택 기준은 무엇일까?

• 정수 중심 입력이면 numeric, 소수까지 허용하면 decimal을 먼저 검토한다.
• 전화번호, 이메일, URL, 검색은 가능한 경우 해당 의미에 맞는 값이나 입력 타입을 사용한다.
• 실제 데이터 타입은 텍스트지만 모바일 키패드만 조정하고 싶을 때 type="text"와 inputmode 조합이 유용하다.
• contenteditable 기반 입력 UI에도 같은 기준을 적용할 수 있다.
• 입력 형식 검증은 inputmode만으로 끝내지 말고 type, pattern, 서버 검증을 함께 본다.

FAQ

Q. 숫자만 받는 입력이면 항상 type="number"가 맞을까?

항상 그렇지는 않다. PIN, 우편번호, 계좌 식별자처럼 숫자로 보이지만 산술 연산 대상이 아닌 값은 텍스트로 다루는 편이 나을 수 있다. 이때는 type="text"에 inputmode="numeric"를 조합하는 방식이 실무에서 자주 쓰인다.

Q. inputmode="decimal"이면 소수 입력이 자동 검증될까?

그렇게 보면 안 된다. 표준 정의상 inputmode는 어떤 입력 메커니즘이 도움이 될지 지정하는 힌트다. 값 형식의 허용 여부와 검증은 별도 규칙으로 다뤄야 한다.

Q. 데스크톱 브라우저에서도 의미가 있을까?

핵심 효과는 가상 키보드를 쓰는 환경에서 더 크다. 다만 속성 자체는 데스크톱에도 문제 없이 둘 수 있고, 같은 마크업을 모바일과 함께 운용할 때 의미가 있다.

정리

inputmode는 "이 값이 무엇인가"를 정의하는 속성이라기보다 "어떤 키보드가 입력에 도움이 되는가"를 알려 주는 속성이다. 2026년 7월 16일 확인 기준 WHATWG HTML Living Standard를 기준으로 보면, 정수와 소수 입력을 numeric과 decimal로 나누고, 전화번호·이메일·URL·검색처럼 목적이 뚜렷한 입력에는 그에 맞는 값을 고르는 것이 핵심이다.

대부분의 모바일 폼에서는 데이터 의미를 먼저 정하고, 그 다음 type, pattern, inputmode를 역할별로 나눠 쓰는 편이 가장 안전하다. 특히 숫자처럼 보이는 문자열 입력에서 이 속성의 효과가 크다.

참고 자료

• WHATWG HTML Living Standard: Input modalities - the inputmode attribute