프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[SCRIPT] INPUT 요소 공용속성 및 기본입력 설정 ime-mode

2017.12.21
북마크 [출처 이동]    작성자 정보
INPUT 공용속성

** list 속성
- 웹 개발자가 직접 입력 후보값을 제공하는 기능
- 입력 후보값은 datalist 요소를 사용하여 마크업한다.
- http://relation.co.kr/images_board/board_system_publishing/36/demo1.html


**required
- 해당폼 컨트롤이 필수 속성인지 아닌지를 나타내는 논리속성
- required속성을 지정한 컨트롤에 값을 입력하지 않은 상태로 서버로 데이터를 전송할 경우 에러메세지가 웹브라우져에 출력된다.
- http://relation.co.kr/images_board/board_system_publishing/36/demo2.html


** pattern
- 폼 컨트롤에 입력하는 입력값의 정규 표현식을 의미한다.
- 정규식 표현 형식으로 입력값의 형식을 제한 할수 있으며, 이때 title 속성을 사용하여 정규 표현에 대한 설명을 함께 제공하는 것이 필요하다.
- http://relation.co.kr/images_board/board_system_publishing/36/demo3.html



** multiple
- 두개 이상의 값을 지정할 때 사용하는 논리속성
- http://relation.co.kr/images_board/board_system_publishing/36/demo4.html



** step
- number 타입에 step값에 5를 지정하면 0,5,10....형태로 값이 입력된다.
- http://relation.co.kr/images_board/board_system_publishing/36/demo5.html



** max, min
- 최대,최소 값의 제한을 준다
- http://relation.co.kr/images_board/board_system_publishing/36/demo6.html



** disabled
- 해당 폼 컨트롤을 할수 없도록 할때 사용
- http://relation.co.kr/images_board/board_system_publishing/36/demo7.html



** form
- input 요소가 나타내는 폼 컨트롤을 지정한 from 요소와 연결시킬때 사용한다.
- http://relation.co.kr/images_board/board_system_publishing/36/demo8.html
- HTML4와 XHTML1.0 : 전송 데이터는 form 요소안에 마크업
- HTML5 : form 속성의 추가로 인해 폼 컨트롤을 forn 요소안에 마크업 하지 않아도 연결시키는 것이 가능해짐
- http://relation.co.kr/images_board/board_system_publishing/36/demo8.html


** readonly
- 읽기전용으로 지정하기 위해 사용하는 논리속성
- readyonly 속성으로 지정하면 사용자가 값을 변경할 수 없다.


** size
- 화면에 보이는 폼 컨트럴의 크기를 지정한다.
- 웹브라우져에 따라 전각글자와 크기 반각 글자 크기 중 어느것을 기준으로 하느냐에 따라 폼 컨트롤의 크기가 달라질 수 있다.
- <input type="text" size='10' id="userName" name="userName" >


** maxlengh
- 폼컨트롤에 입력 할 수 있는 최대 글자수를 지정할 때 사용한다.
- 국문,영문,을 구별하지 않고 각각 1문자로 계산한다.
- <input type="text" size='10' maxlength="10" id="userName" name="userName" >


** placeholder
- 사용자에게 해당 폼 컨트롤에 어떤 값을 입력해야하는지를 알리는 힌트로 사용.
- plcaeholder 속성은 HTML5 속성으로 크롬,사파리,오페라,IE10 이상에서만 지원됨
- IE10 이상임에도 불구하고 지원되지 않는다면 meta테그 확인할것,
<!-- meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" --> 안됨 하단으로 수정
..
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="X-UA-Compatible" content="IE=11.0000" >

- <input type="text" size='10' maxlength="10" id="userName" name="userName" placeholder="이름을 입력하세요" >


** autofocus
- 웹페이지가 로딩되자 마자 바로 폼 컨트롤로 포커스가 이동하도록 하는 논리속성
- <input type="text" autofocus="autofocus" id="userName" name="userName" >







인터넷에서 서식을 작성하다 보면 인풋박스( <input type=”text” /> )에 글을 쓸때,
한글을 쓰려고 하면 영문이 나오고, 영문을 쓰려고 하면 한글이 나오고 해서 좀 답답할 때가 있을것이라 생각합니다.
(저만 그런건가?)
아무튼, 그럴때 사용자를 조금만 더 생각한다면 답답하지 않고 사용하게 편할 수 있을 것 같습니다.
사용자를 배려하는 웹사이트 ㄱㄱ 출발!!
아주 간단합니다. 인풋박스를 가리키는 스타일에 “ime-mode”라는 속성을 주면 되는데요.

inactive : default 로 영문모드
active : default 로 한글모드
auto : 한/영 중 선택된 모드
disable : 영문만을 사용할 수 있는 모드

구체적인 사용방법은 이렇습니다.

<input type=”text” style=”ime-mode:inactive;” />

이런식으로 주면 되는데요. 뭐 어차피 스타일이기 때문에 이왕이면 스타일 시트에 주는게 낫겠지요?
<style type=”text/css”>
input.han {ime-mode:active;}
</style>
<input type=”text” class=”han” />

단. 크롬등 일부 타 브라우저에서 동작을 안할수가 있다.
크롬에서 안된다고 해서 정규식을 다시 찾음


=======================================================================================


<script type="text/javascript">

function han(obj) {
var pattern = /[^(ㄱ-힣)]/; //한글만 허용 할때
if (pattern.test(obj.value)) {
alert("한글만 허용합니다.");
obj.value = '';
obj.focus();
return false;
}
}
function eng(obj) {
var pattern = /[^(a-zA-Z)]/; //영문만 허용
if (pattern.test(obj.value)) {
alert("영문만 허용합니다.");
obj.value = '';
obj.focus();
return false;
}
}
function all(obj) {
var pattern = /[^(ㄱ-힣a-zA-Z0-9)]/; //한글,영문,숫자만 허용
if (pattern.test(document.getElementById('name').value)) {
alert("한글,영문,숫자만 허용합니다.");
obj.value = '';
obj.focus();
return false;
}
}
</script>

한글이름 : <input type="text" name="kName" style="ime-mode:active;" onkeyup="han(this)"> <br/>
영어이름 : <input type="text" name="eName" style="ime-mode:inactive;" onkeyup="eng(this)"> <br/>

이 포스트 공유하기

전체목록