데베 쿼리
CREATE TABLE Users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50),
userid VARCHAR(50),
password VARCHAR(50),
email VARCHAR(100) );
html 코드
<!DOCTYPE html>
<html>
<head>
<title>Sign Up Page</title>
<style>
body {
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 758px;
width: 1024px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
form {
display: flex;
flex-direction: column;
width: 300px;
padding: 30px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
form input {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
form button {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: #fff;
cursor: pointer;
}
form button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<form id="signup-form">
<input type="text" id="username" placeholder="Username">
<input type="text" id="userid" placeholder="User ID">
<input type="password" id="password" placeholder="Password">
<input type="email" id="email" placeholder="Email">
<button type="button" onclick="submitForm()">Submit</button>
</form>
<script>
function submitForm() {
var username = document.getElementById("username").value;
var userid = document.getElementById("userid").value;
var password = document.getElementById("password").value;
var email = document.getElementById("email").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "signup.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
alert("You have been signed up successfully!");
}
}
xhr.send("username=" + username + "&userid=" + userid + "&password=" + password + "&email=" + email);
}
</script>
</body>
</html>
php 코드
테스트
스타일 수정
<!DOCTYPE html>
<html>
<head>
<title>Sign Up Page</title>
<style>
body {
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 758px;
width: 1024px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
form {
display: flex;
flex-direction: column;
width: 300px;
padding: 30px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
form input {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
form button {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: #fff;
cursor: pointer;
}
form button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<form id="signup-form">
<input type="text" id="username" placeholder="Username">
<input type="text" id="userid" placeholder="User ID">
<input type="password" id="password" placeholder="Password">
<input type="email" id="email" placeholder="Email">
<button type="button" onclick="submitForm()">Submit</button>
</form>
<script>
function submitForm() {
var username = document.getElementById("username").value;
var userid = document.getElementById("userid").value;
var password = document.getElementById("password").value;
var email = document.getElementById("email").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "signup.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
alert("You have been signed up successfully!");
}
}
xhr.send("username=" + username + "&userid=" + userid + "&password=" + password + "&email=" + email);
}
</script>
</body>
</html>
확인
테스트