728x90
action의 default값은 자기자신!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 초기값은 자기자신 -->
<form action="자바스크립트가나온이유.html"></form>
</body>
</html>
자바스크립트가나온이유.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 초기값은 자기자신 -->
<form action="test.php" method="GET">
<table border="1">
<tr>
<td>아이디</td>
<td><input type="text" name="nm_aidi" value=""></td>
</tr>
<tr>
<td>암호</td>
<td><input type="password" name="nm_password" value=""></td>
</tr>
<tr>
<td><input type="submit" value="로그인"></td>
<td><input type="reset" value="다시쓰기"></td>
</tr>
</table>
</form>
</body>
</html>test.php
<?php
$aidi = $_GET["nm_aidi"];
echo "<h1>".$aidi."님 안녕하세요</h1>";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
자바스크립트가 처음 나온 이유는 사용자가 얼토당토 않은 값을 쓰고 전송버튼을
누르면 그 값이 제대로 된 값이 서버쪽에서 계속 체크해야되는, 곧 서버에 부하가
너무 많이 걸리는 문제를 막기 위함
-->
<!-- 초기값은 자기자신 -->
<!-- onsubmit은 전송 직전에 발생 -->
<!-- onsubmit="return false"는 절대 전송하지 않음 -->
<!-- form의 onsubmit 이벤트는 전송 직전에 발생하여, 전송여부를 컨트롤 할 수 있게 함 -->
<!-- <form action="test.php" method="GET" onsubmit="return false"> -->
<!-- true는 전송이 됨 -->
<!-- 이벤트에서 전송 여부 컨트롤 가능~ -->
<form action="test.php" method="GET" onsubmit="return true">
<table border="1">
<tr>
<td>아이디</td>
<td><input type="text" name="nm_aidi" value=""></td>
</tr>
<tr>
<td>암호</td>
<td><input type="password" name="nm_password" value=""></td>
</tr>
<tr>
<td><input type="submit" value="로그인"></td>
<td><input type="reset" value="다시쓰기"></td>
</tr>
</table>
</form>
</body>
</html>
아이디 비밀번호 빈칸이면 경고
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
자바스크립트가 처음 나온 이유는 사용자가 얼토당토 않은 값을 쓰고 전송버튼을
누르면 그 값이 제대로 된 값이 서버쪽에서 계속 체크해야되는, 곧 서버에 부하가
너무 많이 걸리는 문제를 막기 위함
-->
<!-- 초기값은 자기자신 -->
<!-- onsubmit은 전송 직전에 발생 -->
<!-- onsubmit="return false"는 절대 전송하지 않음 -->
<!-- form의 onsubmit 이벤트는 전송 직전에 발생하여, 전송여부를 컨트롤 할 수 있게 함 -->
<!-- <form action="test.php" method="GET" onsubmit="return false"> -->
<!-- true는 전송이 됨 -->
<!-- 이벤트에서 전송 여부 컨트롤 가능~ -->
<form action="test.php" method="GET" onsubmit="return f_yesOrNo()">
<table border=1>
<tr>
<td>아이디</td>
<td><input id="id_aidi" type=text name="nm_aidi" value=""></td>
</tr>
<tr>
<td>암호</td>
<td><input id="id_pass" type=password name="nm_password" value=""></td>
</tr>
<tr>
<td><input type="submit" value="로그잉"></td>
<td><input type="reset" value="다시쓸랭"></td>
</tr>
</table>
</form>
<script>
var v_aidi = document.getElementById("id_aidi");
var v_pass = document.getElementById("id_pass");
function f_yesOrNo() {
if (v_aidi.value.trim() == "") {
alert("너 아이디도 없니?");
return false; // 전송 거부
} else if (v_pass.value.trim() == "") {
alert("너 비밀번호도 없니?");
return false;
}
}
</script>
</body>
</html>
</html>
reset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
자바스크립트가 처음 나온 이유는 사용자가 얼토당토 않은 값을 쓰고 전송버튼을
누르면 그 값이 제대로 된 값이 서버쪽에서 계속 체크해야되는, 곧 서버에 부하가
너무 많이 걸리는 문제를 막기 위함
-->
<!-- 초기값은 자기자신 -->
<!-- onsubmit은 전송 직전에 발생 -->
<!-- onsubmit="return false"는 절대 전송하지 않음 -->
<!-- form의 onsubmit 이벤트는 전송 직전에 발생하여, 전송여부를 컨트롤 할 수 있게 함 -->
<!-- <form action="test.php" method="GET" onsubmit="return false"> -->
<!-- true는 전송이 됨 -->
<!-- 이벤트에서 전송 여부 컨트롤 가능~ -->
<form action="test.php" method="GET" onsubmit="return f_yesOrNo()">
<table border=1>
<tr>
<td>아이디</td>
<td><input id="id_aidi" type=text name="nm_aidi" value="22"></td>
</tr>
<tr>
<td>암호오</td>
<td><input id="id_pass" type=password name="nm_password" value="22"></td>
</tr>
<tr>
<td><input type="submit" value="로그잉"></td>
<!-- 최초 value값으로 돌아간다!! 리셋이아님 -->
<td><input type="reset" value="다시쓸랭"></td>
</tr>
</table>
</form>
<script>
var v_aidi = document.getElementById("id_aidi");
var v_pass = document.getElementById("id_pass");
function f_yesOrNo() {
if (v_aidi.value.trim() == "") {
alert("너 아이디도 없니?");
return false; // 전송 거부
} else if (v_pass.value.trim() == "") {
alert("너 비밀번호도 없니?");
return false;
}
}
</script>
</body>
</html>
</html>'화면구현 > HTML' 카테고리의 다른 글
| 루즈한비교와 엄격한비교 (0) | 2020.07.10 |
|---|---|
| 일반버튼으로submit (0) | 2020.07.09 |
| 공튀기기 (0) | 2020.07.08 |
| [php] location (0) | 2020.07.08 |
| [php] action과 get, post (0) | 2020.07.08 |