HTML Input Button onClick | Link, Disabled, Image and CSS

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.

HTML Input Button onClick Link, Disabled, Image and CSS

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.

HTML Input Button Example output

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.

HTML Input Button onClick example output

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>
html input type butto example
Output

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 = true

Image | 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 example.

<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 size of it.

<!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 color

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.

HTML input button style

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



Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.