Form Component Implementation - fgta5js Documentation

Step 1: Embed Script and CSS

To use fgta5js components, first include the production stylesheet and JavaScript modules via the official CDN URLs:

Stylesheet URL:

https://rawcdn.githack.com/fgta5/fgta5js/demo-server/dist/fgta5js-v1.9.2.min.css

JavaScript Library URL:

https://rawcdn.githack.com/fgta5/fgta5js/demo-server/dist/fgta5js-v1.9.2.min.js

Step 2: HTML Structure

Embed the library inside the standard HTML boilerplate. Include the css stylesheet inside the <head>, the form inside the <body>, and load the module script.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Textbox</title>
	<link rel="stylesheet" href="https://rawcdn.githack.com/fgta5/fgta5js/demo-server/dist/fgta5js-v1.9.2.min.css">
</head>

<body>
	<div style="width: 500px;">
		<form id="main_form" locked="true">
			<div class="demo-input-field" field="obj_name">
				<label for="obj_name">Full Name</label>
				<input id="obj_name" fgta5-component="Textbox" required minlength="3">
			</div>
		</form>
	</div>

	<!-- Load library bundle -->
	<script type="module"
		src="https://rawcdn.githack.com/fgta5/fgta5js/demo-server/dist/fgta5js-v1.9.2.min.js"></script>
</body>
</html>

Step 3: Script Block

Add the script block to initialize the components and unlock the form for editing after page load.

<script type="module">
	window.addEventListener("load", async () => {
		// Initialize component
		const form = new $fgta5.Form('main_form')
		form.render()


		// make form editable
		form.lock(false)
	})
</script>

Download textbox.html Example Live Preview

Step 1: Embed Script and CSS

Stylesheet URL:

JavaScript Library URL:

Step 2: HTML Structure

Step 3: Script Block

See Also