How to deactivate a button in HTML. Also explain the difference from non-display!

When creating a website, you may think, “I don’t want you to press the button until the input is completed.”
In such a case, it is effective to make the button “inactive” so that the button cannot be pressed.
This article explains how to deactivate a button and how it differs from hiding.

How to deactivate a button in HTML

Buttons can be easily deactivated with just HTML.
If you set the “disabled” attribute to a tag that represents a button, such as the “button” tag or “input type=”button”” tag, it will be deactivated.
Note that the “disabled” attribute becomes effective just by adding it, so even if you set “disabled=”false””, it will be inactive.

How to switch button activation/deactivation

Deactivating a button naturally means that there is a timing when you want to activate it.
If you want to switch between this “active” and “inactive”, you need to change it with a programming language such as Javascript.

I will introduce a sample that activates the button when characters are entered in the input item and deactivates the button when the characters are deleted.

HTML

<form action="#">
  ユーザー名:
  <input id="username" name="username">
  <br>
  <button id="sendbutton" disabled>送信</button>
</form>

Javascript

window.onload = function(){
  const username = document.getElementById("username");
  const button = document.getElementById("sendbutton");
  username.addEventListener('keyup', function() {
    const text = username.value;
    console.log(text);
    if(text) {
      button.disabled = null;
    } else {
      button.disabled = "disabled";
    }
  })
}

Originally, in order to detect changes in input elements, it is common to use “addEventListener(‘change’, function() {~})”, but the event corresponding to change is focused from the text box It will be executed for the first time when you leave.
Therefore, when switching activation/deactivation in conjunction with keyboard input, it is common to acquire keyup, which acquires events according to the keyboard state.

Differentiating between “hidden” and “inactive”

By the way, there is also a method of “do not display the button” in order not to press the button.
Here is a sample to show/hide a button using Javascript.

CSS

.hidden {
  display: none;
}

HTML

<form action="#">
  <input id="username" name="username">
  <br>
  <button id="sendbutton" class="hidden">送信</button>
</form>

Javascript

window.onload = function(){
 
  // 
  const username = document.getElementById("username");
  // 
  const button = document.getElementById("sendbutton");
  
  username.addEventListener('keyup', function() {
    //
    const text = username.value;
    console.log(text);
    
    if(text) {
      // 
      button.className = null;
    } else {
      // 
      button.className = "hidden";
    }
  })
}

If you hide the button, it will not be displayed when it cannot be used, so the button will suddenly appear when the condition is cleared.
Whether inactive or hidden is more obvious depends on the situation.

Situations where it is better to deactivate

In the case of “buttons that can be used by the person himself /herself ,” such as pressing after completing the input of the required items, inactive is easier to understand.

Scenes that should be hidden

In the case of “buttons that the user does not have permission to operate” , such as operations that only administrators can do, it is easier to use if they are hidden.

summary

I introduced how to deactivate the button and the difference from hiding.

Whenever you create a page that manipulates something by typing something on the screen, you need a button.
Please choose the method that is easy to use according to the situation.