How to Create a Form
This tutorial will teach you how to create the 'New Registration Form' for our sample application. The form will look like this:
See a bigger version of this image
- Inside your application folder create a new registrationForm.html file
Example: C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\sample\registrationForm.html
The sample application registrationForm.html file looks like this:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html class = "ui-mobile-rendering">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/quickforms/css/quickforms/quickforms.css" />
<script src = "/quickforms/js/require.min.js" ></script>
</head>
<body>
<script type="text/javascript">
require(['/quickforms/js/quickforms.js'],function(){
quickforms.registerReadyFunction(function()
{
// Do quickforms module loading here
require(['dom/form/checkbox','dom/form/select','dom/form/date','dom/form/text'],// Add this module to the list
function(){// ADD FACT TABEL NAME!
quickforms.parseForm( //formId*, app, fact*, callback
{formId:'mainForm',fact:'Registration' });
});
});
});
</script>
<div data-role="page" id="form">
<div data-role="header">
<h1> Student Registration</h1>
</div><!-- /header -->
<div data-role="content">
<form id ="mainForm" method="POST" action="putFact">
<!--ADD FORM ELEMENTS HERE-->
<label for="FirstName" class ="ui-input-text">First Name</label>
<input type="text" id ="FirstName" name ="FirstName" />
<label for="LastName" class ="ui-input-text">Last Name</label>
<input id ="LastName" name ="LastName" type ="text"/>
<!--Date Picker-->
<label for="DateofBirth" class ="ui-input-text">Date of Birth</label>
<input name="DateofBirth" id="DateofBirth" type="text" class="date">
<label for="Age" class ="ui-input-text">Age</label>
<input id ="Age" name ="Age" type ="text"/>
<label for="Gender" class ="ui-input-text">Gender</label>
<select id ="Gender" name ="Gender" data-native-menu="false" >
<option>Gender</option>
</select>
<label for="Status" class ="ui-input-text">Status</label>
<select id ="Status" name ="Status" data-native-menu="false">
<option>Status</option>
</select>
<label for="Department" class ="ui-input-text">Department</label>
<select id ="Department" name ="Department" data-native-menu="false">
<option>Department</option>
</select>
<label for="Agreement">Register for the Term</label>
<input type="checkbox" name="Agreement" id="Agreement" value="1">
<div class= "buttons">
<a onclick="quickforms.putFact(this,'forms.html');" data-role="button" data-icon="check" data-theme="b" data-inline="true">Register</a>
<a href="forms.html" onclick="history.back();" rel="external" data-role="button" data-inline="true" data-icon="back">Back</a>
</div>
</form><!--/form-->
</div><!--/content-->
<div data-role="footer">
<h4>-</h4>
</div><!--/footer-->
</div><!--/page-->
</body>
</html>-
NOTE - The following snapshot of your
<script>tag will give you important info about your quickform form creation:
See a bigger version of this image
The form has the following element controls: date, select, text and checkbox which are added to the require function. The labels with select controls are mapped to the respective names of lookup tables in a database which gives us the dropdown list on the front-end.
In order to create your own form, you have to describe the elements you would like to use in the require function and add the appropriate fact table name to which the values of this form go to.
In this case it says fact_registration which is the table name where the values of this form go to. The fact table looks like this:
The table above shows the columns attributes as - firstName(input field), lastName(input field), date of birth(datepicker), age(input field), gender(dropdown from gender lookup), status(dropdown), department(dropdown from department lookup), agreement (checkbox) and addedby gives the user who adds fields.
- Now when you test your application and click on 'New Registration Form' button, then you will see the 'New Registration Form'