The difference between BUTTON and INPUT_Experience exchange

Summary theme in one sentence: <button>Has the same effect as <input type="button" ... > but is more powerful in terms of maneuverability.

Forms part of HTML 4.01 specificationThe named form has the following control types: buttons, checkboxes, radio buttons, menus, text input, file select, hidden controls, object controls . Except for buttons/menus/object controls, they are all completed by <input>.

What I’m talking about here are <button> and <input>.

<button> and <input>

Specified in the specification: You can use <button> and <input> to make form buttons. Please refer to the detailed definitions of these elements for different button types. It should be noted that <button> supports richer presentation functions than <input>.

Some differences

Everyone knows that <input> can be used like this (actually it must be used like this): <input type="submit" value="OK" />, it must be closed like this. Instead of: <input type="submit" value="OK" ></input>. Because the starting tag is and must be , while the closing tag is and is prohibited.

<button>What’s more powerful than <input> is that it can contain content. Its value is not written in the value attribute, but included in the tag. For example: <button>OK. The opening tag and closing tag of <button> are both required. This way you gain control over styling.

You can write like this: <button>OK, I do., or even insert a picture: <button>< ;img src="button.gif" alt="" />, it's great.. Somewhat similar to <input type="image">, but obviously much more powerful.

The last thing to note is that the images included in <button> cannot use hotspot maps, that is, <img src="foo.gif" usemap="... " />, this is illegal. Of course, it cannot contain items such as input, select, textarea, label, button, form , fieldset, iframe, and isindex (deprecated) elements are gone.