Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Radio type property
The HTML DOM Input Radio type property returns the type attribute value of an input radio element. Since this property is associated with radio input elements, it always returns "radio" as a string value.
Syntax
Following is the syntax for accessing the radio type property −
radioObject.type
Return Value
The type property returns a string representing the type of the input element. For radio buttons, this will always be "radio".
Example
Following example demonstrates how to get the type property of a radio input element −
<!DOCTYPE html>
<html>
<head>
<title>Input Radio Type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Radio Type Property</h2>
<form>
<p>Select your favorite fruit:</p>
<input type="radio" name="fruits" id="mango" value="mango">
<label for="mango">Mango</label><br>
<input type="radio" name="fruits" id="apple" value="apple">
<label for="apple">Apple</label><br>
<input type="radio" name="fruits" id="orange" value="orange">
<label for="orange">Orange</label>
</form>
<br>
<button type="button" onclick="getRadioType()">Get Type</button>
<p id="result"></p>
<script>
function getRadioType() {
var radioElement = document.getElementById("mango");
var typeValue = radioElement.type;
document.getElementById("result").innerHTML = "The type for the input field is: " + typeValue;
}
</script>
</body>
</html>
The output of the above code is −
Select your favorite fruit: ? Mango ? Apple ? Orange [Get Type] (After clicking the button) The type for the input field is: radio
How It Works
The example above works as follows −
-
We create a form containing three radio input elements with the same
name="fruits"attribute, making them part of the same radio button group. -
Each radio button has a unique
idattribute for individual identification and a corresponding<label>element for better accessibility. -
The
getRadioType()function usesgetElementById("mango")to access the first radio button and retrieves itstypeproperty. -
The returned value
"radio"is then displayed in the result paragraph usinginnerHTML.
Example − Checking Multiple Radio Types
Following example shows how to check the type property of multiple radio elements −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Radio Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple Radio Button Groups</h2>
<form>
<fieldset>
<legend>Size:</legend>
<input type="radio" name="size" id="small" value="small">
<label for="small">Small</label><br>
<input type="radio" name="size" id="large" value="large">
<label for="large">Large</label>
</fieldset>
<br>
<fieldset>
<legend>Color:</legend>
<input type="radio" name="color" id="red" value="red">
<label for="red">Red</label><br>
<input type="radio" name="color" id="blue" value="blue">
<label for="blue">Blue</label>
</fieldset>
</form>
<br>
<button type="button" onclick="checkAllTypes()">Check All Radio Types</button>
<p id="output"></p>
<script>
function checkAllTypes() {
var radios = document.querySelectorAll('input[type="radio"]');
var result = "Found " + radios.length + " radio elements:<br>";
for (var i = 0; i < radios.length; i++) {
result += "Radio " + (i + 1) + " (id: " + radios[i].id + ") type: " + radios[i].type + "<br>";
}
document.getElementById("output").innerHTML = result;
}
</script>
</body>
</html>
The output shows all radio elements and their type property −
Size: ? Small ? Large Color: ? Red ? Blue [Check All Radio Types] Found 4 radio elements: Radio 1 (id: small) type: radio Radio 2 (id: large) type: radio Radio 3 (id: red) type: radio Radio 4 (id: blue) type: radio
Key Points
-
The
typeproperty is read-only for input elements. You cannot change the type of an input element after it has been created. -
For radio input elements, the
typeproperty always returns the string"radio". -
This property is useful for form validation and dynamic form handling where you need to identify the type of input elements programmatically.
-
The property is case-sensitive and returns lowercase values.
Browser Compatibility
The Input Radio type property is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. This property has been part of the DOM specification since early versions and enjoys universal support.
Conclusion
The HTML DOM Input Radio type property provides a simple way to programmatically identify radio input elements. It always returns "radio" as a string value and is particularly useful in form validation scripts and dynamic form manipulation scenarios where you need to determine the input element type at runtime.
236 Views
