BUTTON과 INPUT_Experience 교환의 차이점

주제를 한 문장으로 요약하면 <button>은 <input type="button" ... >과 같은 효과를 가지지만 기동성 측면에서는 더 강력합니다.

HTML 4.01 사양 의 양식 부분에는 버튼, 확인란, 라디오 버튼, 메뉴, 텍스트 입력, 파일 선택, 숨겨진 컨트롤, 개체 등의 컨트롤 유형이 있습니다. 컨트롤 . 버튼/메뉴/개체 컨트롤을 제외하면 모두 <input>로 완성됩니다.

여기에서는 <button>과 <input>에 대해 이야기하고 있습니다.

<button> 및 <input>

사양사양 : <button>, <input>을 이용하여 폼버튼을 만들 수 있습니다. 다양한 버튼 유형에 대해서는 이러한 요소에 대한 자세한 정의를 참조하세요. <button>는 <input>보다 더 풍부한 표현 기능을 지원한다는 점에 유의하세요.

몇 가지 차이점

<input> 이렇게 쓸 수 있다는 건 다들 아시죠(실제로는 이렇게 써야 합니다): <input type="submit" value="OK" />, 이렇게 닫아야 합니다. 대신: <input type="submit" value="OK" ></input>. 여는 태그는 이므로 이어야 하고, 닫는 태그는 이므로 금지이기 때문입니다.

<button>는 <input>콘텐츠를 담을 수 수 있다는 점에서 보다 강력합니다. 해당 값은 value 속성에 기록되지 않고 태그에 포함됩니다. 예: <button>OK. <button>의 여는 태그와 닫는 태그는 모두 필수입니다. 이렇게 하면 스타일을 제어할 수 있습니다.

다음과 같이 쓸 수 있습니다: <button>OK, I do., 또는 그림을 삽입할 수도 있습니다: <button>, it's great.. <input type="image">과 다소 유사하지만 분명히 훨씬 더 강력합니다.

마지막으로 주의할 점은 <button>에 포함된 이미지는 히트맵을 사용할 수 없다는 것, 즉 <img src="foo.gif" usemap="..." />일 수 없다는 점입니다. 이는 불법입니다. 물론 input, select, textarea, label, button, form, fieldset, iframe, isindex(지원 중단됨)과 같은 요소는 더 이상 허용되지 않습니다.