<input type = 'submit'/>와 <button type = 'submit'> text </ button>의 차이점

그들에 대한 많은 전설이 있습니다. 나는 진실을 알고 싶다. 다음 두 예제의 차이점은 무엇입니까?

1. <input type='submit' value='text' />

2. <button type='submit'>text</button>

어디에서 전설을 얻었는지 확실하지 않지만 :

버튼을 제출 <button>

와 같은:

<button type="submit">(html content)</button>

IE6은 태그 사이에이 버튼의 모든 텍스트를 제출하고 다른 브라우저는 값을 제출합니다. 를 사용 <button>하면 버튼 디자인보다 레이아웃이 더 자유 로워집니다. 모든 의도와 목적에서 처음에는 훌륭해 보였지만 다양한 브라우저 문제로 인해 때때로 사용하기가 어렵습니다.

귀하의 예에서 IE6는 text서버로 전송 하지만 다른 대부분의 브라우저는 아무것도 보내지 않습니다. 브라우저 간 호환성을 유지하려면을 사용하십시오 <button type="submit" value="text">text</button>. 더 나은 방법 : HTML을 추가하면 서버 측에서받는 것이 다소 까다로워지기 때문에 값을 사용하지 마십시오. 대신 추가 값을 보내야하는 경우 숨겨진 필드를 사용하십시오.

버튼 <input>

와 같은:

<input type="button" />

기본적으로 이것은 아무것도 옆에 없습니다. 양식을 제출조차하지 않습니다. 버튼 위에 만 텍스트를 배치하고 CSS를 사용하여 크기와 테두리를 지정할 수 있습니다. 원래 (현재) 의도는 서버에 양식을 제출할 필요없이 스크립트를 실행하는 것이 었습니다.

일반 제출 버튼 <input>

와 같은:

<input type="submit" />

전자와 비슷하지만 실제로 주변 양식을 제출합니다.

이미지 제출 버튼 <input>

와 같은:

<input type="image" />

전자 (제출)와 마찬가지로 양식도 제출하지만 모든 이미지를 사용할 수 있습니다. 이것은 양식을 제출해야 할 때 이미지를 버튼으로 사용하는 기본 방법이었습니다. 더 많은 제어를 위해 <button>이제 사용됩니다. 서버 측 이미지 맵 에도 사용할 수 있지만 요즘에는 드물다. usemap-attribute 를 사용 하거나 (속성 유무에 관계없이) 브라우저는 마우스 포인터 X / Y 좌표를 서버로 보냅니다. 이러한 추가 사항을 무시하면 이미지로 위장한 제출 버튼에 지나지 않습니다.

브라우저마다 약간의 차이가 있지만 <button>위에서 설명한 태그를 제외하고는 모두 값 속성을 제출합니다 .

함께 <button>텍스트가 어디 있는지 IMG 태그 등을 사용할 수 있습니다,

<button type='submit'> text -- can be img etc.  </button>

와 <input>유형, 당신은 텍스트로 제한됩니다

요약해서 말하자면 :

<input type="submit">

<button type="submit"> Submit </button>

둘 다 기본적으로 동일한 동작을 수행하는 단추를 시각적으로 그립니다 (양식 제출).

그러나 <button type="submit">의미가 우수하고 ARIA를 더 잘 지원하며 스타일을 더 쉽게 사용할 수 있으므로 사용하는 것이 좋습니다 .