The button is playing a very important role in a web application. Such as a filled form, sign in, sign up, etc. Every place where the action required from users needed a Button. In Html, you can use the button with 2 ways- <input> tag and <button> tag. In this tutorial, we will learn about HTML Input Button and see its examples.
Syntax
It’s easy to use, just write <input> tag and type=”button”. Here is a simple HTML Input Type Button syntax.
<input type="button">Example | How to use
See below, for example, HTML Input Button text. It’s using the same <input> tag as an earlier tutorial – Input text box, Radio button, Checkbox.
<!DOCTYPE html>
<html>
<body>
<h2>HTML TextArea Input</h2>
<input type="button" value="favorite">
</body>
</html>Output: See below simple button example screenshot.
Event | HTML Input Button onClick
When the user wants to take action that time onClick methods work. It will either hit the server or any javascript. In this HTML Input Button onClick Example we will look at how to perform JavaScript function.
<!DOCTYPE html>
<html>
<body>
<h2>HTML button onclick Event</h2>
<button onclick="myFunction()">Click me</button>
<p id="txt"></p>
<script>
function myFunction() {
document.getElementById("txt").innerHTML = "Button is working";
}
</script>
</body>
</html>Output: See below GIF image how it looks.
Value | Get
In the HTML input type button, the value attribute will show to the user. Whatever you will write on value=” Click…etc”, the same content shows to the user. See the example and output for the same.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Input Button</h2>
<input type="button"
value=" Click...etc">
</body>
</html>
Q: How to the HTML input button disabled?
Answer: Use a disabled attribute in <input> tag. See below line of code to how to write code of input button disabling.
<input type="button" value="favorite" disabled="">After its user unable to click the button, another option is doing enabling and disabling buttons at runtime. Like the below code. By this, you can set a timeout session in the password reset button. A true means disabled and false means enabled.
button.disabled = trueImage | How to set
Some time is required to show the image in button. But how you can create an HTML input button image?
For that use input type as an image (type=”image”), and give source path off will with file (src=”path+name”). Src (source) is an attribute that gets the image for the button. See below the line of the code
<input type="image" id="image" alt="Login" src="fevicon.png" width="40">Size | HTML input button Width and Height
Using Internal or external CSS you can set HTML input button width and Height. Changing the size of the button is easy to see below the code of the internal CSS input button example to change the
<!DOCTYPE html>
<html>
<body>
<h2>HTML input button</h2>
<input type="submit" id="search" value="Search" style="width: 120px; height: 20px;" />
</body>
</html>
Input type Button CSS | Style |Color
By using CSS in the input type button you can change the style and color of it. Let’s see the one by one example, how to do it.
Input button Color
A using an Inline CSS to change button color.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>HTML input button</h2>
<input type="button" value="Download PDF"
style="background-color:#a70900; color:#ffffff;"/>
</body>
</html>
HTML input button style
Let’s do some style in the input type button with CSS. For this example, we will use Internal CSS. Where change the text color, size, background, border, etc.
<!DOCTYPE html>
<html>
<style>
input[type=button], input[type=submit], input[type=reset] {
background-color: #89ui98;
border: none;
color: white;
padding: 16px 32px;
margin: 4px 2px;
cursor: pointer;
font-size: 18px;
}
</style>
</head>
<body>
<h2>HTML input button style</h2>
<input type="button" value="Button">
</html>Output: How to look like a button, see below.
Q: How Create HTML button onClick link?
Answer: You can make <input> tag with <a> tag to do button as Link like this. See the below code line.
Do comment if you have any doubts and suggestions for this tutorial.
Note: The HTML Input Button Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version