Forms
In our Sample application, under the students tab - lets consider the 'New Registration Form' and see how it works and what are the elements used to construct this basic form.
The form looks like this:
Considering the various form elements, we see that there are some dropdowns with a list of options from which one can be selected.
For eg: The department:
This list is being pulled from the database table called lkup_department which looks like this:
We see from above that the departments in the dropdown are the labels in the lkup_department table.This labels are then mapped to the fact table which stores all the information we provide in the forms. Similarly, the other elements like the status and the gender have respective tables with data which is being populated as dropdowns on the form.
The html behind this form 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>- The require function in the above html defines all the form element controls required to create the above form and looks like this:
require(['dom/form/checkbox','dom/form/select','dom/form/date','dom/form/text'],Here we see that we have used a checkbox, select, date and text controls for this form.
-The form we create has to be parsed and hence we need two attributes in the function - the formId - which is the name of the form we define and fact: which is the table name of the fact in the database where you want all the fields submitted to go into.
quickforms.parseForm( //formId*, app, fact*, callback
{formId:'mainForm',fact:'Registration' });Each type of form element can be picked from the library of the controls which has various options.Controls
Note: Each form element is a control and hence we need to add those controls to the "require function" which we saw above.
The code for the different form elements looks like this:
<!--ADD FORM ELEMENTS HERE-->
<label for="FirstName" class ="ui-input-text">First Name</label>
<input type="text" id ="FirstName" name ="FirstName" />
<!--Input Text-->
<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"/>
<!--Select-->
<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>
<!--Checkbox-->
<label for="Agreement">Register for the Term</label>
<input type="checkbox" name="Agreement" id="Agreement" value="1">The controls we used here are - text, select, date and checkbox.
To learn more about how to create a form for your application, follow the below tutorial: