Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

HTML 폼에서 제출(Submit) 버튼 사용하는 방법

HTML 폼의 제출 버튼이란?

제출 버튼은 클릭하는 순간 폼(form)의 내용을 자동으로 전송해 주는 요소입니다. HTML 폼을 활용하면 텍스트 입력창, 라디오 버튼, 체크박스, 제출 버튼 등 다양한 형태의 폼 요소를 통해 사용자 입력을 손쉽게 받을 수 있습니다.

제출 버튼 만드는 방법

제출 버튼 역시 다른 폼 요소처럼 HTML의 <input> 태그로 생성하며, 이때 type 속성 값을 "submit"으로 지정하면 됩니다.

  • type="submit": 클릭 시 폼 데이터를 서버로 전송
  • type="reset": 클릭 시 입력된 내용을 초기화

제출 및 리셋 버튼 예제

아래 예제 코드를 직접 실행해 보세요. action 속성에는 제출 버튼을 클릭했을 때 이동할 파일 경로를 지정하고, get 또는 post 방식을 사용해 해당 PHP 파일로 값을 전달할 수 있습니다.

<!DOCTYPE html>
<html>
  <body>
    <form action="/new.php">
      Student Name:<br>
      <input type="text" name="sname">
      <br>
      Student Subject:<br>
      <input type="text" name="ssubject">
      <br>
      <input type="submit" value="Submit">
      <input type="reset" value="Reset">
    </form>
  </body>
</html>

코드 핵심 포인트

  1. action 속성: 폼 데이터가 전송될 대상 페이지의 경로를 지정합니다.
  2. method 속성: get 또는 post 방식 중 하나를 선택해 데이터를 전송합니다.
  3. value 속성: 버튼 화면에 표시될 텍스트를 결정합니다.