제출(Submit) 버튼은 클릭하는 순간 자동으로 폼(form)을 전송하는 역할을 합니다. HTML 폼을 활용하면 사용자로부터 입력값을 손쉽게 받을 수 있습니다. <form> 태그 안에 다양한 폼 요소를 추가하여 사용자 입력을 수집하며, 대표적인 폼 요소로는 텍스트 입력창, 라디오 버튼, 제출 버튼 등이 있습니다.
form action 속성으로 페이지 연결하기
제출 버튼을 다른 웹 페이지에 연결하려면 form action 속성을 사용하면 됩니다. action 속성 값에 이동할 페이지의 경로를 지정해 주세요. 예를 들어 다음과 같이 작성합니다.
<form action="/new.php">
이렇게 설정하면 사용자가 제출 버튼을 클릭했을 때 폼 데이터가 /new.php 페이지로 전달되며, 해당 페이지로 이동하게 됩니다.
예제 코드
아래 코드를 실행하면 제출 버튼을 다른 웹 페이지에 연결하는 동작을 직접 확인할 수 있습니다. 학생 이름과 과목을 입력받고, 제출 버튼 클릭 시 지정된 페이지로 데이터를 전송합니다.
<!DOCTYPE html> <html> <body> <form action="/new.php"> 학생 이름:<br> <input type="text" name="sname"> <br> 학생 과목:<br> <input type="text" name="ssubject"> <br> <input type="submit" value="제출"> </form> </body> </html>
코드 설명
action="/new.php": 폼이 제출될 때 이동할 목적지 페이지를 지정합니다.input type="text": 사용자가 텍스트를 입력할 수 있는 필드를 생성합니다.input type="submit": 클릭 시 폼을 전송하는 제출 버튼을 만듭니다.value속성으로 버튼에 표시될 문구를 변경할 수 있습니다.
만약 별도의 서버 스크립트 없이 단순히 페이지만 이동하고 싶다면, <a> 태그에 버튼 스타일을 적용하는 방법도 좋은 대안입니다. 하지만 입력 데이터를 함께 전달해야 하는 경우에는 위와 같이 form action 속성을 사용하는 것이 표준적인 방법입니다.