Adding Elements to a Form

 

Prerequisites

(1) Complete the Hello World exercise and have your responsive design web site ready at http://localhost/dbnetrd. 

(2) Complete the Resource Files exercise.

Your developer tools are at: http://localhost/dbnetrd?ac=dev 

Your RD web site's physical folder is at: c:\inetpub\wwwroot\dbnetrd

Your theme file is at c:\inetpub\wwwroot\dbnetrd\res\demo\css\demo.css

(3) Complete the Page Types exercise.

 

Objectives

• Add additional form elements to your "hello" page.

 

Open the Hello World Page

Open the Forms Designer.

Press Alt-W or select Work Folder from the File menu. Check your Work Folder is set to your demo site.

Press Alt-O or select Open from the File Menu.

A list of existing files will be displayed.

Double-click the "hello" form created in the Hello World exercise.

 

Insert Element

After adding a form row to a column (using Ctrl+D and Ctrl+I) hover over the form row and right-click. The first option on the context menu is Insert Element. Focus on this option and the list of elements is displayed. In this exercise we will add each of the ten elements to our hello form.

 

HTML [Ctrl+K]

Use the HTML element to display something on your page. This could be an image, some text, or a field from a linked database definition.

Use Ctrl+P to open the properties of the form element.

Each form element is assigned a unique id. You can amend the id. DesignBais will ensure that the id remains unique by appending a character to your assigned value in the event that it clashes with another id. For this exercise set the id to myO utput.

Leave the style as text unless you are adding a CAPTCHA field.

Click the Event checkbox if you are going to link this form element to a database event handler. This could be a button or change event. An example would be where the user clicks the HTML element in order to, say, navigate to another form.

 

Text Input [Ctrl+M]

Use the auto icon to set the id to  text. Set Page 1 attributes as required.

On Page 2 set the validation options as required.

On Page 3 you can select Not a datalist, Database Look up, or Geolocation.

Typically and input field will use the first option. The other two options are also available on the Address form element. Database Look up requires the setting up of a look up list at the database end. Geolocation invokes a web-based address look up function, the Google address lookup for example.

The Buttons option on Page 4 allows for one or more buttons to be associated with text input element.

 

Lookup [Ctrl+L]

Use the auto icon to set the id to  lookup. Set Page 1 attributes as required.

On Page 3 you can select Not a datalist, Database Look up, or Geolocation.

Database Look up requires the setting up of a look up list at the database end. Geolocation invokes a web-based address look up function, the Google address lookup for example.

The Buttons option on Page 4 allows for one or more buttons to be associated with lookup element.

 

Address [Ctrl+A]

Use the auto icon to set the id to  address. Set Page 1 attributes as required.

On Page 3 you can select Not a datalist, Database Look up, or Geolocation.

Database Look up requires the setting up of a look up list at the database end.

Geolocation invokes a web-based address look up function, the Google address lookup for example.

The Buttons option on Page 4 allows for one or more buttons to be associated with address element.

 

Button [Ctrl+B]

Places a button on the form.

Use the auto icon to set the id to  button. Set the other attributes as required. Click the Event checkbox.

 

Select [Ctrl+S]

Use the auto icon to set the id to  select. Set the other attributes as required. Click the Event checkbox.

On Page 2 enter the values that you want to appear in the dropdown selection list.

Enter Text and Value then click Add.

Options that have been entered can be displayed by clicking the dropdown arrow in the input field in the Test Area.

 

Radio [Ctrl+R]

Use the auto icon to set the id to  radio. Set the other attributes as required. Click the Event checkbox.

Enter the id, value and text for your required radio buttons. Click Add to add each one. You may want to delete the two default radio buttons and enter all buttons so that you can set the id to your own value.

Radio buttons that have been entered are displayed in the Test Area.

 

Checkbox [Ctrl+H]

The default Label is set to Checkbox. Use the auto icon to set the Checkbox Group id to  checkbox.

By default there are two check boxes. These will have default ids. You can highlight each of these in turn and click the Remove Option button to delete them.

Then you can use the Add Checkbox to Group to enter your own id and text for the checkbox. Click the event checkbox to allow the database process after event to be called.

Text Area [Ctrl+E]

The default Label is set to TextArea. Use the auto icon to set the id to  textarea.

Enter mandatory and mask details as required. This allows you to specify which characters can be entered into this field. By default all printable characters can be entered.

 

File Upload [Ctrl+F]

The default Label is set to Upload. Use the auto icon to set the id to  upload.

Although the element can be made mandatory using the checkbox we recommend that all validation be done at the database end.

 

Save and Publish the Form

Press Alt-S to save your "hello" page.

Press Alt-L to publish your form.

 

Form Data Link

 

 

Test Point

In a new Chrome browser TAB navigate to http://localhost/dbnetrd?dbpage=demo-hello

Press CTRL+F5 to refresh the page.