Table of Contents

Introduction

In this article, we will guide you through the process of creating a custom input field using HTML. In Joget, you can create an input field in HTML and save the value directly into the database without configuring the connection. In this demonstration, we will create 3 different input fields:

• Text Field
• Date Field
• Checkbox Field

Do note that we are not limited to only these fields and that there are various other fields you can implement into the form.

Implementation

Here is what the JavaScript code looks like for each field:

<input type="text" name="name" value=""><br>

<input type="date" id="dob" name="dob" value="">

<input type="checkbox" id="agreement" name="agreement" value="agree">
<label for="agreement">I agree to the terms and conditions</a></label><br><br>

Here is what it would look like inside a Custom HTML field:

Figure 1: Custom HTML Field

Please ensure that the "Auto Populate Saved Value?" setting is enabled. This setting ensures the field is automatically populated whenever the form is loaded.

Runtime

Once you have implemented the fields, here is what it would look like in runtime:

Figure 2: Published Form

Figure 3: Published List

Download the Sample App