리액트에서 투두리스트를 만들어보다가 form 태그에서 action 속성과 onsubmit 속성이 등장이 했는데, 이 둘의 차이점을 정리해야겠다는 생각이 들었다.
🔍 form 태그란
데이터를 한번에 전송할때 많이 사용하는 태그이다. 로그인창이나 회원가입 창 등 여러 데이터들을 입력받고 서버로 보내야 하는 경우에 사용한다.
<form>
<p>
<strong>아이디</strong>
<input type="text" name="name" value="아이디 입력">
</p>
<p>
<strong>비밀번호</strong>
<input type="password" name="password" value="비밀번호 입력">
</p>
<p>
<strong>성별</strong>
<input type="radio" name="gender" value="M">남자
<input type="radio" name="gender" value="F">여자
</p>
<p>
<strong>응시분야</strong>
<input type="checkbox" name="part" value="eng">영어
<input type="checkbox" name="part" value="math">수학
</p>
<p>
<input type="submit" value="제출">
</p>
</form>🔍 action 속성
form 태그 안에 action 속성은 form 안에 작성된 내용들을 서버로 보낼때, 해당 내용들이
도착할 URL 주소이다.
<form action="URL">
<form action="/examples/media/action_target.php">
이름 : <input type="text" name="st_name"><br>
학번 : <input type="text" name="st_id"><br>
학과 : <input type="text" name="department"><br>
<input type="submit">
</form>🔍 onsubmit 속성
onsubmit 속성은 input type="submit"으로 인해 발생하는 이벤트를 처리할 수가 있다.
<!DOCTYPE html>
<html>
<body>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form action="/action_page.php" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
</body>
</html>위의 코드는 form 이 제출 됐을때 myFunction() 이 실행된다는 뜻인데, myFunction()은 alert 창을 띄어주는 함수이다.
https://brgndy.me/ 로 옮기는 중입니다 :)