HTML button에는 세 가지 type을 설정할 수 있다.
그 중 type="button" 속성은 시나몬파우더랑 계피가루 많이 뿌려주세요~~ 같은 느낌이라 어떤 용도로 쓰는지 궁금해져서 찾아봤다ㅎㅎㅎ
button과 form태그
button은 독립적으로 쓸 수 있는 태그다.
form 밖으로 빼도 웹표준에 어긋나지 않는데 왜 굳이 그렇게 쓰는걸까????
정말 궁금한데 쓸데없는 궁금증인지 어디에도 이유는 안나와서 프론트엔드 학원 선생님께 여쭤보았다 ㅋㅋㅋㅋ
먼저 form태그는 사용자로부터 값을 입력을 받는 양식을 만들기 위해서 사용되고 폼의 기능들은 크게 다음 3가지로 구분된다.
- 입력 : 사용자로부터 텍스트를 입력받는다
- 선택 : 사용자로부터 옵션값을 받는다.
- 전송 : 서버 혹은 다른 페이지로 데이터를 전송한다.
form 없이도 button태그를 사용할 수 있다.
하지만 form태그 안에 button 태그를 넣으면 함수를 사용해서 폼태그 안에 입력한 데이터들을 하나로 합치기가 쉬워서 그렇게 쓰인다고 한다!
🦖form 태그 안과 밖에서 button태그는 달라진다.
form태그 밖에서 버튼은 type="button" 속성을 기본으로 가지고 form 태그 안에서 버튼은 type="submit"속성을 기본으로 가진다!
신기해!
궁금했던 버튼 타입의 정의는 아래와 같다.
type="submit"
<button type="submit">버튼</button>button은 세가지 type을 가지게 되는데 그 중 form 을 제출하는 submit 이라는 속성이 default값이다.
하지만 default값이 있더라도 type을 빼먹지 않고 적어주는 것이 좋다. 브라우저별로 버튼 요소에 대해 서로 다른 기본 타입을 사용할 수 있기 때문이다.
그리고 코드 가독성 면에서도 좋다!
submit타입인 버튼은 양식의 데이터를 서버로 제출한다.
type="button"
<button type="button">버튼</button>button 타입인 버튼은 해당 버튼이 클릭할 수 있는 버튼임을 명시한다.
그 자체로는 아무런 이벤트가 발생되지 않는다.
click 이벤트와 연결시켜서 자바스크립트를 활성화 할 수 있다.
그리고 click 이벤트는 button의 타입이 "button" 일 때만 발생한다!
type="reset"
<button type="reset">버튼</button>reset 타입인 버튼은 폼 데이터를 초기값으로 리셋한다.
🦖 정보를 전달해야할 때 form태그 밖에 button태그를 넣는 방법
form의 아이디를 통해 둘을 연결하는 방법을 사용할 수 있는데, button의 form 속성을 form의 Id와 같게 설정해주면 된다!
꼭 필요한 상황이 아니라면 유지보수의 원활함을 위해서 지양하는게 좋다고 한다.
<div>
<form id="a-form">
//form 태그의 id와 button의 form 속성을 똑같이 설정한다.
<label for="name">Name:</label>
<input type="text" name="name"></input>
</form>
<button type="submit" form="a-form">Submit</button>
</div>