컬러로 강조된 부분은 모두 새로 추가된 코드 입니다.
녹색은 새롭게 추가된 부분이나 기존 부분과 유사한 부분입니다.
노란색 부분은 URL을 확인하기 위한 부분입니다.
오렌지색 부분은 URL을 체크하기 위한 정규표현식 부분입니다.
URL확인 부분도 이메일 확인 부분과 크게 다르지 않지만 필수 항목이 아니기 때문에 공백확인은 하지 않습니다.
All parts highlighted in color are newly added codes.
The Green part is a newly added part and is similar to the existing part.
The yellow part is for checking the URL.
The orange part is the regular expression part for checking URL.
The URL confirmation part is not much different from the email confirmation part, but since it is not required, space checking is not performed.
아래의 링크를 통해서 테스트 할 수 있습니다
You can test it through the link below
https://freelifemakers.org/lec/form5.php
form5.php
<?php
$fileName = "./form_action5.php";
if(!is_file($fileName)){
$form_action_name = basename($_SERVER['PHP_SELF']);
}else{
$form_action_name = "./form_action5.php";
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 webform</title>
<!--이 부분은 html코멘트 영역 This part is the html comment area,마임타입설정 Mime type settings//-->
<meta charset="utf-8">
<!-- 모바일폰 스크린 옵션 Mobile phone screen options//-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--부트스트랩5 CDN방식 링크 Bootstrap 5 CDN method link//-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- 폼체크 innerHTML경고 메시지 출력 -->
<!-- Form check innerHTML warning message output //-->
<script>
function frmSubmit(){
//name input box에서 값을 가져오기
//Get value from name input box
var frmName = document.getElementById("name").value;
var frmEmail = document.getElementById("email").value;
var frmWebsite = document.getElementById("website").value;
var frmTitle = document.getElementById("title").value;
var frmPwd = document.getElementById("pwd").value;
var frmComment = document.getElementById("comment").value;
//정규표현식과 비교하여 이메일 및 url테스트
//Test the email and url against the regular expression
var regex = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
var emailCheck = regex.test(frmEmail);
var regexURL = /^(https?:\/\/)?([a-z0-9-]+\.)+[a-z]{2,7}(\/\S*)?$/i;
var URLCheck = regexURL.test(frmWebsite);
// 웹사이트주소가 공백이면 확인하지 않음.
// If the website field is blank, it does not check.
if(frmWebsite == ""){
URLCheck = true;
}
//에러메세지 초기화
//Reset error message
errorName.innerHTML = "";
errorEmail.innerHTML = "";
errorPwd.innerHTML = "";
errorWebsite.innerHTML = "";
errorTitle.innerHTML = "";
errorComment.innerHTML = "";
//값의 존재 여부체크 ,공백이면 경고창 띄우기
//Check whether value exists, if blank, display warning window
if(frmName == ""){
errorName.innerHTML ="<p>이름을 입력하세요(Please Enter Your Name)</p>";
return;
}else if(frmEmail == ""){
errorEmail.innerHTML ="<p>Email을 입력하세요(Please Enter Your Email)</p>";
return;
}else if(emailCheck == false){
errorEmail.innerHTML ="<p>정확한 Email을 입력하세요(Please enter the correct Email)</p>";
return;
}else if(URLCheck == false){
errorWebsite.innerHTML ="<p>정확한 URL을 입력하세요(Please enter the correct URL)</p>";
return;
}else if(frmTitle == ""){
errorTitle.innerHTML ="<p>제목을 입력하세요(Please enter the post title)</p>";
return;
}else if(frmPwd == ""){
errorPwd.innerHTML ="<p>패스워드를 입력하세요(Please Enter Your Password)</p>";
return;
}else if(frmComment == ""){
errorComment.innerHTML ="<p>글내용을 입력하세요(Please Enter The post content)</p>";
return;
}else{
frm.submit();
}
}
</script>
</head>
<body>
<div class="container-sm">
<form id="frm" action="<?php echo $form_action_name; ?>" method="post">
<div class="mb-3">
<label for="name" class="form-label">이름(Name):</label>
<input type="text" class="form-control" id="name" placeholder="당신의 이름을 입력하세요(Pleas enter your name)" name="name" required>
<div id="errorName"></div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="text" class="form-control" id="email" placeholder="ID@exmale.com" name="email" required>
<div id="errorEmail"></div>
</div>
<div class="mb-3">
<label for="website" class="form-label">Website:</label>
<input type="text" class="form-control" id="website" placeholder="example.com" name="website">
<div id="errorWebsite"></div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Title:</label>
<input type="text" class="form-control" id="title" placeholder="제목을 입력하세요(Please enter the post title)" name="title" required>
<div id="errorTitle"></div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div id="errorPwd"></div>
</div>
<div class="mb-3">
<label for="comment" class="form-label">Comment:</label>
<textarea id="comment"name="comment" rows="5" cols="40" class="form-control"></textarea>
<div id="errorComment"></div>
</div>
<div class="mb-3">
<div class="form-check mb-3">
<label class="form-check-label">Remember me</label>
<input class="form-check-input" type="checkbox" name="remember">
</div>
</div>
<button type="button" class="btn btn-primary" onClick="frmSubmit();">Submit</button>
</form>
</div>
</body>
</html> form_action5.php
<?php
if($_SERVER['REQUEST_METHOD'] == "POST"){
$f_name = $_POST['name'];
$f_email = $_POST['email'];
$f_title = $_POST['title'];
$f_website = $_POST['website'];
$f_comment = $_POST['comment'];
$f_pwd = $_POST['pswd'];
}
echo "REQUEST_METHOD:".$_SERVER['REQUEST_METHOD']."<br>";
echo "이름(NAME):".$f_name."<br>";
echo "이메일(EMAIL):".$f_email."<br>";
echo "제목(TITLE):".$f_title."<br>";
echo "웹사이트(WEBSITE):".$f_website."<br>";
echo "글 내용(CONTENT):".$f_comment."<br>";
echo "패스워드(PASSWORD):".$f_pwd;
?>