Javascript 기초 13(form 관련 정리)

1. <form>

본론에 들어가기전 <form> 에 대해 간략하게 설명하자면, <form> 은 사용자로부터 값을 입력을 받는 양식을 만들기 위해서 사용한다. <input>, <textarea>, <select>, <button> 등과 같은 다양한 입력 요소들을 포함할 수 있다.

<form>
  <label for="name">닉네임 :</label>
  <input type="text" name="name" id="name">

  <label for="email">이메일 :</label>
  <input type="email" name="email" id="email">

  <label for="password">비밀번호 :</label>
  <input type="password" name="password" id="password">

  <button>제출</button>
</form>

const signupForm = document.querySelector('form');

signupForm.addEventListener('submit', event => {
 event.preventDefault(); // *

 console.log('제출이 완료되었습니다.');
});

---

주요 속성
action: form 데이터를 제출할 서버의 URL을 지정합니다.

method: form 데이터를 서버로 전송하는 방식을 지정합니다. 주로 GET 또는 POST 방식을 사용합니다.

enctype: 폼 데이터를 서버로 전송할 때 인코딩 방식을 지정합니다. 주로 "application/x-www-form-urlencoded"나 "multipart/form-data"를 사용합니다.

name: form 객체의 이름을 지정합니다. 자바스크립트에서 form을 조작할 때 사용될 수 있습니다.

target: form 데이터를 전송한 후 응답을 표시할 위치를 지정합니다.

---

 

주요 메서드
submit(): form 데이터를 서버로 제출합니다.

reset(): form의 입력 필드를 초기화합니다.

사용자 입력 값 가져오기

 

1. 'submit' 이벤트

submit 이벤트는 <form> 요소가 제출될 때 발생하는 이벤트

 

이벤트 핸들러를 등록하여 해당 이벤트가 발생했을 때 원하는 동작을 수행할 수 있습니다. 이를 위해 사용자의 제출하는 동작을 먼저 감지해야한다.

• HTML 속성으로 처리하기: HTML <form> 요소에 onsubmit 속성을 추가하고 자바스크립트 코드를 실행하도록 지정한다.

<form onsubmit="myFunction()">
  <!-- 폼 요소들 -->
  <input type="submit" value="Submit">
</form>

<script>
  function myFunction() {
    // 폼 제출 시 실행될 코드
    // 폼 데이터 처리 등
  }
</script>

💫onsubmit이랑 submit
onsubmit은 폼이 제출될 때 실행될 JavaScript 코드를 지정하는 속성(HTML 요소의 속성)이고, "submit"은 폼이 실제로 제출되는 동작을 나타낸다.

onsubmit 속성은 <form> 요소에 사용되어 폼이 제출될 때 실행될 함수를 지정한다.
>> onsubmit="myFunction()"은 폼이 제출될 때 myFunction() 함수가 실행되도록 지정하는 것
폼이 제출되기 전에 해당 함수가 실행되며, 폼의 유효성 검사, 데이터 처리, 서버로의 전송 등을 수행할 수 있다.

submit은 폼이 실제로 제출되는 동작을 나타냅니다. 이 동작은 폼 데이터를 서버로 전송하거나 추가적인 동작을 수행하는 것을 의미한다.

---

value="Submit
<input> 요소에서 사용되는 속성으로, 해당 입력 필드의 값(버튼의 텍스트)을 지정한다.

value 속성을 사용하여 버튼의 텍스트를 지정할 수 있다.

> 버튼의 텍스트는 사용자에게 어떤 동작이 수행되는지 알려주는 역할을 합니다.

<form onsubmit="return validateForm()">
  <!-- 폼 요소들 -->
  <input type="submit" value="Submit">
</form>

<script>
  function validateForm() {
    // 폼 유효성 검사 등을 수행하는 코드
    if (/* 유효성 검사 조건 */) {
      return true; // 폼 제출 허용
    } else {
      return false; // 폼 제출 중단
    }
  }
</script>

> onsubmit 속성에 지정된 함수인 validateForm()은 폼의 유효성 검사를 한다.

>> 만약 유효성 검사에 통과되면 true를 반환하여 폼이 제출되도록 하고, 그렇지 않은 경우 false를 반환하여 폼 제출을 중단시킨다.

---

• JavaScript로 처리하기: JavaScript 코드에서 addEventListener 메서드를 사용하여 submit 이벤트를 처리한다

<form id="myForm">
  <!-- 폼 요소들 -->
  <input type="submit" value="Submit">
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function(event) {
    event.preventDefault(); // 폼의 기본 동작(페이지 새로고침 등)을 방지하기 위해 호출

    // 폼 제출 시 실행될 코드
    // 폼 데이터 처리 등
  });
</script>

💫'submit' 이벤트는
양식을 제출하는 고유 동작(페이지 이동 or 새로고침)이 함께 발생하는데, preventDefault()를 사용해서 막아줄 수 있다.

이는 자바스크립트로 폼을 제출한 후 추가적인 동작을 수행하기 위해 필요한 단계이다.

---

2. <input>의 value

사용자의 제출 동작을 감지했다면, 이제 사용자가 입력한 정보를 가져올 수 있다.

 

<input> 요소의 유형에 따라 value 속성의 동작이 다르다.

<input type="text" value="기본값">​

텍스트 입력 필드(<input type="text">)
: value 속성은 사용자가 입력한 텍스트 값을 나타낸다. 자바스크립트를 사용하여 동적으로 값을 변경하거나 가져올 수 있다.

---

<input type="checkbox" value="apple"> Apple
<input type="checkbox" value="banana"> Banana

<input type="radio" name="fruit" value="apple"> Apple
<input type="radio" name="fruit" value="banana"> Banana

체크박스(<input type="checkbox">) 또는 라디오 버튼(<input type="radio">)
: value 속성은 해당 체크박스 또는 라디오 버튼이 선택되었을 때 전송되는 값이다. 여러 체크박스나 라디오 버튼 중 하나를 선택할 수 있으며, 선택된 항목의 value 속성값이 폼 데이터로 전송된다.

---

<input type="hidden" name="hiddenField" value="hiddenValue">

숨겨진 필드(<input type="hidden">)
: value 속성은 숨겨진 필드에 저장된 값을 나타낸다. 숨겨진 필드는 사용자에게 표시되지 않지만 폼 데이터로 전송되어 추가 정보를 전달하는 데 사용될 수 있다.

이 외에도 다양한 <input> 요소 유형이 있으며, value 속성은 해당 요소의 동작에 따라 다른 의미를 갖는다.

 

'submit'을 통해 이벤트가 발생하면, event의 target을 통해 name 속성을 지정한 요소의 값이 함께 전달된다. 이를 통해 <input>의 value 를 가져올 수 있다.

💫event.target은 이벤트가 발생한 요소를 나타내는 속성이다.

event.target은 이벤트가 발생한 요소에 접근하기 위한 속성으로, 이벤트 리스너의 콜백 함수에서 사용됩니다. 이를 통해 이벤트가 발생한 요소의 속성, 내용 등을 확인하거나 조작할 수 있습니다.

event.target을 사용하면 이벤트가 발생한 요소를 알고 싶을 때, 발생한 요소에 접근할 수 있다. 예를 들어, 클릭 이벤트가 발생한 버튼을 찾거나, 제출 이벤트가 발생한 폼을 찾을 수 있다.

이벤트 리스너의 콜백 함수 내에서event.target을 사용하면 이벤트가 발생한 요소에 접근할 수 있다.

function handleClick(event) {
  console.log(event.target); // 클릭된 버튼 요소 출력
  console.log(event.target.textContent); // 클릭된 버튼의 텍스트 내용 출력
}

const button = document.querySelector('button');
button.addEventListener('click', handleClick);​

> 다음과 같은 클릭 이벤트 핸들러에서 event.target을 사용하여 클릭된 버튼의 속성을 확인할 수 있다.
> event.target은 클릭 이벤트가 발생한 요소를 나타냅니다. event.target.textContent은 클릭된 버튼의 텍스트 내용을 출력한다.

const signupForm = document.querySelector('form');

signupForm.addEventListener('submit', event => {
 event.preventDefault();

 const nameInput = event.target['name'];

 console.log(nameInput);
 console.log(`제출된 닉네임은 ${nameInput.value}입니다.`);
});

1. const signupForm = document.querySelector('form');
   • document.querySelector('form')은 문서에서 첫 번째로 발견되는 <form> 요소를 선택
   • 선택된 <form> 요소를 signupForm 변수에 할당
2. signupForm.addEventListener('submit', event => { ... });
   • signupForm 변수에 저장된 폼 요소에 submit 이벤트 리스너를 추가
   • 폼이 제출되면, 콜백 함수가 실행
   • event 매개변수는 이벤트 객체를 나타냄
3. event.preventDefault();
   • event.preventDefault()는 폼의 기본 동작(페이지 새로고침 등)을 방지
   • 이 코드가 없으면 폼 제출 시 기본 동작이 실행
4. const nameInput = event.target['name'];
   • event.target은 이벤트가 발생한 요소를 가리킵니다. 여기서는 폼 요소(<form>)를 나타냄
   • ['name']은 폼 요소 내에 name 속성을 가진 요소를 선택
   • 선택된 요소(이 경우는 이름 입력 필드)를 nameInput 변수에 할당

---

3. <input>의 type

<input> 은 'type' 속성을 사용하면 데이터 형식을 지정할 수 있다.

<form>
    닉네임 :
    <input type="text" name="name" id="name">
    </br>
    이메일 :
    <input type="email" name="email" id="email">
    </br>
    비밀번호 :
    <input type="password" name="password" id="password">
</form>

4. <input>과 <label>

<label> 을 사용하면 <input> 에 이름을 붙일 수 있는데, <label> 의 'for' 의 값과 <input> 의 'id' 의 값이 같으면 연결된다.

 

<label> 을 클릭하면, 연결된 <input> 에 입력할 수 있도록 포커스 되거나 토글된다. <input> 에 focus가 오면 스크린리더가 <label> 을 읽기 때문에 접근성 측면에서 중요하다.

<label> 요소

<label> 요소는 폼 요소에 대한 설명, 레이블 또는 사용자에게 요구사항을 제공하는 데 사용됩니다.
<label> 요소는 폼 요소를 감싸거나 for 속성을 사용하여 연결할 수 있습니다.
<label> 요소를 사용하면 사용자가 레이블을 클릭하여 연결된 폼 요소에 포커스를 설정할 수 있습니다.
for 속성을 사용하여 <label> 요소와 연결된 폼 요소의 id 속성 값을 지정합니다.

<label for="username">Username:</label>
<input type="text" id="username" name="username">

> <label> 요소는 "Username:"이라는 레이블을 제공하고, for 속성을 사용하여 id 값이 "username"인 <input> 요소와 연결한다. 이를 통해 사용자가 레이블을 클릭하면 연결된 입력 필드로 포커스가 이동한다.

<label> 요소는 시각적으로 사용자에게 텍스트를 제공하고, 스크린 리더와 같은 보조 기술을 사용하는 사용자에게는 더 나은 접근성을 제공한다. 또한, 클릭 가능한 영역을 확대하여 입력 필드에 대한 사용성을 향상시킨다.

요약하자면, <input> 요소는 사용자로부터 데이터를 입력받는 폼 필드를 생성하고, <label> 요소는 폼 요소에 대한 설명이나 레이블을 제공하는 데 사용된다. <label> 요소는 <input> 요소와 연결하여 사용성과 접근성을 향상시킨다.

---

5. <button>의 type

<form> 의 <button> 은 'submit', 'reset', 'button' 세가지 타입을 지원한다.

 

'submit' 은 사용자 입력 양식을 제출하는 역할을 하고, 'reset' 은 사용자 입력 양식을 초기화하는 역할을 하며, 'button' 은 그 외에 기능을 바인딩 하여 사용할 수 있다.

 

<form> 의 <button> 은 기본 타입이 'submit' 이지만, 접근성 측면에서 타입을 명시적으로 써주는 게 좋다. 또한 'submit' 역할을 하는 <button> 은 <form> 내에 하나만 존재하는 것을 권장한다.

 

이 세가지 타입은 <input> 에도 똑같이 존재하며 작동하는 기능도 일치한다. 차이가 있다면 <button> 은 <input> 과 달리 다른 엘리먼트들을 삽입할 수도 있으며, 더 자유롭게 스타일링이 가능하다.