The Button Element vs input type="button"
When you start learning HTML, buttons can be confusing. You might see two different ways to create them:
<button>Click me</button>
and
<input type="button" value="Click me">
They look similar on the page, but they don’t work exactly the same. In this article, you’ll learn the difference between <button> and <input type="button">, when to use each one, and how to connect them to real actions using JavaScript.
1. Two ways to create a button
In HTML, a button is something the user can click to do an action, like submitting a form or opening a message.
There are two common elements for this:
<button>— a flexible button element<input type="button">— an input element styled like a button
Example 1: The simplest buttons
Copy this code into a file called buttons.html and open it in your browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Buttons</title>
</head>
<body>
<!-- Button element -->
<button>Button element</button>
<!-- Input type button -->
<input type="button" value="Input button">
</body>
</html>
What you’ll see: two buttons that look very similar.
- The first is created with
<button>Button element</button> - The second is created with
<input type="button" value="Input button">
Try it yourself: Change the text inside <button>Button element</button> to something else and refresh the page. Then change the value of the <input> and refresh again.
2. Key differences at a glance
Here are the most important differences:
Content
<button>can contain text, images, icons, or other HTML<input type="button">can only show text via itsvalueattribute
Default type
<button>can betype="button",type="submit", ortype="reset"<input type="button">is always just a generic button (no submit or reset behavior)
Use in forms
<button type="submit">is great for submitting forms<input type="submit">is the input version for submitting forms
Flexibility
<button>is more flexible and modern<input type="button">is more limited but still works for simple cases
For most new projects, developers recommend using <button> because it gives you more control.
3. Using <button> for form submission
One common use for buttons is sending data from a form, like a login form or a contact form.
Example 2: A simple form with a submit button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form with Button</title>
</head>
<body>
<form>
<!-- A simple text input field -->
<label>
Your name:
<input type="text" name="username">
</label>
<br><br>
<!-- Submit button using <button> -->
<button type="submit">Send form</button>
</form>
</body>
</html>
What this does:
<form>groups fields together<input type="text">lets the user type their name<button type="submit">sends the form data when clicked
Open this in your browser and type something in the box, then click Send form. You’ll see the page reload and the address bar may change. That shows the form was submitted.
Now, change the button line to use input instead:
<input type="submit" value="Send form">
It will still work, but notice the difference:
<button type="submit">Send form</button>— text goes between the tags<input type="submit" value="Send form">— text goes in thevalueattribute
Try it yourself:
- Add an emoji or extra text to the
<button>label (for example,Send form 🚀) - Try to do the same with
<input>; you’ll see you can only change thevaluetext.
4. Adding icons or extra HTML (button only)
One big advantage of <button> is that it can hold other HTML elements inside it. This means you can easily add icons, bold text, or line breaks.
You cannot do this with <input type="button">.
Example 3: Button with an icon and styled text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fancy Button</title>
</head>
<body>
<!-- Button with an emoji and bold text -->
<button type="button">
🚀 <strong>Launch</strong> project
</button>
</body>
</html>
What happens:
- The button shows an emoji, bold text (
<strong>), and normal text, all inside one button - You could add even more HTML inside, like a
<span>or an icon from an icon library
If you tried the same with <input type="button">, it would not work because inputs cannot contain child elements.
Try it yourself: Add another word or emoji inside the <button> and refresh the page.
5. Making buttons actually do something (JavaScript)
By default, a button just sits there until you attach an event to it. An event is something that happens, like a click.
We’ll add a small script so that clicking a button shows a message.
Example 4: Compare click actions for both buttons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Buttons</title>
</head>
<body>
<!-- Button element -->
<button id="btn-element" type="button">Button element</button>
<!-- Input type button -->
<input id="btn-input" type="button" value="Input button">
<p id="message"></p>
<script>
// Get references to the buttons and the message paragraph
const elementButton = document.getElementById('btn-element');
const inputButton = document.getElementById('btn-input');
const message = document.getElementById('message');
// When the <button> is clicked
elementButton.addEventListener('click', function () {
message.textContent = 'You clicked the <button> element!';
});
// When the <input type="button"> is clicked
inputButton.addEventListener('click', function () {
message.textContent = 'You clicked the <input type="button">!';
});
</script>
</body>
</html>
What this does:
document.getElementById('btn-element')finds the<button>addEventListener('click', ...)says: “When someone clicks this, run this function.”- The function changes the text in the
<p id="message">element
Result:
- Clicking the
<button>shows:You clicked the <button> element! - Clicking the
<input>shows:You clicked the <input type="button">!
Both buttons can run the exact same JavaScript. The difference is mainly how they are written and what content they can hold.
Try it yourself:
- Change the message text to anything you like
- Add
🚀or✔️to the button labels and see how it looks
6. When should you use each one?
Here are some simple rules you can follow as a beginner:
Use <button> when:
- You want a form submit button:
<button type="submit"> - You need icons or extra HTML inside the button
- You want a more future-proof and flexible choice
Use <input type="button"> when:
- You just need a very simple button with plain text
- You’re working with old code that already uses
inputbuttons - You don’t need icons or complex styling inside
If you’re unsure, use <button> — most developers treat it as the standard for new projects.
7. Quick recap
You’ve just learned:
- There are two main ways to create buttons in HTML:
<button>and<input type="button"> <button>is more flexible: it can contain text, HTML, and icons, and can betype="button",type="submit", ortype="reset"<input type="button">is simpler and more limited: it only uses thevalueattribute for its label and is always just a generic button- Both can run JavaScript when clicked, using
addEventListener('click', ...)
Learning buttons is a great step in your coding journey. If you can create buttons, connect them to forms, and trigger actions with JavaScript, you’re already building interactive web pages.
What’s next?
- Practice adding more buttons that do different things
- Try styling your buttons with CSS (colors, size, hover effects)
- Explore other button types, like
<button type="reset">and<input type="submit">
Every small example you try builds your skills. Keep experimenting, keep clicking, and keep going—you’re learning real web development, one button at a time.
