Tutorial: Form with labels below the fields

In this tutorial, a Form with Labels will be created below the fields using the example table “employees” and the following extra resources:

  • Blocks.
  • Pages .

Creating a Form with Labels below the fields

Note:
If you have any questions on how to create a Form, go to:  Creating a new Form


1. Create a new Form- type application , select the “Single Record” option  and then select the “employees” sample table .



2. Once this is done, if you want a better display of the form, click on the “Edit Fields” tab and change the name of the highlighted fields, as shown in the images below.



Editing Form fields with Labels below the fields


1. First, in the application menu, access the “Layout” tab and select the “Pages” option.


2. Once this is done, rename the existing page to “Personal Information” , create a new page, called “Annotations” , and then click on the “Include” button as shown in the image below.



3. Now, still in the “Layout” tab , select the “Blocks” option .



4. Once this is done, rename the existing block to “Personal Information”  and configure it according to the image below.



5. Still in the block settings, click on the “Create New Block” button and create a new block entitled “Address”.


6. After creating the “Address” block , create another block entitled “Notes”.


6. Now, place the “Address” block on “Pag1” and configure it according to the image below.


7. After configuring the previous block, configure the “Annotations” block according to the image below and keep it in “Pag2” .


8. Once this is done, in the application menu, access the “Field Positioning” tab  .




9. Now, move the fields: “employeeid” , “titleofcourtesy” , “homephone” , “photo” , “reportsto”, “photopath” and “extension” to the  left box , as shown below.


10. Then, organize the fields in their respective blocks and pages, as shown in the image below.


11. Finally, select the  “Run Application” button  on the toolbar to generate the Form.




That done, after following the steps above, the Form will look like this:



To see more examples created using Scriptcase, go to:  Examples: Complete Systems and Applications with Scriptcase.

Tutorials in the same category

Tutorial: Multi Step Form

In this sample we’ll see how to create a multi step form. The form will be more nice, intuitive an...

Responsive login form 3

To learn how to use the templates available within the ScriptCase in the security module, follo...

Responsive login form 2

To learn how to use the templates available within the ScriptCase in the security module, follo...

Responsive login form

To learn how to use the templates available within the ScriptCase in the security module, follo...

Comment this post