<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.blueBox {border: 1px solid blue;}
.redBox{border: 1px solid red;}
</style>
<script type="text/javascript">
function nameFocus(){
var f=document.forms[0];
f.name.value="";
f.name.className="redBox";
}
function nameBlue(){
var f=document.forms[0];
if(! f.name.value){ // name에 값이 없다면
f.name.value="이름을 입력하세요";
}
f.name.className="blueBox";
}
function clause(){
var f=document.forms[0];
if(f.ch.checked)
f.btn.disabled=false;
else
f.btn.disabled=true;
}
</script>
</head>
<body>
<form action="">
이름 :
<!-- onfocus : 칸에 커서가 있을 때 , onblur : 칸에 커서가 없을 때 -->
<input type="text" name="name"
onfocus="nameFocus();"
onblur="nameBlue();"
class="blueBox"
value="이름을 입력하세요"><br/>
<input type="checkbox" name="ch" onclick="clause();">
약관에 동의하시겠습니까?
<br/>
<!-- disabled : 칸은 보이지만 사용할 수 없는 상태를 만든다. -->
<input type="button" value="회원가입" name="btn" disabled="disabled"/>
</form>
</body>
</html>
'javascript' 카테고리의 다른 글
| onkeyup / onkeydown / onkeypress 검증하기 (0) | 2013.06.25 |
|---|---|
| 자바스크립트 기본 예제(실행 즉시 작동시키는 소스, 실시간 시간) (0) | 2013.06.25 |
| 자바스크립트 기본 예제(아이디 이미지) (0) | 2013.06.25 |
| 자바스크립트 기본 예제(항목 이동 / 사용자가 옵션 추가) (0) | 2013.06.25 |
| 자바스크립트 기본 예제(메일 입력 / 체크박스 모두체크) (0) | 2013.06.25 |