input과 button

조회수 1522회

input과 button 속성이 겹치던데요.

1.<input type="button" value="버튼"/>
  <button type="button">버튼</button>
2.<input type="reset" value="초기화"/>
  <button type="reset">초기화</button>
3.<input type="submit" value="제출"/>
  <button type="submit">제출</button>

언제 button을 사용하고 언제 input을 사용하나요?

  • (•́ ✖ •̀)
    알 수 없는 사용자

1 답변

  • 안녕하세요. monkeycode69 님 ^ ㅡ ^

    질문에 답변 드려봅니다.

    input 요소 스타일링이 용이하지 않았던 과거 시대

    과거 <input type="button"> 요소를 이용하여 버튼 디자인을 하는 것은 쉽지 않았습니다. 왜냐하면 각 브라우저마다 다르게 표현하기 때문이죠. 이러한 점 때문에 웹 디자이너에게 폼 디자인은 특히 버튼 디자인은 쉽지 않았습니다. 그렇다고 해서 멋지고 다양한 버튼 디자인을 포기해야 했을까요? 그렇지는 않았습니다 ^ _ ^ !

    HTML에는 <input type="button"> 요소 외에도 버튼 역할을 수행하는 <button> 요소가 있기 때문 이었죠~ <button> 요소를 사용하면 당시(과거) 멋진 버튼 디자인을 만들 수 있었습니다.

    일반적으로 폼 내부 콘텐츠를 전달하는 버튼인 전송 버튼(submit)을 구조화할 경우 다음과 같이 작성합니다.

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

    당시 문제는 브라우저 마다 전송 버튼을 다르게 표현한다는 것이었습니다.

    이미지

    그렇다면 버튼 요소는 어떤가요? 마찬가지로 브라우저 마다 모양이 달랐습니다.

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

    이미지

    하지만 <button> 요소는 <input> 요소와 달리 콘텐츠를 감쌀 수 있는 요소이므로 내부에 <img> 요소를 넣어서 버튼 요소를 구성할 수 있었습니다.

    <button type="submit">
      <img src="images/submit_check.gif" alt="">
      Submit
    </button>
    

    이미지

    당시 스타일링 하기 힘들었던 <input> 요소와 달리 <button> 요소는 스타일링이 용이했습니다. 이러한 점을 W3C 문서에서는 다음과 같이 기술합니다.

    Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.

    For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content. The Button Element - W3C

    해석하면

    <button> 요소로 만든 버튼은 <input> 요소로 만든 버튼과 동일한 기능을 수행하지만, 보다 풍부한 렌더링 가능성을 제공한다. 이유는 버튼 요소는 내부에 콘텐츠를 가질 수 있기 때문이다.

    예를 들어, 이미지 유형의 <input type="image"> 컨트롤과 같은 기능을 수행하는 버튼은 내부에 콘텐츠를 포함할 수 없는 인풋과 달리, 내부에 이미지 요소를 포함할 수 있어 보다 다양한 표현이 가능하다.

    버튼 요소 - W3C

    아래는 이미지를 포함하는 버튼요소를 디자인 한 경우입니다. 당시(과거)에는 인풋 요소로 이런 디자인을 수행할 수 없었습니다.

    이미지

    아래는 소스 코드입니다.

    <button
      type="button"
      class="btn-save"
      onclick="save()">
      <img src="/images/icons/tick.png" alt=""> 
      Save
    </button>
    
    <button
      type="button"
      class="btn-change-password"
      onclick="changePassword()">
      <img src="/images/icons/textfield_key.png" alt=""> 
      Change Password
    </button>
    
    <button 
      type="button"
      class="btn-cancel"
      onclick="cancel()">
      <img src="/images/icons/cross.png" alt="">
      Cancel
    </button>
    

    input 요소 스타일링이 용이한 오늘 날

    과거의 달리 오늘 날은 브라우저의 렌더링 기술이 발전되었고, CSS로 스타일링 하는데 있어 <input> 요소와 <button> 요소의 차이가 거의 없어졌습니다. CSS 배경 이미지 기술을 사용하면 인풋 요소 또한 멋지게 꾸밀 수 있게 되었기 때문에 꼭 풍부한 디자인을 위한 목적으로 버튼 요소를 사용할 필요는 없어진 거죠.

    그래서 오늘 날은 버튼 컴포넌트를 구조화할 때 인풋 요소를 사용해도 되고, 버튼 요소를 사용해도 됩니다. 하지만 일반적으로 전송, 버튼, 초기화 기능을 수행하는 경우 버튼 요소를 많이 사용합니다. 반면 버튼 요소가 지원하지 않는 text, password, email, number 등과 같은 타입은 인풋 요소를 사용합니다.

    정리

    과거 인풋 요소로 꾸미기 어려웠던 디자인을 버튼 요소를 사용해 꾸밀 수 있었으나, 오늘 날은 꾸미는데 있어 큰 제약이 없으므로 동일한 타입의 경우 인풋, 버튼 어떤 것을 사용해도 무방합니다. ^ ㅡ ^

    • (•́ ✖ •̀)
      알 수 없는 사용자

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)