input and button

Hello, monkeycode69^-^

Let me answer your question.

In the past, it was not easy to design buttons using <input type="button"> elements. Because each browser has a different expression. Because of this, form design has been especially difficult for web designers to design buttons. But did I have to give up on the cool, diverse button design? It wasn't like that ^ ^ _ ^ !

In addition to the <input type="button"> element, HTML also has the <button> element that acts as a button The <button> element allowed us to create a great button design at that time (in the past).

When structuring a transfer button, which is usually a button that delivers content inside a form, you create the following:

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

The problem at the time was that each browser expressed the transfer button differently.

So what about the button elements? Similarly, different browsers had different shapes.

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

but < button > is < input > and the content, within the elements and < img > and the elements can configure the elements of a button.

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

Unlike the <input> element, which was difficult to style at the time, the <button> element was easy to style. These points are described in the W3C document as follows:

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

Interpreting it

A button made with the <button> element performs the same function as a button made with the <input> element, but provides richer rendering possibilities. The reason is that the button element may have content inside.

For example, buttons that perform functions such as the <input type="image"> control of an image type can contain image elements inside, unlike inputs that cannot contain content inside, enabling more diverse expressions.

Button Element - W3C

Below is a case of designing a button element that contains an image. At that time (in the past), this design could not be done with input elements.

Below is the source code.

<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>

Unlike in the past, browser rendering technology has evolved today, and there is almost no difference between <input> and elements in styling with CSS. With CSS background image technology, the input elements can also be decorated nicely, eliminating the need to use button elements for rich design purposes.

So today, you can use the input element to structure the button components, or you can use the button element. However, button elements are commonly used when performing transfer, button, or initialization functions. On the other hand, types such as text, password, email, and number that the button element does not support use input elements.

Designs that were difficult to decorate with input elements in the past could be decorated with button elements, but today, there are no major restrictions on decorating, so you can use either input or button for the same type. ^ - ^