1. form 태그


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<title>제목</title>

</head>

<body>

<form>

<!--사용자가 입력하는 입력 양식-->

<input type="text" name="text"value ="입력텍스트"/><br>

<input type+"password" name="password" value="패스워드"/><br>

<input type="file" name="file" value="file"/><br>

<input type="checkbox" name="checkbox" value="yes"/><br>

<input type="radio" name="radio" value="남자"/><br>


<!--보이지 않는 입력 양식-->

<input type="hidden" name="hidden" value="안보임"/><br>


<!-- 버튼 -->

<input type="button" value="버튼"/><br>

<input type="reset" value="지움"/><br>

<input type="submit" value="확인"/><br>

<input type="image" src="http://placehold.it/100x100"/>

</form>

</body>

</html>


2.이름 입력 값 처리

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<title>제목</title>

</head>

<body>

<form name = "register" method="post" action="javascript:check();">

<fieldset>

<legend>입력양식</legend>

<table>

<tr>

<td><label for="name">이름</label></td>

<td><input id="name" type="text" name="user_name"></td>

</tr>

</table>

<input type="button" value="확인" onclick="check();" >

</fieldset>

</form>

</body>

</html>


3.자바스크립트 추가


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<title>제목</title>


</head>

<body>

<form name = "register" method="post" action="javascript:check();">

<fieldset>

<legend>입력양식</legend>

<table>

<tr>

<td><label for="name">이름</label></td>

<td><input id="name" type="text" name="user_name"></td>

</tr>

</table>

<input type="button" value="확인" onclick="check();" >

</fieldset>

</form>


<script type="text/javascript">

window.onload = function(){

document.register.user_name.focus();

}

function check(){

ff = document.register;

if(ff.user_name.value == "") {

alert("이름을 입력하세요");

ff.user_name.focus();

return;

}

ff.action = "ex01_proc.php";

ff.submit();

}

</script>

</body>

</html>


4. php

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<title>제목</title>


</head>

<body>

<? echo "입력한 이름 = ".$_POST["user_name"]." 입니다.<br>";

#문자와 문자를 연결할때에는 . . 으로 연결한다.

?>


</body>

</html>


5. 이름 입력. 성별 입력

#ex01.php

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<title>제목</title>


</head>

<body>

<form name = "register" method="post" action="javascript:check();">

<fieldset>

<legend>입력양식</legend>

<table>

<tr>

<td><label for="name">이름</label></td>

<td><input id="name" type="text" name="user_name"></td>

</tr>


<tr>

<td><label for="name">성별</label></td>

<td>

<input id="man" name="sex" type="radio" value="M"><label for="man">남자</label>

<input id="woman" name="sex" type="radio" value="W"><label for="woman">여자</label>

</td>

</tr>

</table>

<input type="button" value="확인" onclick="check();" >

</fieldset>

</form>


<script type="text/javascript">

function check(){

ff = document.register;

if(ff.user_name.value == "") {

alert("이름을 입력하세요");

ff.user_name.focus();

return;

}


if(ff.sex[0].checked == false && ff.sex[1].checked == false) {

alert("성별을 체크하세요");

return;

}

ff.action = "ex01_proc.php";

ff.submit();

}

</script>

</body>

</html>

#ex01_proc.php

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<title>제목</title>


</head>

<body>

<? 

echo "입력한 이름은 ".$_POST["user_name"]." 입니다.<br>";

$sex = $_POST["sex"];

if( $sex == "M") {

echo "체크한 성별은 남자 입니다.<br>";

} else {

echo "체크한 성별은 여자 입니다.<br>";

}

#문자와 문자를 연결할때에는 . . 으로 연결한다.

?>


</body>

</html>


6.패스워드

#ex01.php

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<title>제목</title>


</head>

<body>

<form name = "register" method="post" action="javascript:check();">

<fieldset>

<legend>입력양식</legend>

<table>

<tr>

<td><label for="name">비밀번호</label></td>

<td><input id="name" type="password" name="user_pwd"></td>

</tr>

<tr>

<td><label for="name">비밀번호 확인</label></td>

<td><input id="name" type="password" name="user_repwd"></td>

</tr>


</table>

<input type="button" value="확인" onclick="check();" >

</fieldset>

</form>


<script type="text/javascript">

window.onload = function(){

document.register.user_pwd.focus();

}


function check(){

ff = document.register;

if(ff.user_pwd.value == "") {

alert("패스워드를 입력하세요");

ff.user_pwd.focus();

return;

}


if(ff.user_repwd.value == "") {

alert("입력한 패스워드를 재입력 입력하세요");

ff.user_repwd.focus();

return;

}


if(ff.user_pwd.value != ff.user_repwd.value){

alert("패스워드가 일치 하지 않습니다.");

ff.user_repwd.value = "";

ff.user_repwd.focus();

return;

}

ff.action = "ex01_proc.php";

ff.submit();

}

</script>

</body>

</html>

#ex01_proc.php

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<title>제목</title>


</head>

<body>

<? 

echo "입력한 패스워드는 ".$_POST["user_pwd"]." 입니다.<br>";

echo "입력한 패스워드는 ".$_POST["user_repwd"]." 입니다.<br>";

#문자와 문자를 연결할때에는 . . 으로 연결한다.

?>


</body>

</html>


7.통합

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<title>제목</title>


</head>

<body>

<form name = "register" method="post" action="javascript:check();">

<fieldset>

<legend>입력양식</legend>

<table>


<tr>

<td><label for="name">이름</label></td>

<td><input id="name" type="text" name="user_name"></td>

</tr>


<tr>

<td><label for="name">성별</label></td>

<td>

<input id="man" name="sex" type="radio" value="M"><label for="man">남자</label>

<input id="woman" name="sex" type="radio" value="W"><label for="woman">여자</label>

</td>

</tr>

<tr>

<td><label for="name">비밀번호</label></td>

<td><input id="name" type="password" name="user_pwd"></td>

</tr>

<tr>

<td><label for="name">비밀번호 확인</label></td>

<td><input id="name" type="password" name="user_repwd"></td>

</tr>


</table>

<input type="button" value="확인" onclick="check();" >

</fieldset>

</form>


<script type="text/javascript">

window.onload = function(){

document.register.user_pwd.focus();

}


function check(){


ff = document.register;

if(ff.user_name.value == "") {

alert("이름을 입력하세요");

ff.user_name.focus();

return;

}


if(ff.sex[0].checked == false && ff.sex[1].checked == false) {

alert("성별을 체크하세요");

return;

}


if(ff.user_pwd.value == "") {

alert("패스워드를 입력하세요");

ff.user_pwd.focus();

return;

}


if(ff.user_repwd.value == "") {

alert("입력한 패스워드를 재입력 입력하세요");

ff.user_repwd.focus();

return;

}


if(ff.user_pwd.value != ff.user_repwd.value){

alert("패스워드가 일치 하지 않습니다.");

ff.user_repwd.value = "";

ff.user_repwd.focus();

return;

}

ff.action = "ex01_proc.php";

ff.submit();


}

</script>

</body>

</html>


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<title>제목</title>


</head>

<body>

<? 

echo "입력한 이름은 ".$_POST["user_name"]." 입니다.<br>";

$sex = $_POST["sex"];

if( $sex == "M") {

echo "체크한 성별은 남자 입니다.<br>";

} else {

echo "체크한 성별은 여자 입니다.<br>";

}

echo "입력한 패스워드는 ".$_POST["user_pwd"]." 입니다.<br>";

echo "입력한 패스워드는 ".$_POST["user_repwd"]." 입니다.<br>";

print_r($HTTP_POST_VARS);

#문자와 문자를 연결할때에는 . . 으로 연결한다.

?>


</body>

</html>


8.이용약관

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<title>제목</title>


</head>

<body>

<form name = "register" method="post" action="javascript:check();">

<fieldset>

<legend>입력양식</legend>

<table>



<tr>

<td><label for="name">이름</label></td>

<td><input id="name" type="text" name="user_name"></td>

</tr>


<tr>

<td><label for="name">성별</label></td>

<td>

<input id="man" name="sex" type="radio" value="M"><label for="man">남자</label>

<input id="woman" name="sex" type="radio" value="W"><label for="woman">여자</label>

</td>

</tr>

<tr>

<td><label for="name">비밀번호</label></td>

<td><input id="name" type="password" name="user_pwd"></td>

</tr>

<tr>

<td><label for="name">비밀번호 확인</label></td>

<td><input id="name" type="password" name="user_repwd"></td>

</tr>

</table>

</fieldset>

<fieldset>

<legend>약관</legend>

<table>

<tr>

<td><textarea name ="agree_text" rows="5" cols="70" readonly>사용자 이용약관 동의 내용 입니다. 학번 5112648 이름 : 김정빈 

기타문의 :321-321</textarea></td>

</tr>

<tr>

<td> <input type = "checkbox" id = "chk" name="agree_check" value ="F"><label for ="chk">동의함</label></td>


</tr>


</table>

</fieldset>

<input type="button" value="회원가입" onclick="check();" >

</form>


<script type="text/javascript">

function check(){

ff = document.register;


if(ff.user_name.value == "") {

alert("이름을 입력하세요");

ff.user_name.focus();

return;

}


if(ff.sex[0].checked == false && ff.sex[1].checked == false) {

alert("성별을 체크하세요");

return;

}


if(ff.user_pwd.value == "") {

alert("패스워드를 입력하세요");

ff.user_pwd.focus();

return;

}


if(ff.user_repwd.value == "") {

alert("입력한 패스워드를 재입력 입력하세요");

ff.user_repwd.focus();

return;

}


if(ff.user_pwd.value != ff.user_repwd.value){

alert("패스워드가 일치 하지 않습니다.");

ff.user_repwd.value = "";

ff.user_repwd.focus();

return;

}

if(ff.agree_check.checked == false) {

alert("이용약관에 동의 하세요.");

ff.agree_check.focus();

return;

} else {

ff.agree_check.value = "T";

}


ff.action="ex04_proc.php";

ff.submit();


}

</script>

</body>

</html>


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8"/>

<title>제목</title>


</head>

<body>

<? 


echo "입력한 이름은 ".$_POST["user_name"]." 입니다.<br>";

$sex = $_POST["sex"];

if( $sex == "M") {

echo "체크한 성별은 남자 입니다.<br>";

} else {

echo "체크한 성별은 여자 입니다.<br>";

}

echo "입력한 패스워드는 ".$_POST["user_pwd"]." 입니다.<br>";

echo "입력한 패스워드는 ".$_POST["user_repwd"]." 입니다.<br>";

print_r($HTTP_POST_VARS);

?>


</body>

</html>


'이전것 > 개발' 카테고리의 다른 글

php -> two-dimensional arrays  (0) 2016.07.06
php -> make table, array, triangle  (0) 2016.07.05
HTML5 (2)  (0) 2016.07.05
HTML5  (0) 2016.07.04
module (2)  (0) 2016.05.09
블로그 이미지

잉비니

,