Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to change the <input> type?

  • Difficulty Level : Hard
  • 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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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.

My Personal Notes arrow_drop_up
Recommended Articles
Page :