빠른 팁: 항상 버튼에 유형을 포함하세요.

type 요소의 기본 값button이 "버튼"이 아니라는 것을 알고 계셨습니까?

잠시 뒤로 물러나서, button 요소는 90년대 후반에 HTML 4 사양의 일부로 도입되었습니다. 이전에는 양식에 제출 버튼을 원할 경우 input와 함께 type="submit"를 사용했습니다.

<input type="submit" value="Submit the form">

점점 더 버튼은 양식 값을 제출하거나 재설정하는 것 이상의 기능을 수행합니다. 대화 상자가 열립니다! 슬라이드쇼를 탐색합니다! 우리가 가장 좋아하는 모든 것!

최신button 요소는 버튼의 동작을 정의하는 input를 포함하여 원래type 사양의 많은 속성을 전달합니다.
type는 세 가지 가능한 값을 사용하며 모두 상당히 자명합니다. HTML Standard spec을 인용하자면:

submit - "양식 제출"

reset - "양식 재설정"

button - "아무것도 하지 않음"

이것은 여러 가지 이유로 유용합니다. 특히 이 버튼이 수행하는 작업이 귀하 또는 귀하의 코드를 읽어야 하는 모든 사람에게 매우 명확하기 때문입니다.

까다로운 부분은 type가 설정되지 않았을 때 발생합니다. 유형이 없는 버튼 요소( <button>My Sample Button</button> ) 또는 유효하지 않은 유형 값이 있는 버튼이 있는 경우 <button type="resete">My Sample Button with mispelled "type"</button> 상태는 기본적으로 submit 가 아니라 button 입니다.

(Internet Explorer는 예외입니다. IE는 항상 자체 작업을 수행해야 하기 때문입니다.)

이것은 놓치기 쉬운 단계이며 프로젝트에 따라 명백한 문제를 일으키지 않을 수도 있습니다. 또는 매우 명백한 문제를 일으킬 수 있습니다.

예를 들어 양식을 작성 중이고 더 많은 정보가 포함된 대화 상자가 필요하다고 가정해 보겠습니다. 해당 대화 상자에 대한 버튼 트리거를 넣을 수 있습니다. 해당 버튼에 type를 포함하지 않으면 해당 버튼을 클릭하면 사용자가 준비되기 전에 양식이 제출됩니다! 다음은 extremely basic codepen 예입니다.

여기서 교훈은 항상 type에 값을 할당하는 것입니다. 코드를 유효하고 읽기 쉽게 만들고 사용자의 골칫거리를 덜어줍니다.