In this tutorial we will show you how to disable a button in HTML, you can disable a button element in html with the help of disabled attribute. As, disabled attribute is a Boolean attribute, that allows you to disable a button or an element from an html code and helps in making the element unusable from the browser.
The button with disabled attribute is un-clickable. It is also used by someone to agree from the user to click on all the checkboxes to fulfill all agreements and give some permissions according to user’s choices.
Step By Step Guide On How To Disable A Button In HTML :-
By using HTML disabled attribute
As we know, HTML button tag is used to submit something like form or send an information from webpage to another. Sometimes, due to some reasons or for just practice we want a disabled button.
Disabled button like the webpage show button, but the button is not in working condition. A general use of disabled attribute with the help of codes is given here...
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<button disabled="disabled">
Sign in
</button>
<button type="button" disabled>Click Me!</button>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, as shown in code we use button tag in which we use disabled attribute by two ways. No worry, both the ways are correct. You may try both of them and both are in working condition.
- One thing to inform is that the disabled button is always grey in color and looks different from actual real working button. You can also use an id or class anything to use disabled attribute.
- Also, button tag is paired tag. So, we have to use both open and closing tags. The text written between these tags is the text that actually shows on the button, it may be sign up, click here, click me and click to login, etc.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
As we know now, a disabled attribute is used to disable a button in html. But it also makes possible with the use of JavaScript in which we use get element by id.
Also, we want to enable a disable button we have to use JavaScript and have to give a false value to disabled button also. I hope this tutorial on how to disable a button in HTML helps you.
About Riya
