Syntax
<form id="profile"></form>
<input form="profile" name="displayName">Examples
Controls Outside Their Form: working example
Save as an HTML file and open it in a browser. Expected result: Preview profile displays Ada in London even though the city field and submit button are outside the form.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Working example</title>
</head>
<body>
<form id="profile">
<label>Name <input name="name" value="Ada"></label>
</form>
<label>City <input form="profile" name="city" value="London"></label>
<button form="profile" type="submit">Preview profile</button>
<output id="preview"></output>
<script>
document.querySelector("#profile").addEventListener("submit", event => {
event.preventDefault();
const data = new FormData(event.currentTarget);
document.querySelector("#preview").textContent = `${data.get("name")} in ${data.get("city")}`;
});
</script>
</body>
</html>- Expected result: Preview profile displays Ada in London even though the city field and submit button are outside the form.
- The form attribute resolves the ID profile in the same document.
- FormData includes successful associated controls, not only descendants.
Best practices
- Keep IDs unique and the visual grouping understandable.
- Set form on each external control that needs association.
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
<input> form
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
From 1 - Edge
- Supported
From 12 - Opera
- Supported
By 12.1 (possibly earlier)
Mobile
- Safari on iOS
- Supported
From 1 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- From 1
Edge
- From 12
Opera
- By 12.1 (possibly earlier)
Safari on iOS
- From 1
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
<button> form
Desktop
- Chrome
- Supported
From 9 - Firefox
- Supported
From 4 - Safari
- Supported
From 5.1 - Edge
- Supported
From 16 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 5 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 9
Firefox
- From 4
Safari
- From 5.1
Edge
- From 16
Opera
- From 15
Safari on iOS
- From 5
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
<fieldset> form
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1 - Safari
- Supported
From 3 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 2 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1
Firefox
- From 1
Safari
- From 3
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 2
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.