How to change the <input> type?

Last Updated : 18 Apr, 2021

The purpose of this article is to change the HTML <input> type. Javascript provides document.getElementById().type option to change the type of input field.

Syntax:

The selected input type will change to text.

document.getElementById("id_of_tag_to_be_changed").type="text";

The selected input type will change to a button.

document.getElementById("id_of_tag_to_be_changed").type="button";

The selected input type will change to a date.

document.getElementById("id_of_tag_to_be_changed").type="date";

Example:

HTML

<!DOCTYPE html> 
<html> 
  <body> 
    <p> 
      Please click on Button2 to see the type  
      of Button1 change from button to text 
    </p> 
  
    <input
      id="inputfield1"
      type="button"
      value="Input1"
      onclick="alert('I am Input1 click on Input2 to see me change my type')"/> 
    <input
      id="inputfield2"
      type="button"
      value="Input2"
      onclick="typeChanger()"/> 
  </body> 
  <script> 
    function typeChanger() { 
      alert("The type of Input1 will now change from button to text"); 
      document.getElementById("inputfield1").type = "text"; 
    } 
  </script> 
</html> 

Output:

Input to text

Note: Some Old Browsers do not allow a dynamic change in the type of input fields.

Suggest improvement

How to specify multiple forms the select field belongs to in HTML ?

How to specify which form element a label is bound to ?

Share your thoughts in the comments

HTML Basic Examples

HTML Structural Examples

HTML Hyperlinks Examples

HTML Table Examples

HTML Form Examples

HTML Frame Examples

HTML Media Based

HTML Questions