Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is difference between vs. ?
In HTML, the <button> element and <input type="button"> serve similar purposes but have important differences. The <button> element can contain rich content like text, images, and other HTML elements, while <input type="button"> can only display plain text through its value attribute.
Syntax
Following is the syntax for the <button> element −
<button type="button" onclick="function()">Content</button>
Following is the syntax for <input type="button"> −
<input type="button" value="Button Text" onclick="function()">
HTML <button> Element
The <button> element is used for creating interactive buttons within HTML forms or anywhere on a web page. It can contain rich content including text, images, icons, and other HTML elements between its opening and closing tags.
Key characteristics of the <button> element −
Can contain HTML content (text, images, icons)
Has opening and closing tags
Default type is "submit" when inside a form
More flexible for styling and content
Example − Button with Image
Following example shows how to create a button containing an image −
<!DOCTYPE html>
<html>
<head>
<title>Button with Image</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Button with Image Example</h2>
<button onclick="alert('Learn HTML')" style="padding: 10px; border: 2px solid #4CAF50; background: #f9f9f9;">
<img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg"
alt="Learn HTML" height="40" width="50">
Learn HTML
</button>
</body>
</html>
The button displays both an image and text, and shows an alert when clicked −
[HTML Logo] Learn HTML (clickable button with image and text)
Example − Button with Rich Content
The <button> element can contain complex HTML structures −
<!DOCTYPE html>
<html>
<head>
<title>Button with Rich Content</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<button onclick="alert('Button clicked!')" style="padding: 15px; border: none; background: #2196F3; color: white; border-radius: 5px;">
<strong>Download</strong><br>
<small>PDF File</small>
</button>
</body>
</html>
This button contains formatted text with different font weights and line breaks −
Download (bold text) PDF File (smaller text, blue background button)
HTML <input type="button">
The <input type="button"> creates a clickable button that displays only plain text specified in the value attribute. It is a self-closing element and cannot contain HTML content.
Key characteristics of <input type="button"> −
Can only display plain text via the value attribute
Self-closing element (no closing tag)
Does not submit forms by default
Limited styling options for content
Example − Basic Input Button
Following example demonstrates a simple input button −
<!DOCTYPE html>
<html>
<head>
<title>Input Button Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Button Example</h2>
<form>
<label>Name: <input type="text" name="username"></label><br><br>
<input type="button" value="Click Me" onclick="alert('Input button clicked!')" style="padding: 8px 16px; background: #4CAF50; color: white; border: none;">
</form>
</body>
</html>
The input button displays only the text specified in the value attribute −
Name: [text input field] [Click Me] (green button)
Example − Form with Input Button
Following example shows input buttons in a form context −
<!DOCTYPE html>
<html>
<head>
<title>Form with Input Button</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student Registration Form</h2>
<form action="/submit.php" method="post">
Student Name:<br>
<input type="text" name="sname" style="padding: 5px; margin: 5px 0;"><br>
Student Subject:<br>
<input type="text" name="ssubject" style="padding: 5px; margin: 5px 0;"><br><br>
<input type="submit" value="Submit Form" style="padding: 8px 16px; background: #008CBA; color: white; border: none; margin-right: 10px;">
<input type="button" value="Clear Fields" onclick="clearForm()" style="padding: 8px 16px; background: #f44336; color: white; border: none;">
</form>
<script>
function clearForm() {
document.getElementsByName('sname')[0].value = '';
document.getElementsByName('ssubject')[0].value = '';
}
</script>
</body>
</html>
This form includes both submit and button input types with different functions −
Student Registration Form Student Name: [text field] Student Subject: [text field] [Submit Form] [Clear Fields]
Key Differences
Following table summarizes the main differences between <button> and <input type="button"> −
| Feature | <button> | <input type="button"> |
|---|---|---|
| Content Type | Can contain HTML elements (text, images, icons) | Plain text only via value attribute |
| Element Type | Container element with opening/closing tags | Self-closing empty element |
| Default Behavior | type="submit" when inside forms | Does not submit forms by default |
| Styling Flexibility | High - can style content individually | Limited to button styling only |
| Accessibility | Better support for screen readers with rich content | Good for simple text buttons |
| Browser Support | Universal support | Universal support |
When to Use Each
Use <button> when you need −
Rich content like images, icons, or formatted text
Better styling control over button content
Submit buttons in forms (default behavior)
More semantic and accessible button markup
Use <input type="button"> when you need −
Simple text-only buttons
Consistent styling with other input elements
Non-submitting buttons in forms
Legacy compatibility requirements
Conclusion
The <button> element offers more flexibility with rich content support and better accessibility, while <input type="button"> provides a simpler approach for plain text buttons. Choose <button> for modern web development when you need content flexibility, and <input type="button"> for simple, text-only interactive elements.
2K+ Views
