input type
1. text / 표준 키보드
<input type="text" name="user-name" />
2. number / 숫자 입력 최적화 키보드
-
다른 단말기
<input type="number" name="age" />
-
아이폰
<input type="number" pattern="\d*" name="age" />
3. tel / 전화번호 키보드
<input type="tel" name="phone" />
4. email / 이메일 키보드
<input type="email" name="email" />
5. url / url 최적화 키보드
<input type="url" name="url" />
6. date / 날짜 입력 UI
<input type="date" name="date" />
input inputmode
⚠ 주의 반드시 특정 자료형만 받아야 할 경우, inputmode 속성보다, type 유형을 사용하는 것을 권장함.
1. none / 가상키보드를 제공하지 않고 직접 구현
<input type="text" inputmode="none" />
2. text / 표준 입력 키보드
<input type="text" id="text" inputmode="text" />
3. tel / 전화번호 최적화 키보드 제공
<input type="tel" id="phone" inputmode="tel" />
4. email / 이메일 최적화 키보드 제공
<input type="email" id="email" inputmode="email" />
5. url / url 최적화 키보드 제공
<input type="url" id="url" inputmode="url" />
6. search / 검색 아이콘 return -> go
<input type="search" id="search" inputmode="search" />
7. decimal / 소숫점 - 숫자형 최적화 키보드 제공
<input type="text" inputmode="decimal" />
8. numeric / 정수소수 - 숫자형 최적화 키보드 제공
<input type="number" id="age" inputmode="numeric" />
인증코드 자동완성
- iOS에서 SMS로 들어오는 보안 코드를 가져와 자동으로 입력.
<input autocomplete="one-time-code"/>
문헌
참고 사이트 : 모바일 사용자를 위한 올바른 입력 요소 사용하기
