HTML DOM Input Color type Property

HTML Web Development Front End Technology

The HTML DOM Input Color type property returns/sets type of Input Color.

Syntax

Following is the syntax −

Returning string value

inputColorObject.type

Setting type to string value

inputColorObject.type = stringValue

String Values

Here, “stringValue” can be the following −

stringValue	Details
Color	It defines that input type is color
Radio	It defines that input type is radio
Text	It defines that input type is text

Example

Let us see an example of Input Color type property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Input Color Type</title>
</head>
<body>
<form id="formForColorsInput">
Color Picker: <input type="color" id="Color" name="primaryColor" value="#0000ff">
</form>
<button onclick="changeNameValue()">Get type & change to text</button>
<div id="divDisplay"></div>
<script>
   var inputColor = document.getElementById("Color");
   var divDisplay = document.getElementById("divDisplay");
   divDisplay.textContent = 'Type of Input: '+inputColor.type;
   function changeNameValue() {
      if(inputColor.type == 'color'){
         var defaultColor = inputColor.defaultValue;
         inputColor.type = 'text';
         inputColor.value = defaultColor;
         divDisplay.textContent = 'Name of color input: '+inputColor.type;
      }
   }
</script>
</body>
</html>