feat(ui5-button): introduce support for form attribute (#13321)

This PR introduces the form property to ui5-button, enabling buttons to submit forms even when placed outside the form element. This brings the component in line with native HTML button behavior.

## Usage:
The form property in the ui5-button takes in an ID of a form as a string allowing the button to submit the associated form:

```ts
<form id="externalForm">
    <!-- form fields -->
</form>

<ui5-button form="externalForm" type="Submit">Submit</ui5-button>
```

Fixes: #7459

Author: didip1000

packages/base/src/features/InputElementsFormSupport.ts

@@ -8,6 +8,22 @@ interface IFormInputElement extends UI5Element {
 	formElementAnchor?: () => HTMLElement | undefined | Promise<HTMLElement | undefined>;
 }
 
+/**
+ * Gets the associated form for an element.
+ * If the element has a `form` attribute, it looks up the form by ID.
+ * Otherwise, it falls back to the form associated via ElementInternals.
+ */
+const getAssociatedForm = (element: UI5Element): HTMLFormElement | null => {
+	const formAttribute = element.getAttribute("form");
+
+	if (formAttribute) {
+		const form = document.getElementById(formAttribute);
+		return form instanceof HTMLFormElement ? form : null;
+	}
+
+	return element._internals?.form ?? null;
+};
+
 const updateFormValue = (element: IFormInputElement | UI5Element) => {
 	if (isInputElement(element)) {
 		setFormValue(element);
@@ -46,15 +62,22 @@ const setFormValidity = async (element: IFormInputElement) => {
 };
 
 const submitForm = async (element: UI5Element) => {
-	const elements = [...(element._internals?.form?.elements ?? [])] as Array<IFormInputElement | UI5Element>;
+	const form = getAssociatedForm(element);
+
+	if (!form) {
+		return;
+	}
+
+	const elements = [...form.elements] as Array<IFormInputElement | UI5Element>;
 
 	await Promise.all(elements.map(el => { return isInputElement(el) ? setFormValidity(el) : Promise.resolve(); }));
 
-	element._internals?.form?.requestSubmit();
+	form.requestSubmit();
 };
 
 const resetForm = (element: UI5Element) => {
-	element._internals?.form?.reset();
+	const form = getAssociatedForm(element);
+	form?.reset();
 };
 
 const isInputElement = (element: IFormInputElement | UI5Element): element is IFormInputElement => {

packages/main/cypress/specs/Button.cy.tsx

@@ -638,4 +638,128 @@ describe("Accessibility", () => {
 				expect(info.description).to.include("Negative Action");
 			});
 	});
+});
+
+describe("Button form attribute", () => {
+	it("should submit an external form using form attribute", () => {
+		const submitSpy = cy.spy().as("submitSpy");
+
+		cy.mount(
+			<div>
+				<form id="externalForm" onSubmit={e => {
+					e.preventDefault();
+					submitSpy();
+				}}>
+					<input name="test" defaultValue="value" />
+				</form>
+				<Button form="externalForm" type="Submit">Submit External Form</Button>
+			</div>
+		);
+
+		cy.get("[ui5-button]")
+			.realClick();
+
+		cy.get("@submitSpy")
+			.should("have.been.calledOnce");
+	});
+
+	it("should reset an external form using form attribute", () => {
+		cy.mount(
+			<div>
+				<form id="resetForm">
+					<input name="test" id="testInput" defaultValue="initial" />
+				</form>
+				<Button form="resetForm" type="Reset">Reset External Form</Button>
+			</div>
+		);
+
+		// Change the input value
+		cy.get("#testInput")
+			.clear()
+			.realType("changed");
+
+		cy.get("#testInput")
+			.should("have.value", "changed");
+
+		// Click the reset button
+		cy.get("[ui5-button]")
+			.realClick();
+
+		// Verify the form was reset
+		cy.get("#testInput")
+			.should("have.value", "initial");
+	});
+
+	it("should not submit when form attribute references non-existent form", () => {
+		const submitSpy = cy.spy().as("submitSpy");
+
+		cy.mount(
+			<div>
+				<form id="realForm" onSubmit={e => {
+					e.preventDefault();
+					submitSpy();
+				}}>
+					<input name="test" defaultValue="value" />
+				</form>
+				<Button form="nonExistentForm" type="Submit">Submit</Button>
+			</div>
+		);
+
+		cy.get("[ui5-button]")
+			.realClick();
+
+		cy.get("@submitSpy")
+			.should("not.have.been.called");
+	});
+
+	it("should prioritize form attribute over parent form", () => {
+		const parentFormSubmitSpy = cy.spy().as("parentFormSubmit");
+		const externalFormSubmitSpy = cy.spy().as("externalFormSubmit");
+
+		cy.mount(
+			<div>
+				<form id="externalForm" onSubmit={e => {
+					e.preventDefault();
+					externalFormSubmitSpy();
+				}}>
+					<input name="external" defaultValue="external" />
+				</form>
+				<form id="parentForm" onSubmit={e => {
+					e.preventDefault();
+					parentFormSubmitSpy();
+				}}>
+					<input name="parent" defaultValue="parent" />
+					<Button form="externalForm" type="Submit">Submit External</Button>
+				</form>
+			</div>
+		);
+
+		cy.get("[ui5-button]")
+			.realClick();
+
+		cy.get("@externalFormSubmit")
+			.should("have.been.calledOnce");
+		cy.get("@parentFormSubmit")
+			.should("not.have.been.called");
+	});
+
+	it("should fall back to parent form when form attribute is not set", () => {
+		const submitSpy = cy.spy().as("submitSpy");
+
+		cy.mount(
+			<form onSubmit={e => {
+				e.preventDefault();
+				submitSpy();
+			}}>
+				<input name="test" defaultValue="value" />
+				<Button type="Submit">Submit Parent Form</Button>
+			</form>
+		);
+
+		cy.get("[ui5-button]")
+			.realClick();
+
+		cy.get("@submitSpy")
+			.should("have.been.calledOnce");
+	});
 });

packages/main/src/Button.ts

@@ -204,6 +204,19 @@ class Button extends UI5Element implements IButton {
 	@property({ type: Boolean })
 	submits = false;
 
+	/**
+	 * Associates the button with a form element by the form's `id` attribute.
+	 * When set, the button can submit or reset the specified form even if the button
+	 * is not a descendant of that form.
+	 *
+	 * **Note:** This property takes effect only when the button's "type" property is set to "Submit" or "Reset".
+	 * @default undefined
+	 * @public
+	 * @since 2.21.0
+	 */
+	@property()
+	form?: string;
+
 	/**
 	 * Defines the tooltip of the component.
 	 *

packages/main/test/pages/Button.html

@@ -309,6 +309,22 @@
 		<ui5-button type="Reset">Reset</ui5-button>
 	</form>
 
+	<br />
+	<br />
+	<ui5-title>Buttons with form attribute (outside form)</ui5-title>
+	<br />
+	<form id="externalForm" onsubmit="handleExternalFormSubmit(event)">
+		<ui5-label>External Form:</ui5-label>
+		<ui5-input id="externalFormInput" name="externalInput" value="External form input"></ui5-input>
+	</form>
+	<br />
+	<p>These buttons are outside the form but control it via the <code>form</code> attribute:</p>
+	<ui5-button form="externalForm" type="Submit" design="Emphasized">Submit External Form</ui5-button>
+	<ui5-button form="externalForm" type="Reset">Reset External Form</ui5-button>
+	<span id="externalFormMessage" style="color: green; display: none; margin-left: 10px;">Form submitted!</span>
+	<br />
+	<br />
+
 	<ui5-button id="openDialogButton" design="Emphasized">Show Registration Dialog</ui5-button>
 
 	<ui5-dialog id="registration-dialog" header-text="Register Form">
@@ -413,6 +429,19 @@
 		btnInLink.addEventListener("ui5-click", (e) => {
 			e.preventDefault();
 		});
+
+		function handleExternalFormSubmit(event) {
+			event.preventDefault();
+			const formData = new FormData(event.target);
+			const values = Object.fromEntries(formData.entries());
+			const message = document.getElementById('externalFormMessage');
+			message.textContent = 'Submitted: ' + JSON.stringify(values);
+			message.style.display = 'inline';
+			setTimeout(() => {
+				message.style.display = 'none';
+			}, 5000);
+		}
+		window.handleExternalFormSubmit = handleExternalFormSubmit;
 	</script>
 
 </body>