Form Control
HTML5
The output element represents the result of a calculation or user action. It’s semantically meaningful for displaying values computed from form inputs or other interactions.
Interactive code playground requires JavaScript. Here's the code:
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<label for="a">First number:</label>
<input type="number" id="a" name="a" value="5">
<label for="b">Second number:</label>
<input type="number" id="b" name="b" value="10">
<p>
Result: <output name="result" for="a b">15</output>
</p>
</form>
< output name = " result " for = " input1 input2 " >
The for attribute lists the IDs of inputs that affect this output’s value.
Attribute Description Example forSpace-separated list of input IDs for="price quantity"nameName for form submission name="total"formAssociates with form by ID form="myForm"
Interactive code playground requires JavaScript. Here's the code:
<form oninput="sum.value = Number(x.value) + Number(y.value)">
<label for="x">X:</label>
<input type="number" id="x" name="x" value="0">
<label for="y">Y:</label>
<input type="number" id="y" name="y" value="0">
<p>
<strong>X + Y =</strong>
<output name="sum" for="x y">0</output>
</p>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume"
min="0" max="100" value="50"
oninput="volumeOutput.value = this.value">
<output id="volumeOutput" name="volumeOutput" for="volume">50</output>%
</form>
Interactive code playground requires JavaScript. Here's the code:
<form oninput="total.value = (price.value * quantity.value).toFixed(2)">
<label for="price">Price per item ($):</label>
<input type="number" id="price" name="price" value="10" step="0.01">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" value="1" min="1">
<p>
<strong>Total:</strong>
$<output name="total" for="price quantity">10.00</output>
</p>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="celsius">Celsius:</label>
<input type="number" id="celsius" name="celsius" value="0"
oninput="fahrenheit.value = (this.value * 9/5 + 32).toFixed(1)">
<p>
<strong>Fahrenheit:</strong>
<output id="fahrenheit" name="fahrenheit" for="celsius">32.0</output>°F
</p>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form id="loan">
<label for="amount">Loan Amount ($):</label>
<input type="number" id="amount" value="10000" min="1000" step="1000">
<label for="rate">Interest Rate (%):</label>
<input type="number" id="rate" value="5" min="0" step="0.1">
<label for="years">Years:</label>
<input type="number" id="years" value="5" min="1" max="30">
<p>
<strong>Monthly Payment:</strong>
$<output id="payment" for="amount rate years">188.71</output>
</p>
</form>
<script>
const form = document.getElementById('loan');
const amount = document.getElementById('amount');
const rate = document.getElementById('rate');
const years = document.getElementById('years');
const payment = document.getElementById('payment');
function calculate() {
const p = parseFloat(amount.value);
const r = parseFloat(rate.value) / 100 / 12;
const n = parseFloat(years.value) * 12;
if (r === 0) {
payment.value = (p / n).toFixed(2);
} else {
const monthly = (p * r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1);
payment.value = monthly.toFixed(2);
}
}
form.addEventListener('input', calculate);
calculate();
</script>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="weight">Weight (kg):</label>
<input type="number" id="weight" value="70" min="1">
<label for="height">Height (cm):</label>
<input type="number" id="height" value="170" min="1">
<button type="button" onclick="calculateBMI()">Calculate BMI</button>
<p>
<strong>BMI:</strong>
<output id="bmi" for="weight height">24.2</output>
</p>
</form>
<script>
function calculateBMI() {
const weight = parseFloat(document.getElementById('weight').value);
const height = parseFloat(document.getElementById('height').value) / 100;
const bmi = (weight / (height * height)).toFixed(1);
document.getElementById('bmi').value = bmi;
}
calculateBMI();
</script>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="red">Red:</label>
<input type="range" id="red" min="0" max="255" value="255">
<output id="redVal" for="red">255</output>
<label for="green">Green:</label>
<input type="range" id="green" min="0" max="255" value="0">
<output id="greenVal" for="green">0</output>
<label for="blue">Blue:</label>
<input type="range" id="blue" min="0" max="255" value="0">
<output id="blueVal" for="blue">0</output>
<div id="color-preview" style="width: 100px; height: 100px; margin-top: 10px; border: 1px solid #ccc;"></div>
<p>
<strong>Hex:</strong>
<output id="hex" for="red green blue">#ff0000</output>
</p>
</form>
<script>
const red = document.getElementById('red');
const green = document.getElementById('green');
const blue = document.getElementById('blue');
const preview = document.getElementById('color-preview');
const hex = document.getElementById('hex');
function updateColor() {
const r = parseInt(red.value);
const g = parseInt(green.value);
const b = parseInt(blue.value);
document.getElementById('redVal').value = r;
document.getElementById('greenVal').value = g;
document.getElementById('blueVal').value = b;
const hexColor = '#' +
r.toString(16).padStart(2, '0') +
g.toString(16).padStart(2, '0') +
b.toString(16).padStart(2, '0');
preview.style.backgroundColor = hexColor;
hex.value = hexColor;
}
[red, green, blue].forEach(input => {
input.addEventListener('input', updateColor);
});
updateColor();
</script>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="password">Password:</label>
<input type="password" id="password" minlength="8">
<p>
<strong>Strength:</strong>
<output id="strength" for="password">-</output>
</p>
</form>
<script>
document.getElementById('password').addEventListener('input', (e) => {
const password = e.target.value;
const output = document.getElementById('strength');
let strength = 'Weak';
if (password.length >= 12 && /[A-Z]/.test(password) &&
/[a-z]/.test(password) && /[0-9]/.test(password) &&
/[^A-Za-z0-9]/.test(password)) {
strength = 'Very Strong';
} else if (password.length >= 10 && /[A-Z]/.test(password) &&
/[a-z]/.test(password) && /[0-9]/.test(password)) {
strength = 'Strong';
} else if (password.length >= 8) {
strength = 'Medium';
}
output.value = password.length ? strength : '-';
});
</script>
Interactive code playground requires JavaScript. Here's the code:
<style>
.styled-output {
display: inline-block;
padding: 8px 16px;
background: #3b82f6;
color: white;
font-weight: 600;
border-radius: 6px;
min-width: 60px;
text-align: center;
}
</style>
<form oninput="result.value = parseInt(a.value) * parseInt(b.value)">
<input type="number" id="a" value="5" style="width: 60px;">
<strong>×</strong>
<input type="number" id="b" value="10" style="width: 60px;">
<strong>=</strong>
<output name="result" for="a b" class="styled-output">50</output>
</form>
Interactive code playground requires JavaScript. Here's the code:
<style>
.output-badge {
display: inline-block;
padding: 4px 12px;
background: #10b981;
color: white;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
}
</style>
<form>
<label for="score">Score:</label>
<input type="range" id="score" min="0" max="100" value="75"
oninput="scoreOutput.value = this.value">
<output id="scoreOutput" for="score" class="output-badge">75</output>
points
</form>
Interactive code playground requires JavaScript. Here's the code:
<style>
.result-box {
padding: 16px;
background: #f9fafb;
border: 2px solid #e5e7eb;
border-radius: 8px;
margin-top: 12px;
}
.result-box output {
font-size: 24px;
font-weight: 700;
color: #3b82f6;
}
</style>
<form oninput="discount.value = (price.value * (sale.value / 100)).toFixed(2)">
<label for="price">Original Price ($):</label>
<input type="number" id="price" name="price" value="100">
<label for="sale">Discount (%):</label>
<input type="number" id="sale" name="sale" value="20" min="0" max="100">
<div class="result-box">
<p>You save: $<output name="discount" for="price sale">20.00</output></p>
</div>
</form>
<!-- Semantically represents a calculation result -->
< form oninput = " total . value = a . value * b . value " >
< input type = " number " id = " a " value = " 5 " >
< input type = " number " id = " b " value = " 10 " >
< output name = " total " for = " a b " > 50 </ output >
Use when: Value is calculated from inputs, result relates to form data, or semantic meaning is important.
<!-- Generic text display -->
Current time: < span id = " time " > 12:00 PM </ span >
Use when: Not related to form calculations or displaying static/unrelated data.
Always use the for attribute to link output with related inputs:
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="hours">Hours worked:</label>
<input type="number" id="hours" name="hours" value="40">
<label for="rate">Hourly rate ($):</label>
<input type="number" id="rate" name="rate" value="25">
<p>
<strong>Total earnings:</strong>
<output name="earnings" for="hours rate"
oninput="this.value = (hours.value * rate.value).toFixed(2)">
1000.00
</output>
</p>
</form>
<script>
document.querySelector('form').addEventListener('input', () => {
const hours = document.getElementById('hours').value;
const rate = document.getElementById('rate').value;
const earnings = document.querySelector('output[name="earnings"]');
earnings.value = (hours * rate).toFixed(2);
});
</script>
Interactive code playground requires JavaScript. Here's the code:
<form oninput="result.value = input.value.length">
<label for="input">Enter text:</label>
<input type="text" id="input" name="input"
aria-describedby="char-count">
<p id="char-count">
Character count:
<output name="result" for="input" aria-live="polite">0</output>
</p>
</form>
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="celsius2">Temperature (°C):</label>
<input type="number" id="celsius2" value="0">
<p>
<label for="fahrenheit2">Fahrenheit:</label>
<output id="fahrenheit2" for="celsius2"
oninput="this.value = (celsius2.value * 9/5 + 32).toFixed(1)">
32.0
</output>°F
</p>
</form>
<script>
document.getElementById('celsius2').addEventListener('input', (e) => {
const f = (e.target.value * 9/5 + 32).toFixed(1);
document.getElementById('fahrenheit2').value = f;
});
</script>
< output name = " total " for = " price quantity " > $100.00 </ output >
< span id = " total " > $100.00 </ span >
Interactive code playground requires JavaScript. Here's the code:
<form>
<label for="principal">Principal ($):</label>
<input type="number" id="principal" value="1000" min="1">
<label for="interest">Interest (%):</label>
<input type="number" id="interest" value="5" min="0" step="0.1">
<label for="time">Time (years):</label>
<input type="number" id="time" value="1" min="1">
<p>
<strong>Total Interest:</strong>
$<output id="total-interest" for="principal interest time">50.00</output>
</p>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('input', () => {
const p = parseFloat(document.getElementById('principal').value);
const r = parseFloat(document.getElementById('interest').value) / 100;
const t = parseFloat(document.getElementById('time').value);
const interest = (p * r * t).toFixed(2);
document.getElementById('total-interest').value = interest;
});
</script>
Interactive code playground requires JavaScript. Here's the code:
<form oninput="updateCurrency()">
<label for="amount">Amount:</label>
<input type="number" id="amount" value="1234.56" step="0.01">
<p>
<strong>Formatted:</strong>
<output id="formatted" for="amount">$1,234.56</output>
</p>
</form>
<script>
function updateCurrency() {
const amount = parseFloat(document.getElementById('amount').value);
const formatted = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(amount);
document.getElementById('formatted').value = formatted;
}
updateCurrency();
</script>
Browser Version Notes Chrome 10+ Full support Firefox 4+ Full support Safari 7+ Full support Edge 13+ Full support IE ❌ Not supported
