- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Input Color type Property
<p>The HTML DOM Input Color type property returns/sets type of Input Color.</p><h2>Syntax</h2><p>Following is the syntax −</p><ul class="list"><li>Returning string value</li></ul><pre class="result notranslate">inputColorObject.type</pre><ul class="list"><li>Setting <strong>type </strong>to string value</li></ul><pre class="result notranslate">inputColorObject.type = stringValue</pre><h2>String Values</h2><p>Here, “<strong>stringValue</strong>” can be the following −</p><table class="table table-bordered"><thead><tr><th style="width: 17.619%; text-align: center;">stringValue</th><th style="width: 82.2449%; text-align: center;">Details</th></tr></thead><tbody><tr><td style="width: 17.619%;">Color</td><td style="width: 82.2449%;">It defines that input type is color</td></tr><tr><td style="width: 17.619%;">Radio</td><td style="width: 82.2449%;">It defines that input type is radio</td></tr><tr><td style="width: 17.619%;">Text</td><td style="width: 82.2449%;">It defines that input type is text</td></tr></tbody></table><h2>Example</h2><p>Let us see an example of <strong>Input Color type</strong> property −</p><p><a class="demo" href="http://tpcg.io/eMJNW6" rel="nofollow" target="_blank"> Live Demo</a></p><pre class="prettyprint notranslate"><!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></pre><h2>Output</h2><p>This will produce the following output −</p><p>Before clicking <strong>‘Get type & change to text’</strong> button −</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/25449/get_type.jpg" class="fr-fic fr-dib" style="width:600px; height:111px;" width="600" height="111"></p><p>After clicking <strong>‘Get type & change to text’</strong> button −</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/25449/after_get_type.jpg" class="fr-fic fr-dib" style="width:600px; height:112px;" width="600" height="112"></p>
Updated on 30-Jul-2019 22:30:26
- Related Questions & Answers
- HTML DOM Input Color autofocus Property
- HTML DOM Input Color defaultValue Property
- HTML DOM Input Color disabled Property
- HTML DOM Input Color form Property
- HTML DOM Input Color name Property
- HTML DOM Input Color value Property
- HTML DOM Input Datetime type Property
- HTML DOM Input DatetimeLocal type Property
- HTML DOM Input Email type Property
- HTML DOM Input Text type Property
- HTML DOM Input Time type Property
- HTML DOM Input URL type Property
- HTML DOM Input Week type Property
- HTML DOM Input Button type Property
- HTML DOM Input FileUpload type Property
Advertisements