반응형
JavaScriptWeb Form을 이용하여 간단한 로그인 폼을 만드는 예제 입니다.
Web Form추가하기
사용자가 입력한 값을 "LoginProcess.aspx"에 넘겨서 입력한 값을
출력하도록 하는 예제입니다. CSS-0.2 외부스타일시트 참고 해주세요
"LoginProcess.aspx"에 입력 코드 입니다.
<%@ Page Language="C#" %>
<%
Response.Write(string.Format("아이디 : {0}<br/>암호:{1}"
, Request["txtUID"], Request["txtPwd"]));
%>
<input type="button" value="뒤로" onclick="history.go(-1);"/>
폼에서 입력한 결과값을 출력하도록 하겠습니다.
기본예제 입니다.
기본예제에 기능을 추가 하도록 하겠습니다. 사용된 속성(value,focus,action,lenght,select)
추가 기능
1. 아이디에 값이 없을때 아이디입력하라는 경고메세지 출력
2. 입력한 암호가 3이상 12자 이하일때 경고메세지와 출력과 포커스를 지정하여 전체 블록지정
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function CheckForm() {
//아이디 텍스트박스 객체 가져오기
var txtUID = window.document.LoginForm.txtUID; //고전방식
//체크
if (txtUID.value == "") {
window.alert("아이디 입력하삼");
txtUID.focus(); //해당 컨트롤에 포커스
return false; //현재 함수 멈춤
}
//암호 텍스트 박스 체크 : 길이
var txtPwd = window.document.getElementById("txtPwd"); //추천
if (txtPwd.value.length < 3 || txtPwd.value.length > 12) {
alert("암호를 3자 이상 12자 이하로 입력하시오.")
txtPwd.focus();
txtPwd.select(); //선택:블록씌우기
return false;
}
//동적변경
window.document.LoginForm.action = "LoginProcess.aspx";
window.document.LoginForm.submit(); //폼 내용 전송
}
</script>
</head>
<body>
<form id="LoginForm" name="LoginForm" action="LoginProcess.aspx"
method="post">
<table border="1" width="400">
<tr>
<td>아이디 : </td>
<td><input type="text" id="txtUID" name="txtUID"/></td>
</tr>
<tr>
<td>암호 : </td>
<td><input type="text" id="txtPwd" name="txtPwd"/></td>
</tr>
<tr>
<td colspan="2"><input type="button"value="로그인"
onclick="CheckForm()" /></td>
</tr>
</table>
</form>
</body>
</html>
진행화면입니다.
Web Form추가하기
사용자가 입력한 값을 "LoginProcess.aspx"에 넘겨서 입력한 값을
출력하도록 하는 예제입니다. CSS-0.2 외부스타일시트 참고 해주세요
<%@ Page Language="C#" %>
<%
Response.Write(string.Format("아이디 : {0}<br/>암호:{1}"
, Request["txtUID"], Request["txtPwd"]));
%>
<input type="button" value="뒤로" onclick="history.go(-1);"/>
폼에서 입력한 결과값을 출력하도록 하겠습니다.
기본예제 입니다.
기본예제에 기능을 추가 하도록 하겠습니다. 사용된 속성(value,focus,action,lenght,select)
추가 기능
1. 아이디에 값이 없을때 아이디입력하라는 경고메세지 출력
2. 입력한 암호가 3이상 12자 이하일때 경고메세지와 출력과 포커스를 지정하여 전체 블록지정
<head>
<title></title>
<script type="text/javascript">
function CheckForm() {
//아이디 텍스트박스 객체 가져오기
var txtUID = window.document.LoginForm.txtUID; //고전방식
//체크
if (txtUID.value == "") {
window.alert("아이디 입력하삼");
txtUID.focus(); //해당 컨트롤에 포커스
return false; //현재 함수 멈춤
}
//암호 텍스트 박스 체크 : 길이
var txtPwd = window.document.getElementById("txtPwd"); //추천
if (txtPwd.value.length < 3 || txtPwd.value.length > 12) {
alert("암호를 3자 이상 12자 이하로 입력하시오.")
txtPwd.focus();
txtPwd.select(); //선택:블록씌우기
return false;
}
//동적변경
window.document.LoginForm.action = "LoginProcess.aspx";
window.document.LoginForm.submit(); //폼 내용 전송
}
</script>
</head>
<body>
<form id="LoginForm" name="LoginForm" action="LoginProcess.aspx"
method="post">
<table border="1" width="400">
<tr>
<td>아이디 : </td>
<td><input type="text" id="txtUID" name="txtUID"/></td>
</tr>
<tr>
<td>암호 : </td>
<td><input type="text" id="txtPwd" name="txtPwd"/></td>
</tr>
<tr>
<td colspan="2"><input type="button"value="로그인"
onclick="CheckForm()" /></td>
</tr>
</table>
</form>
</body>
</html>
27-1 결과화면 입니다.
진행화면입니다.
27.Form.zip반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| 29.JavaScript - SelectedIndex (드롭다운리스트) (0) | 2009.08.12 |
|---|---|
| 28.JavaScript - Web Form 응용 (0) | 2009.08.11 |
| 26.JavaScript - HiStory (히스토리) (0) | 2009.08.11 |
| 25.JavaScript - location객체 (로케이션객체) (0) | 2009.08.11 |
| 24.JavaScript - document 객체 (도큐먼트 객체) (0) | 2009.08.11 |
Comments