<입력 유형 = '버튼'/>과 <입력 유형 = '제출'/>의 차이점

어리석은 질문과 같은 것은 없으므로 여기로 이동합니다 : <input type='button' />와 <input type='submit' />? 의 차이점은 무엇입니까 ?

<input type="button" />버튼은 양식을 제출하지 않으며 기본적으로 아무것도하지 않습니다. 일반적으로 AJAX 애플리케이션의 일부로 JavaScript와 함께 사용됩니다.

<input type="submit"> JavaScript로 달리 지정하지 않는 한 버튼은 사용자가 클릭 할 때의 양식을 제출합니다.

'버튼'은 자바 스크립트를 사용하여 추가 기능을 추가 할 수있는 버튼입니다. '제출'입력 유형에는 배치 된 양식을 제출하는 기본 기능이 있습니다 (물론 Javascript를 사용하여 추가 기능을 추가 할 수는 있음).

버튼은 자체적으로 양식을 제출하지 않으며, 자바 스크립트를 사용하여 일부 작업을 수행하는 데 사용되는 간단한 버튼이지만 제출은 기본적으로 사용자가 제출 버튼을 클릭 할 때마다 양식을 제출하는 일종의 버튼입니다.

IE 8은 실제로 제출 또는 단추가있는 첫 번째 단추를 사용합니다. 입력 유형을 지정하여 원하는 것을 쉽게 표시하는 대신 = 페이지에서 주문을 제출하면 실제로 중요합니다.

명명 된 입력 type = "submit"도 다른 양식의 명명 된 필드와 함께 제출되지만 명명 된 입력 type = "button"은 제출되지 않습니다.

다른 말로, 아래의 예에서 이름을 입력 name=button1 하지 않을 것이다 명명 된 입력이 동시에 제출받을 name=submit1 것입니다 제출하세요.

샘플 HTML 양식 (index.html) :

<form action="checkout.php" method="POST">

  <!-- this won't get submitted despite being named -->
  <input type="button" name="button1" value="a button">

  <!-- this one does; so the input's TYPE is important! -->
  <input type="submit" name="submit1" value="a submit button">

</form>

위 양식의 작업을 처리하는 PHP 스크립트 (checkout.php) :

<?php var_dump($_POST); ?>

/ tmp / test /라는 폴더에 두 개의 파일을 만든 다음 쉘에서 내장 PHP 웹 서버를 실행하여 로컬 컴퓨터에서 위의 내용을 테스트하십시오.

php -S localhost:3000 -t /tmp/test/

http : // localhost : 3000 에서 브라우저를 열고 직접 확인하십시오.

왜 이름이 지정된 버튼을 제출해야하는지 궁금 할 것입니다. 백엔드 스크립트에 따라 다릅니다. 예를 들어 WooCommerce WordPress 플러그인은 Place Order이름 이 지정된 버튼을 제출 하지 않으면 게시 된 결제 페이지를 처리하지 않습니다 . 유형을 제출 에서 버튼으로 변경하면 이 버튼이 제출되지 않으므로 Checkout 양식이 처리되지 않습니다.

이것은 아마도 작은 세부 사항이지만 악마는 세부 사항에 있습니다.

<input type="button">양식 내 에서뿐만 아니라 어느 곳에서나 사용할 수 있으며 양식에 들어 있으면 양식을 제출하지 않습니다. 훨씬 더 적합합니다 Javascript.

<input type="submit">형식으로 만 사용해야하며 지정된 URL에 요청 (GET 또는 POST)을 보냅니다. HTML 장소에 두어 서는 안됩니다 .

W3C는 Button 요소에 대한 사양에서 명확하게합니다.

버튼은 기본 동작이없는 모든 종류의 버튼에 대한 일반 클래스로 표시 될 수 있습니다.

W3C

type='Submit'BACK-END (PHP, .NET 등)에서 값을 전달하고 가져 오도록 설정되어 있습니다. type='button'정상적인 버튼 동작을 반영합니다.