How Button Input Type Creates A Form Button In JavaScript

Value of

How To Define Input Type In HTML (All The Values And Attributes)

What does How Button Input Type Creates A Form Button In JavaScript do?

Defines a button-like input.

Code Example

<form>
 <input type="button" value="Click me" onclick="alert('You clicked the button!')">
</form>

Mostly for JavaScript

The button input type creates an form button, the value of which is displayed as the text or label on the button. The button input looks identical to the submit, but they are not interchangeable — the button input does not submit the form. For the most part, the button input is used in conjunction with JavaScript.

<input type="button"> vs. <button>

In addition to the button type of input, there is a separate <button> element which is functionally very similar. By default, they are both displayed as buttons, and they both usually rely on JavaScript for their utility — neither one of them has much use in a strict form-input and submission paradigm. The difference is that the <button> element can have content, while the <input> element is null (that is, it does not have a closing tag and cannot contain any content. This means that the <button> element can have a picture, or marked-up text, while the button input cannot have either.

Why use the <input type="button">

So, if the <button> element is basically the same, except better, why use the button input type at all? The answer is the value attribute. With the button type input, the value is displayed on the button itself. With the <button> element, the button displays its content. This means that if you want to update or use the value and the displayed content in concert, you would need to use the button input, or else do a lot more scripting to sync the <button> value with its content. If the value is irrelevant, either element works just fine.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for button

All	All	All	All	All	All