👩🏼‍💻바닐라 JS로 크롬 앱 만들기 : #4.0-4.2

change up·2023년 6월 7일

노마드코더 클론코딩

목록 보기

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은 입력값을 받을 수 있게 해준다.

change up

새싹이

이전 포스트

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 : #3.3-3.5

다음 포스트

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 : #4.0-4.2

노마드코더 클론코딩

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 : #3.3-3.5

👩🏼‍💻바닐라 JS로 크롬 앱 만들기 :#4.3-4.5

0개의 댓글