본문 바로가기
Study/Web

JS Form 만들기

yewon__e 2020. 8. 21. 10:23

완성된 Form

 

 

 

JavaScript 를 이용해 이렇게 생긴 Form을 만들어 보자.

 

 

먼저, 몇 가지 조건을 만들었다.

  • 빨간색으로 표시된 부분은 필수 입력 (Required 를 추가해 자동으로 입력 검사를 할 수 있지만, javascript를 이용)
  • Company 이름은 5글자 이상
  • Email 유효성 검사
  • Phone 번호 검사

 

 

 

 

<style>
body {
	font-family: 'Times New Roman', Times, serif;
}

textarea {
	width: 240px;
	display: inline-block;
	overflow-y: scroll;
	height: 140px;
	resize: none;
	vertical-align: top;
}

label {
	width: 240px;
	display: inline-block;
}

input[type="radio"] {
	margin-bottom: 5px;
	width: 20px;
	margin-left: 243.7px;
}

div {
	margin-bottom: 10px;
}

span {
	color: red;
}
</style>

먼저 css 부분이다.

 

제일 밑에 있는 span 부분은, Form에서 필수 입력 부분으로 앞에 빨간색 표시를 따로 해주기 위한 것이다.

 

 

 

 

<script>
	function submitcheck() {
		var form = document.form;
		var Cname = document.getElementById("cname");
		var Fname = document.getElementById("fname");
		var Lname = document.getElementById("lname");
		var Email = document.getElementById("email");
		var Title = document.getElementById("title");
		var Phone = document.getElementById("phone");
		var Date = document.getElementById("date");
		if (Cname.value == "") {
			alert("회사명을 입력하세요!");
			Cname.focus();
			return false;
		} else {
			if (!CheckCname(Cname.value)) {
				alert("회사명을 5자 이상으로 입력해주세요");
				Cname.focus();
				return false;
			}
		}
		if (Fname.value == "") {
			alert("이름을 입력하세요!");
			Fname.focus();
			return false;
		}
		if (Lname.value == "") {
			alert("성을 입력하세요!");
			Lname.focus();
			return false;
		}
		if (Email.value == "") {
			alert("이메일을 입력하세요!");
			Email.focus();
			return false;
		} else {
			if (!CheckEmail(Email.value)) {
				alert("이메일 형식이 잘못되었습니다");
				Email.focus();
				return false;
			}
		}
		if (!Title.value) {
			alert("제목을 입력하세요!");
			Title.focus();
			return false;
		}
		if (!Phone.value) {
			alert("번호를 입력하세요!");
			Phone.focus();
			return false;
		} else {
			if (!CheckPhone(Phone.value)) {
				alert("번호 형식이 잘못되었습니다");
				Phone.focus();
				return false;
			}
		}
		if (!Date.value) {
			alert("날짜를 입력하세요!");
			Date.focus();
			return false;
		}
		if (!form.job.value) {
			alert("Job function을 선택하세요!");
			return false;
		}
	}

	function CheckEmail(str) {
		var goodemail = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
		if (!goodemail.test(str)) {
			return false;
		} else {
			return true;
		}
	}
	function CheckCname(str) {
		if ((str.length) < 5) {
			return false;
		} else {
			return true;
		}
	}
	function CheckPhone(str) {
		var regPhone = /(01[016789])[-](\d{4}|\d{3})[-]\d{4}$/g;
		return regPhone.test(str);
	}
</script>

 

  • 필수 입력
if (Cname.value == "") {
  alert("회사명을 입력하세요!");
  Cname.focus();
  return false;
}

이렇게 필수 입력란에 제대로 입력이 되지 않으면 알림창이 뜨도록 설정했다.

 

 

  • 회사명 이름 5글자 이상
else {
  if (!CheckCname(Cname.value)) {
    alert("회사명을 5자 이상으로 입력해주세요");
    Cname.focus();
    return false;
  }
}



function CheckCname(str) {
  if ((str.length) < 5) {
 	return false;
  } 
  else {
  	return true;
  }
}

CheckCname 함수를 불러 5글자 이상인지 확인한 후 그렇지 않으면 알림창이 뜨도록 했다.

 

 

  • 이메일 유효성 검사
if (Email.value == "") {
	alert("이메일을 입력하세요!");
  	Email.focus();
  	return false;
}

else {
	if (!CheckEmail(Email.value)) {
    alert("이메일 형식이 잘못되었습니다");
    Email.focus();
	return false;
}


function CheckEmail(str) {
    var goodemail = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
    if (!goodemail.test(str)) {
    	return false;
    } 
    else {
    	return true;
    }
}

이메일이 입력되었는지 확인 - CheckEmail 함수를 불러 이메일 형식이 맞게 되었는지 확인

 

 

  • 휴대폰 번호 검사
if (!Phone.value) {
    alert("번호를 입력하세요!");
    Phone.focus();
    return false;
  } 

else {
    if (!CheckPhone(Phone.value)) {
      alert("번호 형식이 잘못되었습니다");
      Phone.focus();
      return false;
    }
}


function CheckPhone(str) {
    var regPhone = /(01[016789])[-](\d{4}|\d{3})[-]\d{4}$/g;
    return regPhone.test(str);
}

휴대폰 번호 입력 확인 - CheckPhone 함수를 불러 형식에 맞는지 확인

 

 

 

 

<body>
	<fieldset style="width: 520px;">
		<form name="form" onsubmit="return submitcheck();"
			action="html_form_ok.php" target="_blank" method="post">
			<div>
				<label for="cname"><span>*</span>Company:</label> <input type="text"
					id="cname" name="cname">
			</div>
			<div>
				<label for="fname"><span>*</span>First name:</label> <input
					type="text" id="fname" name="fname">
			</div>
			<div>
				<label for="lname"><span>*</span>Last name:</label> <input
					type="text" id="lname" name="lname">
			</div>
			<div>
				<label for="email"><span>*</span>Email Address:</label> <input
					type="text" id="email" name="email">
			</div>
			<div>
				<label for="title"><span>*</span>Title:</label> <input type="text"
					id="title" name="title">
			</div>
			<div>
				<label for="phone"><span>*</span>Phone:</label> <input type="tel"
					id="phone" name="phone" placeholder="000-0000-0000">
			</div>
			<div>
				<label for="cancel">Cancel Registration:</label> <input
					type="checkbox" id="cancel" name="cancel" value="yes">
			</div>
			<div>
				<label for="date"><span>*</span>252 Training Session 2010:</label> <input
					type="date" id="date" name="date">
			</div>
			<div>
				<label><span>*</span>Job Function:</label> <input type="radio"
					id="cm" name="job" value="cm" style="margin-left: auto;"> <label
					for="cm">Campaign Management</label><br> <input type="radio"
					id="crm" name="job" value="crm"> <label for="crm">CRM
					Administration</label><br> <input type="radio" id="ed" name="job"
					value="ed"> <label for="ed">Email Deployment</label><br>
				<input type="radio" id="part" name="job" value="part"> <label
					for="part">Partner</label><br> <input type="radio" id="emp"
					name="job" value="emp"> <label for="emp">Employee</label>
			</div>
			<div>
				<label for="dietary">Dietary Requirements:</label> <input
					type="text" id="dietary" name="dietary">
			</div>
			<div>
				<label for="message">Expectations?:</label>
				<textarea name="message" rows="10" cols="30"></textarea>
			</div>
			<input type="reset" value="Reset" class="button"
				style="margin-left: 260px;"> <input type="submit"
				style="margin-left: 30px;" value="제출">

		</form>
	</fieldset>
</body>

 

기본적으로, 이 form 이 제출될 때 html_form_ok.php 가 실행되고 POST 방식으로 데이터가 전송된다.

 

<span>*</span> 은 필수 항목마다 넣었다.

반응형
저작자표시

'Study > Web' 카테고리의 다른 글

Node.js (2) - 웹 서버 만들기  (0) 2020.08.26
Node.js (1) - 시작 (설치하기)  (0) 2020.08.25
JS DOM  (0) 2020.08.21
JavaScript  (0) 2020.08.19
CSS  (0) 2020.08.18

'Study/Web' Related Articles

티스토리툴바