๐ฉ๐ผโ๐ป๋ฐ๋๋ผ JS๋ก ํฌ๋กฌ ์ฑ ๋ง๋ค๊ธฐ : #4.0-4.2
2
๋ ธ๋ง๋์ฝ๋ ํด๋ก ์ฝ๋ฉ
๋ชฉ๋ก ๋ณด๊ธฐ
6/13
Momentum
log In
#4.0-4.2 Login form์์ฑ
<!DOCTYPE html>
<html lang="en">
<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">
<link rel = "stylesheet" href="app.css">
<title>Momentum</title>
</head>
<body>
<form id="login-form">
<input
required
maxlength = "15"
type ="text"
placeholder="what is your name?"/>
<button>log In</button>
</div>
</body>
<script src = "app.js"></script>
</html>
<!--input์ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ์ํดform ์ฌ์ฉ / alret๋ฅผ ์ฌ์ฉํ์ง ์์๋ ์
๋ ฅ๊ฐ์ด ์์ผ๋ฉด ๊ฒฝ๊ณ
but formt์ฌ์ฉ์ ์น์ฌ์ดํธ๊ฐ ์๋ก๊ณ ์นจ๋๋ฏ๋ก ์๋ก๊ณ ์นจ ๋ฐฉ์ง์ฝ๋๋ฅผ ๋ฃ์ด์ค์ผํจ. -->
<!--input ์๋ ๋ค์ํ ํผ์ ๋ฃ์์๊ฐ ์๊ณ required๋ ํ์์์ / maxlength๋ ๊ธ์์ ์ต๋์ ์ ํ-->
const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form")
//document๋๋ ํ๋์ element(div id ='login-form' )๋ฅผ ํตํด์ ๊ฒ์์ด ๊ฐ๋ฅํ๋ค.
loginbutton.addEventListener("click" , onLoginBtnClick)
//input์ ๋ด์ฉ์ ๊ฐ์ ธ์ค๋ ค๋ฉด value property๋ฅผ ์ฐพ์๋ด์ผํ๋ค.
function onLoginSubmit(e) {
e.preventDefault();//๋ธ๋ผ์ฐ์ ๊ฐ ๊ธฐ๋ณธ๋์์ ํ์ง์๋๋ก ๋ง์์ค
console.log(loginInput.value);
}
loginForm.addEventListener("submit",onLoginSubmit)
//submit์ ์
๋ ฅ๊ฐ์ ๋ฐ์ ์ ์๊ฒ ํด์ค๋ค.
์์น์ด