Here is an example of using the Form in a plain html page:
<html>
<head>
<title>Form Submission Test</title>
<link href="https://developer.temenos.com/uux/base.css" rel="stylesheet" />
<script src="https://developer.temenos.com/uux/unified-ux-web.min.js"></script>
</head>
<body onload="init()">
<uwc-form>
<form method="post" action="https://httpbin.org/post" target="_blank">
<uwc-grid container>
<uwc-text-field
name="firstName"
label="First Name"
required
value="David"
pattern="[a-zA-Z0-9]{3,}"
validationMessage="Must be 3 or more characters"
></uwc-text-field>
<uwc-text-field
name="lastName"
label="Last Name"
required
pattern="[a-zA-Z0-9]{3,}"
validationMessage="Must be 3 or more characters"
></uwc-text-field>
<uwc-checkbox name="agreementGiven" label="I agree"></uwc-checkbox>
</uwc-grid>
<uwc-grid container spacing="2">
<uwc-grid item>
<uwc-button type="reset" outlined label="Reset"></uwc-button>
</uwc-grid>
<uwc-grid item>
<uwc-button type="submit" name="button" value="defaultSubmitButton" label="Submit" cta></uwc-button>
</uwc-grid>
</uwc-grid>
</form>
</uwc-form>
</body>
<script>
function init() {
document.querySelector("uwc-form").addEventListener("submit", (e) => e.detail.submitIfValid());
}
</script>
</html>