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">) : 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은 클릭된 버튼의 텍스트 내용을 출력한다.
<label>을 사용하면<input>에 이름을 붙일 수 있는데,<label>의'for'의 값과<input>의'id'의 값이 같으면 연결된다.
<label>을 클릭하면, 연결된<input>에 입력할 수 있도록 포커스 되거나 토글된다.<input>에 focus가 오면 스크린리더가<label>을 읽기 때문에 접근성 측면에서 중요하다.
<label> 요소
<label> 요소는 폼 요소에 대한 설명, 레이블 또는 사용자에게 요구사항을 제공하는 데 사용됩니다. <label> 요소는 폼 요소를 감싸거나 for 속성을 사용하여 연결할 수 있습니다. <label> 요소를 사용하면 사용자가 레이블을 클릭하여 연결된 폼 요소에 포커스를 설정할 수 있습니다. for 속성을 사용하여 <label> 요소와 연결된 폼 요소의 id 속성 값을 지정합니다.
