[JavaScript] Form 다루기

아래 강의를 수강하며 배운 내용을 정리한 글입니다

[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY

 

 

select•option 예제

<label for="fruit">과일 선택: </label>
<select id="fruit">
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="fineapple">파인애플</option>
</select>

 

 

input 예제

> 로그인

<label for="userName">이름: </label>
<input
  id="userName"
  type="text"
  placeholder="이름을 입력하세요"
  value="홍길동"
/>
<label for="password">비밀번호: </label>
<input id="password" type="password" />
<button id="login">로그인</button>

const $userName = document.getElementById("userName");
const $password = document.getElementById("password");
const $login = document.getElementById("login");

$login.addEventListener("click", () => {
  $userName.value = "홍길동2";
  console.log($userName.value);
  console.log($password.value);
});

$password.addEventListener("input", (e) => {
  console.log(e.target.value);
});