• 회원가입
  • 로그인
  • 구글아이디로 로그인

[etc] HTML - inputmode 전역속성 - 사용자 입력값 데이터타입 힌트 (= inputmode속성 = 인풋모드속성)

목차
  1. inputmode 정의
  2. inputmode 속성값

 

inputmode 정의

 

사용자가 요소나 요소의 콘텐츠 편집 때 입력 가능한 데이터 타입 힌트 제공하는 열거형 속성.

 


PS.

Chrome, Opera 브라우저 지원. (단, IE, Firefox, Safari는 지원 X)

 


inputmode 속성값

inputmode 속성에 사용 가능한 속성값 종류는 아래와 같음.

 

none

가상 키보드 사용 X. (페이지가 자체 키보드나 입력 컨트롤을 구현할 때 사용.)

 

text (기본값)

사용자의 현재 로케일에 맞는 표준 키보드 제공.

 

decimal

사용자의 로케일에 맞는 소숫점(보통 , 또는 .)을 제공하는 숫자형 키보드 제공. ※ 장치에 따라 음의 부호(-) 제공할 수도, 안 할 수도 있음.

 

numeric

숫자형 키보드를 제공. 소숫점은 없으며, 음의 부호는 제공할 수도, 제공 안 할 수도 있음.

 

tel

전화번호 키보드 제공. 숫자 0~9, 별표(*), 해시(샵, #) 키를 포함. 일반적인 경우, 반드시 전화번호를 필요로 하는 입력 칸에는 <input type="tel">을 사용해야 함.

 

search

검색 입력 칸에 최적화한 가상 키보드 제공. (예제) 엔터/제출 키가 "검색" 아이콘이나 레이블을 가질 수 있음. 일반적인 경우, 반드시 검색 질의 필요로 하는 입력 칸에는 <input type="search">를 사용해야 함.

 

email

이메일 입력에 최적화한 가상 키보드 제공. 보통 @ 키 등을 제공. 일반적인 경우, 반드시 이메일을 필요로 하는 입력 칸에는 <input type="email">을 사용해야 함.

 

url

URL 입력에 최적화한 가상 키보드를 제공. 보통 / 키를 누르기 편한 곳에 배치하며, 세션 히스토리 접근 기능 등을 추가하기도 함. 일반적인 경우, 반드시 URL을 필요로 하는 입력 칸에는 inputmode 대신 <input type="url">을 사용해야 함.

 


 


분류 제목
form HTML - <form> 태그 ★★★ - 입력폼양식 (= form태그 = 폼태그/폼요소) ※ 폼데이터 입력/…
form HTML - <input> 태그 ★★★ - 입력창 + 입력버튼 (= input태그 = 인풋태그) ※ 자동포커…
form HTML - <textarea> 태그 ★ - 여러줄 입력창 (= 텍스트입력영역 = 텍스트영역 = textar…
form HTML - <button> 태그 ★ - 클릭버튼 (= button태그 = 버튼태그) (HTML5수정)
form HTML - <select> 태그 ★ - 선택메뉴 (= select태그 = 실렉트태그 = 셀렉트태그) (H…
form HTML - <option> 태그 ★ - 선택사항 (= 옵션사항 = option태그 = 옵션태그)
form HTML - <optgroup> 태그 - 선택사항묶음 (= optgroup태그 = 옵트그룹태그, 옵션그룹태그…
form HTML - <label> 태그 ★ - input태그꼬리표 (= 인풋꼬리표 = 인풋명찰=인풋이름표 = lab…
frame HTML - <frame> 태그 - 프레임셋안 개별프레임창 (HTML5제외)
frame HTML - <frameset> 태그 - 프레임그룹 (= 프레임 레이아웃 = frameset태그 = fram…
frame HTML - <noframes> 태그 - frame대체내용 (= noframes태그 = 노프레임즈태그) (H…
frame HTML - <iframe> 태그 ★ - 타웹페이지삽입 (= iframe태그 = 아이프레임태그) ※ ifra… 1
image HTML - <img> 태그 ★ - 이미지태그 (= img태그) ※ 이미지 일부 자르기, ※ 링크 허버 시,…
image HTML - <map> 태그 - 이미지 특정 부분에 링크 (= map태그 = 이미지맵태그) ※ 이미지에 여러…
image HTML - <area> 태그 - 이미지맵에서 특정 링크 영역 (= area태그 = 에어리어태그) (HTML…
link HTML - <a> 태그 ★ - 링크걸기 (= 주소이동 = a태그 = a요소 = 에이태그 = 앵커태그 = 하…
link HTML - <link> 태그 ★ - 외부소스연결 (= link태그 = 링크태그) (HTML5수정) ※ 파비…
list HTML - <ul> 태그 ★ - 객체 ★ - 순서없는리스트 (= 순서없는목록태그 = ul태그 = 유엘태그/…
list HTML - <ol> 태그 ★ - 순서있는리스트 (= 목록태그 = ol태그 = 오엘태그 = 올태그) - (H…
list HTML - <li> 태그 ★ - 리스트목록 (= 리스트아이템 = li태그 = 리태그/리스트태그/엘아이태그…
3/18
목록
찾아주셔서 감사합니다. Since 2012