input tag
- type 웹상에서 데이터를 입력하는 방식
< input type = " " >
- text
- color
- radio
- checkbox
- Attribute
- autofocus
📖 text input
input type="text" placeholder = " 입력할 칸에 기본으로 출력되는 메세지 "
✍입력
<html>
<b>텍스트를 입력하세요: </b>
<input type="text" id="txtinput" placeholder="입력후 엔터" style="width:250px;">
</html>
<script>
document.getElementById("txtinput").onkeyup=function(e){
if(e.keyCode==13){ //keyCode 13 ==enter
r.innerHTML=this.value;
}
}</script>🖨출력
텍스트를 입력하세요 :
📖 color input
input type="color" value = "초기값"
✍입력
<html>
<input type="color" id="fcolor" value="#000000">
</html>
<script>
document.getElementById("bcolor").onchange=function(){
r.style.backgroundColor=this.value;
}
</script>🖨출력
📖 radio input
여러 선택지중 한가지를 선택
input type="radio" name="이름 설정"
for문으로 배열을 돌려 선택지에 대한 결과값을 설정 가능.
fsize[i].onclick=function(){}
🔍주의!
name 이 같은 것 중 한가지만 선택이 가능
다중 선택을 하려면 name 을 다르게 설정.
하나만 선택하도록 하려면 name 을 동일하게 설정.
✍입력
<html>
<br>
<b>글자크기 : </b>
<input type="radio" name="fsize" value="10px">10px
<input type="radio" name="fsize" value="20px">20px
<input type="radio" name="fsize" value="30px">30px
<input type="radio" name="fsize" value="35px" checked>35px
<br>
</html>
<script>
var fsize=document.getElementsByName("fsize");
for(var i=0;i<fsize.length;i++){
fsize[i].onclick=function(){
r.style.fontSize=this.value;
}
}
</script>🖨출력
글자크기 : 10px 20px 30px 35px
📖 checkbox
'클릭 or 해제' 로 선택지가 단 둘인경우
input type = "check box"
if 문을 사용해 script 에서 이벤트 처리 가능.
if(this.checked)
✍입력
<html>
<input type="checkbox" id="chkborder">테두리
</html>
<script>
document.getElementById("chkborder").onclick=function(){
if(this.checked)
r.style.border="10px groove gold";
else
r.style.border="1px solid gray";
}
</script>🖨출력
테두리
Attribute
autofocus
input 태그의 autofocus 속성은 페이지가 로드될 때 자동으로 포커스(focus)가 input 요소로 이동됨을 명시합니다.
autofocus 속성은 불리언(boolean) 속성입니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다. (출처:http://www.tcpschool.com/html-tag-attrs/input-autofocus)
