Easy Tutorial
❮ Prop Week Form Prop Html Iscontenteditable ❯

Radio value Attribute


Definition and Usage

The value attribute sets or returns the value of the value attribute of a radio button.

For radio buttons, the content of the value attribute does not appear in the user interface. The value attribute is only used to transmit data to the server when the form is submitted. If a radio button is selected, its value will be sent to the server upon form submission (unselected buttons do not transmit data to the server).

Syntax

Set value attribute:

Return value attribute:


Browser Support

All major browsers support the value attribute.


Examples

Example 1

Display the value of the selected radio button:

<form>
Which color do you prefer?<br>
<input type="radio" name="colors" id="red" value="red">Red<br>
<input type="radio" name="colors" id="blue" value="blue">Blue<br>
<input type="radio" name="colors" id="green" value="green">Green
</form>
<button type="button" onclick="displayResult()">Display Selected Value</button>

Example 2

Display the value of the selected radio button:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
<script>
function displayResult(browser){
    document.getElementById("result").value=browser
}
</script>
</head>
<body>

<p>Select your favorite browser:</p>
<form>
<input type="radio" name="browser" onclick="displayResult(this.value)" value="Internet Explorer">Internet Explorer<br>
<input type="radio" name="browser" onclick="displayResult(this.value)" value="Firefox">Firefox<br>
<input type="radio" name="browser" onclick="displayResult(this.value)" value="Opera">Opera<br>
<input type="radio" name="browser" onclick="displayResult(this.value)" value="Google Chrome">Google Chrome<br>
<input type="radio" name="browser" onclick="displayResult(this.value)" value="Safari">Safari<br><br>
Your favorite browser is: <input type="text" id="result">
</form>

</body>
</html>

❮ Prop Week Form Prop Html Iscontenteditable ❯