JS_폼 전송 : HTML과 JavaScript의 역할 개념정리

💡 Form 이란??

• 폼은 사용자의 정보를 서버로 전송하기 위해 사용됩니다.
• HTML 폼 태그의 action 속성을 통해 데이터 전송 시 이동할 페이지를 지정할 수 있습니다.
• 전송 버튼은 type="submit" 속성을 가진 버튼으로 설정해야 하며, 이는 나중에 발생할 수 있는 에러를 방지하는 데 도움이 됩니다.

---

html ▼

    <form action="success.html">
      <div class="my-3">
        <input type="text" class="form-control user-id" placeholder="아이디를 입력하세요">
       </div>
       <div class="my-3">
         <input type="password" class="form-control password" placeholder="비밀번호를 입력하세요">
       </div>
       <button type="submit" class="btn btn-primary">전송</button>
       <button type="button" class="btn btn-danger" id="close">닫기</button>
    </form> 

JavaScript사용 예시 ▼

document.querySelector(".btn-primary").addEventListener("click", e => {
  const userId = document.querySelector('.form-control.user-id'); // 아이디 입력 필드
  const password = document.querySelector('.form-control.password'); // 비밀번호 입력 필드

  if (userId.value === '') {
    e.preventDefault(); // 제출 중단
    alert("아이디를 입력해주세요");
  } else if (password.value === '') {
    e.preventDefault(); // 제출 중단
    alert("비밀번호를 입력해주세요");
  } else if(password.value.length <6 ){
    e.preventDefault(); // 제출 중단
    alert("비밀번호는 6자리 이상입니다");
  }
});

jQuery사용 예시 ▼

$('form').on('submit',function(e){
  if(document.querySelector(".user-id").value == ''){
    e.preventDefault();
    alert('아이디를 입력해주세요');
  } else if(document.querySelector(".password").value == ''){
    e.preventDefault();
    alert('비밀번호를 입력해주세요');
  } else if(document.querySelector(".password").value.length < 6){
    e.preventDefault();
    alert("비밀번호는 6자리 이상입니다");
  }
});

---

💡 HTML과 JavaScript에서의 폼 차이점

구분	HTML 폼	JavaScript 폼 처리
역할	사용자로부터 데이터를 입력받기 위한 구조 제공	사용자 입력 데이터 검증 및 처리
주요 요소	<form>, <input>, <textarea>, <select> 등	이벤트 리스너, 검증, 요청 등
기본 기능	입력된 데이터 서버 전송	데이터 검증, 제출 제어, 비동기 전송
페이지 동작	기본적으로 페이지 새로 고침 또는 이동	페이지 새로 고침 없이 동적 처리 가능

📌 주요요소 태그 해석
form:
사용자 입력을 서버로 전송하기 위한 구조를 정의 및 action 속성으로 데이터 전송 시 이동할 URL을 설정할 수 있습니다.

input:
다양한 형태의 데이터를 입력받기 위한 필드로 type 속성에 따라 텍스트, 비밀번호, 이메일 등 다양한 입력 형태를 지원합니다.

textarea:
긴 텍스트 입력을 위한 필드로, 여러 줄의 텍스트를 입력받을 수 있습니다. 기본적인 크기 조정이 가능합니다.
ex) 리뷰글, 설명, 피드백 등

<form>
  <label for="review">리뷰 작성:</label><br>
  <textarea id="review" name="review" rows="5" cols="40" placeholder="리뷰를 작성해주세요"></textarea><br>
  <button type="submit">제출</button>
</form>

select:
사용자가 선택할 수 있는 옵션 목록을 제공하는 드롭다운 메뉴입니다.
여러 개의 옵션 중 하나 또는 여러 개를 선택할 수 있게 설정할 수 있습니다.

---

👩🏻‍💻 폼은 웹 애플리케이션에서 사용자와 상호작용하기 위한 중요한 요소입니다.
사용자의 입력을 서버에 안전하게 전송하기 위해 폼의 구조와 JavaScript 와 jQuery 방법을 통해 HTML 폼의 기본 구조 및 사용자 입력 검증을 위한 두 가지 접근 방식을 공부하였습니다.
JavaScript는 유연성과 동적 처리를 가능하게 하며, jQuery는 간결한 문법으로 개발자의 편의성을 높여줄수있습니다.