[JavaScript] input 태그 총정리

input 태그 총정리

1. <input> : 평범하게 글자나 텍스트칸을 넣을 수있는 공간이 생기죠.
2. <input type=""> : 기존의 input에다가 type를 지정하여 type의 옵션을 넣으면,
다양한 모양이 됩니다. 단 입력이나 기타 등등의 모양 꼴로 변하죠.

3. <input type="text"> : 이건 <input>과 동일한 것인데, text를 넣을 수 있습니다.
4. <input type="password">: 이건 1번과 2번과 3번과 동일한데, 비밀번호로 지정되어 글자를 넣든 숫자를 넣든 **** <-이렇게 표시됩니다.

4. <input type="checkbox"> : 이건 체크박스로 나타납니다.
5. <input type="checkbox" checked> : 이건 체크박스의 선택된 것으로 나오죠.
6. <input type="checkbox" checked disabled> : 이건 체크되었다가 다시는 선택 못하게 하는거죠

7. <input type="radio"> : 이건 라디오 버튼으로 나타납니다.
8. <input type="radio" checked> : 이건 라디오 버튼의 선택된 것으로 나오죠.
9. <input type="radio" checked disabled> : 이건 선택되었다가 다시는 선택 못하게 하는거죠

10. <input type="hidden"> : 이건 숨김필드입니다. 값을 넘겨받을때 숨김속성으로 몰래 감춰지죠.
대부분 form태그의 중요한 속성을 사용할 때 하더군요.

11. <input type="image" src="이미지 경로및 주소"> 이건 이미지의 경로를 넣어 일반<img>태그 처럼 할 수 있습니다.
단 버튼이 이미지의 경로로 바뀌고,form 태그의 submit 태그와 함께 포함되어 있습니다.

12. <input type="reset"> : 이건 초기화 하는 버튼(영어로 submit 또는 초기화라고 나옴)
13. <input type="reset" value="초기화"> :  value값에 초기화라고하면 초기화라고 만들어줌

14. <input type="submit"> : 이건 전송버튼
15. <input type="submit" value="전송함"> : 전송버튼인데다가 버튼이름을 전송함 이라고 할 수있음.
16. <input type="file"> : 파일을 첨부할 때 사용하며, CSS와 곁들어서 사용 가능

＃ 기타 1
1. <input type="text" value="텍스트"> : 이렇게 사용하면 텍스트 칸에 텍스트 라고 글자가 이미 나와버림
2. <input type="text" value="텍스트 사이즈 지정" size="20"> : 텍스트 사이즈를 20만큼 지정
3. <input type="text" value="" name="text"> : php이나, 자바스크립트를 사용할때 변수를 넘거나 받을때 text라는
값을 받도록 name의 갑을 text라 지정하고 이 버튼의 태그 이름을 text라고 지정함
4. <input type="text" value="" name="text" style="border:1;color;red"> : 이건 CSS인데 여러모로 사용 할수있음.
굳이 설명을 하지 않겠음 CSS에서 color;red 라고 지정해주면, 텍스트칸의 글자색을 빨간색으로 지정해줌

＃ 기타2
특히 value는 <input>태그의 텍스트의 이름을 부여 할때 사용함
예를 들면, <input>과 <input value="텍스트칸 이에요"> 와 차이점을 알게 될 것임

각버튼마다 name값을 부여 할 수있음(name값은 자기마음대로 지정가능)
예를 들면) <input name="button">

각버튼마다, type를 지정할수 있다. 위의 설명을 보면 알겠죠?
type="text/password/hidden/radio/checkbox/file/submit/reset/image"

＃ 기타3
버튼에 CSS를 첨가하여 이쁘게 꾸밀 수있다.
<input name="button" style="background-color:purple;border-color:red;font-face:굴림;font-size:9pt;">
↑위의 처럼

# 기타4

disabled의 속성과 maxlength="15"의 속성
disabled속성은 input의 선택을 못하게 막아준다
<input type="text" value="" disabled>
<input type="text" value="ㅋㅋㅋ 금지욧" disabled>
<input type="radio" value="" checked disabled>
<input type="checkbox" value="" checked disabled>

그리고 maxlength 속성은 최대 글자 입력넣을 수있는 제한수입니다.
<input type="text" value="" maxlength="20"> <--이렇게 하면 글자 입력수를 20자리만 입력가능

 

# 내가 쓰는 input

.agentinput{
 clear: none;
 border: 1px solid;
 border-color: #4F6293;
 font-size:9pt;
 float: none;
}

 

# 선택 금지

① : <input type="text" name="1" size="15" maxlength="30" style="ime-mode:active;" value=""  >

    : input 기본 속성에 style을 줘서 테두리를 만들어줬다.     

② : <input type="text"  name="2" size="15" maxlength="30" style="ime-mode:active;" value="" 

        style="ime-mode:disabled;background:'#EAEAEA'">

    : input 바탕에 배경색을 깔았고 파란색 부분때문에 내용 수정이 안된다.

 

# 인풋라인 투명

<style type="text/css">
<!--
.invisible {
clear: none;
border: 0px none;
float: none;
background-color: #ffffff;
/* 배경을 투명하게 할경우에는 background-color: transparent; */
}
-->
</style>

<input name="textbox1" type="text" class="invisible" value="이건 input text box에요."><br>
<input name="button1" type="button" class="invisible" value="이건 input button이에요."><br>

 

INPUT {
font-size:9pt;
font-family: Gulim;
color: #666666;
border-style:solid;
border-color:CACACA;
border-width:1;
text-align:left;
}

 

 

# 인풋박스에 배경 이미지 넣기

<script language="JavaScript">
<!--텍스트 라인 이미지
function ImgNone() {
document.imgf.ipimg.style.backgroundImage = ""; //이미지를 사용 하지 않습니다.
}

function Imginsert() {
var text = document.imgf.ipimg.value; //텍스트라인의 밸류값
text = text.replace(/(^\s*)/g,"");
//위에 text 를 지우면 스페이스바로 만든 공백이 값으로 처리되어 이미지가 나오지 않습니다.

if (!text)
document.imgf.ipimg.style.backgroundImage = "url(이미지주소)"; //공백이라면 이미지를 넣습니다.
else
ImgNone(); //그렇지 않고 값이 존재 한다면 ImgNone() 실행 이미지를 넣지 않습니다.
}
//스크립트 끝-->
</script>


<form name=imgf>
<input type=text name=ipimg style="background: url(이미지주소) no-repeat center" onFocus="return ImgNone()" onBlur="return Imginsert()">
</form>

위에 소스 복사해서 해보세요 (이미지 주소는 설정 하세요)

먼저 텍스트 라인에서는

스타일로 style="background: url(이미지주소) no-repeat center" 이미지를 중앙에 넣고

텍스트 라인에 포커스가 위치했을때(onFocus: ImgNone() 사용)

텍스트 라인에 포커스가 나갔을때(onBlur: Imginsert() 사용)

즉, 글을 쓸려고하면 이미지가 사라지고 글이 써있을때 포커스를 빼도 이미지는 나타나지 않습니다.

반면 글을 쓸려고 하면 이미지가 사라지고 글을 쓰지 않고 다시 포커스를 빼면 이미지가 나타납니다.

 

* 인풋텍스트박스에서 키워드 기본 글 없어지게(네이버)
<input name="keyword" type="text" <? if($keyword=="") { ?>value="키워드 검색"<? } else { ?>value="<?=$keyword?>"<?} ?> size="11" maxlength="20" value="<?=$_GET[keyword]?>" style="border:1px solid; border-color: #B0BE97; color: #9C9C9C;" onClick=this.value="">



출처 : http://designhugs.tistory.com