๋ฐ์ํ
์๋ฐ์คํฌ๋ฆฝํธ๋ก ํ์๊ฐ์ ํผ ์ ํจ์ฑ ๊ฒ์ฌํ๊ธฐ
aleart ์ด์ฉํด์ ํ์๊ฐ์ ํผ์ ์ ํจ์ฑ์ ๊ฒ์ฌํ๋ค.
์ง๊ธ๊น์ง ๋ด๊ฐ ๊ณต๋ถํ ๊ฒ๋ค์ ์ต๋ํ ๋ด์ผ๋ ค๊ณ ํ๋ค.
์ค๋ ์ฒ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ฑด๋ค๊ธฐ ์์ํ๋ค.
์์ ์ฝ๋๋ฅผ ์๋ก ์ง๊ธฐ๋ณด๋ค๋,
์์ฑํ๋ HTML๊ณผ CSS ์ฝ๋๋ค์ ์ฌํ์ฉํ๋๊ฒ ๋์ ๊ฒ ๊ฐ์์
์ฝ๋๋ค์ ๋ค์ ์ดํด๋ดค๋ค.
๊ทธ๋์ ์ด๋ฐ์ ๋ฐ ์ํ์ฐฉ์ค(์ฝ์ง)๋ฅผ ๊ฒช์ ๋๋ถ์ธ์ง
๋ฉฐ์น ์ฐจ์ด์ธ๋ฐ๋ ๊ฐ์ ํด์ผํ ๋ถ๋ถ์ด๋, ์คํ ๋ฑ์ด ๋์ ์ ๋ณด์๋ค.
์ค๋ ์์ฑํ ์ฝ๋๋ค๋ ๊ฐ์ ํ ๋ ์ด ๋ ์ค๊ฒ ์ง?
์ฝ๋
<HTML>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>์์ฝฉ ์ฝ๋ฉ์ค์ฟจ ํ์๊ฐ์
</title>
<link rel="stylesheet" href="join.css">
<script src="join.js"></script>
</head>
<body>
<div class="main" style='box-shadow:1px 1px 7px 0px rgb(115, 115, 243)'>
<div class="header"><h1>์์ฝฉ ์ฝ๋ฉ์ค์ฟจ ํ์๊ฐ์
</h1></div>
<form name="join_form" action="join_ok.php" method="post">
<input id="email" name="email" type="email" placeholder="์ด๋ฉ์ผ์ ์
๋ ฅํด์ฃผ์ธ์." required />
<br>
<input id="name" name="name" type="text" placeholder="์ด๋ฆ์ ์
๋ ฅํด์ฃผ์ธ์." required />
<br>
<input id="pw" name="pw" type="password" placeholder="๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํด์ฃผ์ธ์." required />
<br>
<input id="confirm_pw" name="confirm_pw" type="password" placeholder="๋น๋ฐ๋ฒํธ๋ฅผ ๋ค์ ์
๋ ฅํด์ฃผ์ธ์." required />
<br>
<div class="num>">
<input type='tel' id="tel" name='userPhoneNumber' placeholder="010" maxlength="3" required /> -
<input type='tel' id="tel" name='userPhoneNumber' placeholder="1234" maxlength="4" required /> -
<input type='tel' id="tel" name='userPhoneNumber' placeholder="5678" maxlength="4" required />
</div>
<div class="cert">
<div class="cert1">
<span id="sp1">00000000</span>
<button id="certsubmit" type="submit" class="pure-button pure-button-primary">์ธ์ฆ๋ฒํธ์ ์ก</button>
</div>
<span id="sp2" >3:00</span>
<button id="certcheck" type="submit" class="pure-button pure-button-primary">์ธ์ฆ์๋ฃ</button>
</div>
<select name="region" id="region">
<option size="1" disabled selected>์ง์ญ์ ์ ํํ์ธ์.</option>
<option>์์ธ</option>
<option>๊ฒฝ๊ธฐ๋</option>
<option>์ ์ฃผ</option>
<option>์ถฉ์ฒญ๋</option>
<option>์ ๋ผ๋</option>
<option>๊ฒฝ์๋</option>
</select>
<br>
<div class="gender">
<input type="radio" id="female" value="female" name="gender" />์ฌ์ฑ
<input type="radio" id="male" value="male" name="gender" />๋จ์ฑ<br/>
</div>
<div class="join_btn">
<button id="back" type="button" onclick="history.back();">์ด์ ํ์ด์ง๋ก</button>
<button id="submit" type="button" onclick="joinform_check();">๊ฐ์
ํ๊ธฐ</button>
</div>
</form>
</div>
</body>
</html>
<CSS>
*{
box-sizing: border-box;
}
body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.main{
border: 2px solid gray;
padding: 10px 80px 30px;
margin-bottom: 30px;
margin-top: 20px;
border-radius: 10px;
width: 460px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header{
margin-bottom: 30px;
}
h1{
color: rgb(76, 18, 238);
font-size: 25px;
}
#email{
margin-bottom: 10px;
width: 350px;
height: 40px;
font-display: ;
}
#name{
margin-bottom: 10px;
width: 350px;
height: 40px;
}
#pw{
margin-bottom: 10px;
width: 350px;
height: 40px;
}
#confirm_pw{
margin-bottom: 10px;
width: 350px;
height: 40px;
}
.num{
margin-bottom: 5px;
}
#tel{
border: 1px solid gray;
width: 101.5px;
height: 40px;
border-radius: 10px;
text-align: center;
margin-top: 10px;
}
.cert{
margin-bottom: 5px;
float: right;
}
span{
margin-bottom: 10px;
margin-right: 10px;
}
#sp1{
color: blue;
font-size: 15px;
margin-right: 20px;
margin-left: 20px;
}
#sp2{
color: blue;
font-size: 15px;
margin-right: 40px;
margin-left: 40px;
}
.cert1{
margin-top: 20px;
margin-bottom: 20px;
}
#certsubmit{
background-color: whitesmoke;
border-radius: 5px;
border: 1px solid gray;
color: gray;
height: 30px;
width: 120px;
}
#certcheck{
background-color: whitesmoke;
border-radius: 5px;
border: 1px solid gray;
color: gray;
height: 30px;
width: 120px;
}
select{
margin-top: 20px;
margin-bottom: 20px;
width: 350px;
height: 40px;
}
.gender{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
font-size: 15px;
}
#join{
margin-bottom: 10px;
background-color: whitesmoke;
width: 350px;
height: 40px;
border-radius: 10px;
color: gray;
border: 1px solid gray;
}
.join_btn {
display: flex;
justify-content: center;
}
#back {
width: 100px;
height: 40px;
margin-right: 10px;
}
#submit {
width: 100px;
height: 40px;
}
#region {
text-align: center;
}
<JS>
//joinform_check ํจ์๋ก ์ ํจ์ฑ ๊ฒ์ฌ
function joinform_check() {
//๋ณ์์ ๋ด์์ฃผ๊ธฐ
let email = document.getElementById("email");
let name = document.getElementById("name");
let pw = document.getElementById("pw");
let confirm_pw = document.getElementById("confirm_pw");
let tel = document.getElementById("tel");
let female = document.getElementById("female");
let male = document.getElementById("male");
if (email.value == "") {
alert("์์ด๋๋ฅผ ์
๋ ฅํ์ธ์.");
email.focus();
return false;
}
if (name.value == "") {
alert("์ด๋ฆ์ ์
๋ ฅํ์ธ์.");
name.focus();
return false;
}
if (pw.value == "") {
alert("๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํ์ธ์.");
pw.focus();
return false;
}
if (confirm_pw.value !== pw.value) {
alert("๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํ์ง ์์ต๋๋ค.");
confirm_pw.focus();
}
if (!female.checked && !male.checked) {
alert("์ฑ๋ณ์ ์ ํํด์ฃผ์ธ์.");
female.focus();
return false;
}
let reg = /^[0-9]+/g;
if (!reg.test (tel.value)) {
alert("์ ํ๋ฒํธ๋ ์ซ์๋ง ์
๋ ฅํ ์ ์์ต๋๋ค.");
tel.focus();
return false;
}
document.join_form.submit();
function id_check() {
window.open("", "", "width=600, height=200, left=200, top=100");
}
}
๊ฒฐ๊ณผ
See the Pen Untitled by Kong Yang (@Kong-Yang) on CodePen.
๋ฐ์ํ
