코딩이란 무엇일까

49일차[JavaScript] (1)-form태그 요소 js로 가져오기 본문

국비지원수업

49일차[JavaScript] (1)-form태그 요소 js로 가져오기

둥구는 지굴다 2023. 1. 2. 19:29

form태그 요소 js로 갖고 오기

form태그에서 원하는 js에서 가져오는 방법

[방법 1]

const [변수명] = document.forms[인덱스].elements[0]

[방법 2]

const [변수명]=document.[form태그name].[원하는요소의name]

예시

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>10.유효성(validation)</title>
  </head>
  <body>
    <form action="10result.html" onsubmit="return form0_check()" name="frm0">
      <!-- document.forms[0].elements[0]-->
      <input type="text" name="user" placeholder="이름을 입력하세요" /><br />
      <!-- documents.forms[0].elements[1] -->
      <input type="email" name="email" placeholder="이메일을입력하세요" />
      <br />

      <input
        type="password"
        name="password"
        placeholder="패스워드 4자리 이상을 입력하세요"
        .
      />
      <!-- form태그안의 버튼 type=submit -->
      <button>전송</button>
      <!--onsubmit="return forms0_check()" 동작시킬 때-->
      <button onclick="btn_check()" type="button">전송2</button>
    </form>
    <form action="10result.html" id="momo">
      <button onclick="alert(document.forms[1].id)">테스트1</button>
      <!-- type은 submit id속성 값 가져오기 -->
    </form>
    <form action="" id="sana">
      <button>테스트2</button>
    </form>
    <script src="10validation.js"></script>
  </body>
</html>

JavaScript

function form0_check() {
  alert("1.forms,elements 객체 사용하기");
  const user = document.forms[0].elements[0];
  const email = document.forms[0].elements[1];
  alert("user :" + user.value);
  alert("email:" + email.value);

  if (user.value == "" || email.value == "") {
    alert("이름과 이메일은 필수 입력입니다.");
    return false;
  } else {
    return true;
  }
}
function btn_check() {
  alert("전송2.일반버튼이고 form name 속성값으로 입력요소 가져오기");
  const user = document.frm0.user;
  const email = document.frm0.email;
  const password = document.frm0.password;
  alert("user:" + user.value);
  alert("email:" + email.value);
  //submit을 직접 메소드로 합니다.

  if (user.value == "" || email.value == "") {
    alert("이름과 이메일은 필수 입력입니다.");
		return false;
  } else if (password.value.length < 4) {
    alert("비밀번호는 4자리 이상입력해주세요");
    password.focus();
    return false;
  } else {
    document.frm0.submit();
  }
}

화면 실행

  • 이름, 이메일, 패스워드를 받는 inpunt태그를 만들었다.
  • 전송버튼과 전송 2 버튼은 위의 form태그를 가져오는 방법을 다르게 해서 버튼을 만들어보았다. 기능은 똑같다.
  • 위의 form태그를 가져오는 방법을 다르게 해서 가져올 수 있다는 것을 보여주기 위해서 버튼을 두 개 만들고 메서드를 두 개 만들었습니다.
  • const user=document.forms [0]. elements [0]과 같이 인덱스를 사용하여 가져올 수도 있고
  • const user=document.frm0.user; 태그의 name으로도 가져올 수 있습니다.
  • 해당 태그를 가져왔다면 if문으로 이름과 이메일자리가 공백이라면 alert("이름과 이메일은 필수 입력입니다."); alert를 통해 메시지를 띄우고 return값을 false로 합니다.
  • return값이 false라면 form0_check( ) 메서드의 경우 form태그의 속성 중 하나인 onsubmit의 return값이 false이기 때문에 해당 form의 action의 url이 실행되지 않게 됩니다.

버튼 눌러보기

  • 이름과 이메일 구역에 아무것도 입력하지 않았을 때
  • js로 설정한 메시지가 잘 뜨는 것을 확인할 수 있습니다.

  • 이름과 이메일을 입력하고 비밀번호를 4자리 미만으로 입력했을 때
  • 비밀번호에 설정한 alert메시지도 잘 뜨는 것을 확인할 수 있습니다.

  • 모든 값을 설정한 값과 맞게 입력했을 때
  • form태그의 action url이 실행되었습니다.

저작자표시

'국비지원수업' 카테고리의 다른 글

50일차[JavaScript](2)-Date객체와 날짜  (0) 2023.01.03
50일차[JavaScript](1)-정규식  (2) 2023.01.03
46일차[JavaScript]배열  (0) 2022.12.28
45일차[JavaScript](2)-JavaScriptDocument객체  (2) 2022.12.27
45일차[JavaScript] -(1)변수와 상수  (0) 2022.12.27
'국비지원수업' Related Articles more
Comments