HTML - button 요소

<button>은 클릭 가능한 버튼을 생성하는 요소를 나타낸다. <form> 내부에서 사용하면 사용자 입력 내용을 action속성에 정의된 URL로 전송하는 역할을 하지만 그 외에도 입력 정보를 리셋하거나 javascript의 이벤트 처리 등 다양한 작업을 수행하기도 한다.

<input> 요소에도 type="submit"을 통해 동일한 역할을 부여할 수 있지만 텍스트 외에 다른 이미지 등을 넣을 수 없어 다양한 UI요소를 꾸미는데 한계가 있다. 반면 <button> 요소는 <img> <svg>등을 내부요소로 사용해서 기본 스타일 외에 다양한 버튼 UI를 만들 수 있다.

<button> 요소는 type속성을 통해 다양한 역할을 부여할 수 있다.

값	설명
submit	<form>태그에 정의된 URL로 사용자 입력값을 전송함
reset	사용자 입력값 초기화
button	값 자체는 기능이 없으나 javascript와 함께 사용 할때 필요함
disable	버튼을 비활성화 상태로 만듬
form	특정 폼 #id와  연결되도록 설정함

<form action="/" method="post" id="buttonForm">
      <div>
        <label for="user">사용자 이름</label>
        <input type="text" name="user" id="user" />
      </div>
      <div>
        <label for="user">사용자 암호</label>
        <input type="password" name="pwd" id="pwd" />
      </div>
      <!-- input 요소 버튼 -->
      <div>
        <input type="submit" value="전송" />
        <input type="reset" value="초기화" />
        <input type="button" value="Clike Me!" />
      </div>
      <!-- <button> 요소 버튼 -->
      <div>
        <button type="submit">전송</button>
        <button type="reset">초기화</button>
        <button type="button">클릭!</button>
      </div>
      <!-- <img> <svg> 요소 사용 -->
      <div>
        <button type="submit">
          <img src="/src/assets/icon/search.svg" alt="전송하기" />
        </button>
        <button type="submit" aria-label="전송해줘">
          <img src="/src/assets/icon/search.svg" alt="" />
        </button>
        <button type="submit" aria-label="검색해줘">
          <svg
            width="12"
            height="12"
            viewBox="0 0 12 12"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              id="Union"
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M7.14574 8.55995C6.45201 8.99709 5.63054 9.25 4.75 9.25C2.26472 9.25 0.25 7.23528 0.25 4.75C0.25 2.26472 2.26472 0.25 4.75 0.25C7.23528 0.25 9.25 2.26472 9.25 4.75C9.25 5.63054 8.99709 6.45201 8.55995 7.14574L11.4571 10.0429C11.8476 10.4334 11.8476 11.0666 11.4571 11.4571C11.0666 11.8476 10.4334 11.8476 10.0429 11.4571L7.14574 8.55995ZM7.25 4.75C7.25 6.13071 6.13071 7.25 4.75 7.25C3.36929 7.25 2.25 6.13071 2.25 4.75C2.25 3.36929 3.36929 2.25 4.75 2.25C6.13071 2.25 7.25 3.36929 7.25 4.75Z"
              fill="#181818"
            />
          </svg>
        </button>
      </div>
    </form>
    <!-- #id 연결-->
    <button type="reset" form="buttonForm">초기화</button>