Change type attribute of Input Element With JavaScript

In this tutorial we will see How To Change type attribute of Input Element With JavaScript. HTML DOM type Property can be used to change the value of type attribute of input element.

HTML Code

HTML Code is given below, in this code we have one HTML input element and seven buttons, each to change the type of input element.

<input type="text" id="input">
<br><br>    
<button onclick="pass()">Password Type</button>
<button onclick="number()">Number Type</button> 
<button onclick="email()">Email Type</button>
<button onclick="file()">File Type</button>
<button onclick="radio()">Radio Type</button>
<button onclick="color()">Color Type</button>
<button onclick="date()">Date Type</button> 

JavaScript Code

Take a look at the JavaScript code, the HTML Dom type property is used to change the type attribute of input element.

onclick event is used to trigger the seven different functions, for each button, to change type of input element to seven different types.

<script>
function pass()
{
document.getElementById('input').type='password';
}
function number()
{
document.getElementById('input').type='number';
}
function email()
{
document.getElementById('input').type='email';
}
function file()
{
document.getElementById('input').type='file';
}
function radio()
{
document.getElementById('input').type='radio';
}
function color()
{
document.getElementById('input').type='color';
}
function date()
{
document.getElementById('input').type='date';
}
</script>

HTML DOM type Property

.type Property sets or returns the type of the input element.

Types of Input Element

Different types of input elements are listed below, we have used just seven in this example.

<input type="text">
<input type="email">
<input type="hidden">
<input type="file">
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="submit">
<input type="image">
<input type="datetime-local">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="tel">
<input type="time">
<input type="url">
<input type="week">

Demo

Video Tutorial

Watch video tutorial on Change type attribute of Input Element With JavaScript.

Password Show Hide with Eye Icon using JavaScript Change Background Color using Dropdown menu with JavaScript Get Select Tag value onchange in JavaScript Check If Class Exists JavaScript Add Event Listener To all Elements of Class JavaScript getElementsByTagName Event Listener JavaScript Change type attribute of Input Element With JavaScript Password Hide and Show with Toggle Emoji Button using JavaScript Hide and Show Navbar On Scroll With JavaScript Empty an Array in JavaScript Get Last Element Of Array Without Removing It Remove Last Element From Array JavaScript Remove First Element From Array in JavaScript Tic Tac Toe Game in JavaScript Remove Class from HTML Tag OnClick JavaScript JavaScript Select li Tag By Index Display JavaScript Variable In HTML Insert HTML Code anywhere With JavaScript JavaScript Date Difference in Days JavaScript Hide Button After Click Simple Click and Hold Effect Using JavaScript Remove Class From All Elements in JavaScript JavaScript Select All HTML Elements Whose ID Start With Same String