<!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>
<script type="text/javascript">
function sendIt(){
// var f=document.myForm; // form 이름으로 접근하는 방법. 폼까지만 접근가능하다 myform.id 이런식은 불가능하다는 이야기
var f=document.forms[0]; // form 객체의 또다른 접근 방법
if(! f.id.value){ //아이디에 값이 없다면
alert("아이디를 입력 하삼...");
f.id.focus();
return;
}
if(f.id.value.length<5 || f.id.value.length>15){
alert("아이디는 5~15자만...");
f.id.focus();
return;
}
if(! f.age.value){
alert("나이를 입력 하삼...");
f.age.focus();
return;
}
if(isNaN(f.age.value)){ // isNaN(is Not A Number : 값이 숫자가 아니면 true
alert("숫자만 넣어라...")
f.age.focus();
return;
}
var age=parseInt(f.age.value); // 문자열을 정수로 변환
if(age<18){
alert("미성년자는 가라...");
f.age.focus();
return;
}
if(! f.hak.value){
alert("학력을 선택하삼...");
f.hak.focus();
return;
}
var n=0;
for(var a=0; a<f.hobby.length; a++){
if(f.hobby[a].checked) // 선택이 되어있다면 (checked는 선택되어있으면 true 아니면 false)
n++;
}
if(n==0){ // 취미가 하나도 선택되어 있지 않았다면 위의 반복문 for문에 의해 n값이 0이므로 알림메세지 출력
alert("취미는 하나 이상선택하삼...");
f.hobby[0].focus();
return;
}
alert("방가 방가...");
}
</script>
</head>
<body>
<form name="myForm" action=""> <!-- 액션 : 폼을 받을 주소 -->
아이디 : <!-- input 타입 텍스트 : 입력받는 칸이 생성됨 , name은 보통 자바스크립트의 함수에서 호출시 많이 사용됨 -->
<input type="text" name="id" size="100px" maxlength="10px" style="width :100 px; height:25px ;padding: 5px ; border : 0px"><br/>
이름 : <!-- input 타입 텍스트에 value 값이 들어가 있다면 보여지는 칸에 기본적으로 써져있다. -->
<input type="text" name="name" value="홍길동"/><br/>
나이 :
<input type="text" name="age"><br/>
패스워드 : <!-- input 타입 패스워드 : 표시가 *로 나옴 -->
<input type="password" name="pwd"/><br/>
성별 : <!-- input 타입 라디오 : 한개만 선택가능하게 되는 선택칸, checked가 되어있으면 화면이 출력되면서 기본적으로 체크되어있는 상태가 됨 -->
<input type="radio" value="남" name="gender" checked="checked"/>남
<input type="radio" value="여" name="gender"/>여<br/>
학력: <!-- select : 한개선택 가능(기본) -->
<select name="hak">
<option value="">:: 선택하삼 ::</option>
<option value="대졸" selected="selected"> 대졸 </option>
<option value="대졸"> 고졸 </option>
<option value="대졸"> 기타 </option>
</select><br/>
취미 <!-- input 타입이 체크박스 : 여러개 선택 가능(기본) -->
<input type="checkbox" value="운동" name="hobby">운동
<input type="checkbox" value="영화" name="hobby">영화
<input type="checkbox" value="독서" name="hobby">독서
<input type="checkbox" value="게임" name="hobby">게임
<input type="checkbox" value="낚시" name="hobby">낚시<br/>
이상형 <!-- select 멀티플 : 다중선택 가능 -->
<select name="it" multiple="multiple" size="5">
<option value="청순"> 청순</option>
<option value="여자면.."> 여자면..</option>
<option value="돈 많으면"> 돈 많으면..</option>
<option value="긴머리"> 긴머리</option>
</select><br/>
메모
<textarea rows="5" cols="50" name="memo"></textarea>
<br/>
<input type="reset" value="다시입력"> <!-- input 타입 리셋 : 버튼을 누르면 해당 form의 입력칸에 있는 값들이 모두 없어짐 -->
<input type="button" value="등록하기" onclick="sendIt();"> <!-- 버튼 타입에는 button submit image 등이 있음, button은 따로 submit()을 해줘야 데이터가 넘어감. onclick은 버튼을 눌렀을 때 발생하는 이벤트 -->
<br/>
</form>
</body>
</html>
'javascript' 카테고리의 다른 글
| 자바스크립트 기본 예제(회원약관 동의) (0) | 2013.06.25 |
|---|---|
| 자바스크립트 기본 예제(아이디 이미지) (0) | 2013.06.25 |
| 자바스크립트 기본 예제(항목 이동 / 사용자가 옵션 추가) (0) | 2013.06.25 |
| 자바스크립트 기본 예제(메일 입력 / 체크박스 모두체크) (0) | 2013.06.25 |
| 자바스크립트 기본 예제(사칙연산) (0) | 2013.06.25 |