작업을 하다보면 FORM 은 입력형태가 있는 페이지에서 많이 사용이된다. 
요즘은 AJAX 를 통해 처리하기때문에 FORM 데이터가 흐름도가 기본형태를 많이 벗어나지만
아직까지는 기본형태를 통해 많이 사용되기 때문에 반드시 숙지하고 가는게 좋다. 

일반 FORM 연결

<form id="form" method="post">
	<input type="hidden" name="value" value="redinfo">
	<input type="text" name="id" value="" placeholder="아이디" required="required" autocomplete="new-password">
	<input type="password" name="pw" value="" placeholder="비밀번호" required="required" autocomplete="new-password">
	<input type="submit" value="submit">
</form>

 

JS 함수로 이벤트를 연결

<form id="formJavascript" method="post" onsubmit="return login();">
	<input type="hidden" name="value" value="111">
	<input type="text" name="id" value="" placeholder="아이디" required="required" autocomplete="new-password">
	<input type="password" name="pw" value="" placeholder="비밀번호" required="required" autocomplete="new-password">
	<input type="submit" value="submit">
</form>
<script>
	function login(){
		var $form = $('#formJavascript');
		var id = $form.find('input[name="id"]').val();
		if( id.length < 3){ alert("아이디는 3글자 이상 입력해 주세요."); return false;  }
		var pw = $form.find('input[name="pw"]').val();
		if( pw.length < 6){ alert("비밀번호는 6글자 이상 입력해 주세요."); return false;  }
		return true;
	}
</script

 

JQUERY 이벤트 핸들러 연결

<form id="formJquery" method="post">
	<input type="hidden" name="value" value="111">
	<input type="text" name="id" value="" placeholder="아이디" required="required" autocomplete="new-password">
	<input type="password" name="pw" value="" placeholder="비밀번호" required="required" autocomplete="new-password">
	<input type="submit" value="submit">
</form>
<script>
	$('#formJquery').submit(function(e){
		var $form = $(this);
		var id = $form.find('input[name="id"]').val();
		if( id.length < 3){ alert("아이디는 3글자 이상 입력해 주세요."); return false;  }
		var pw = $form.find('input[name="pw"]').val();
		if( pw.length < 6){ alert("비밀번호는 6글자 이상 입력해 주세요."); return false;  }
		return true;
	});
</script>