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 |