Icon Using HTML Forms

HTML forms in Elevate Web Builder are represented by the THTMLForm control. HTML forms are the legacy way of allowing a user to input information into various controls on a form and have that information sent to the web server using an HTTP request. However, they are still useful because they provide a simple method of uploading files to a web server. The THTMLForm component is a simple container control, which gives you the option of having multiple sub-forms within the same form instance, each with its own ability to submit information independently of the other.

Input Controls
Any control that descends from the base TInputControl control class can be used as an input control for an HTML form. The Name property of the control instance is used as the field name within the HTML form and the field value is assigned internally via each control instance.

The following standard controls can be used as input controls in HTML forms:

ControlDescription
Image TCheckBoxCheck box control
Image TRadioButtonRadio button control
Image TEditSingle-line edit control
Image TPasswordEditSingle-line password edit control
Image TMultiLineEditMulti-line edit control
Image TListBoxList box control
Image TCalendarCalendar control
Image TButtonComboBoxButton combo box control
Image TEditComboBoxEditable combo box control
Image TDateEditComboBoxEditable date combo box control
Image TDialogEditComboBoxEditable dialog combo box control
Image TFileComboBoxFile upload combo box control

Submitting the Form
There are two ways to submit an HTML form to the web server:
  • By using the THTMLForm instance's Submit method.


  • By assigning the THTMLForm instance to a TServerRequest instance using the TServerRequest Assign method and then executing the request. This technique is sometimes preferable with file uploads because it allows you to track the progress of the upload using a TServerRequest OnProgress event handler, and it prevents the web browser from navigating away from the client application in response to the HTML form submission.
Submitting the Form Using the THTMLForm Submit Method

In order to submit the input information as an HTTP POST request to the web server using the THTMLForm Submit method, complete the following steps:
  • Make sure that the THTMLForm instance's Encoding property is set to feMultiPartFormData. You can use other encoding types, but this is the default and supports the most common type of form submission, including submitting files using the TFileComboBox control.


  • Make sure that the THTMLForm instance's Method property is set to fmPost. This is the default value, so you'll probably never need to change this property.


  • Make sure that the THTMLForm instance's URL property is set to the desired URL.


  • Call the THTMLForm instance's Submit method to perform the HTML form submission.
Submitting the Form Using a TServerRequest

In order to submit the input information as an HTTP POST request to the web server using a TServerRequest component, complete the following steps:
  • Make sure that the THTMLForm instance's Method property is set to fmPost. This is the default value, so you'll probably never need to change this property.


  • Make sure that the THTMLForm instance's URL property is set to the desired URL.


  • Call the TServerRequest instance's Assign method to assign the HTML form to the server request. This method will assign the THTMLForm Method and URL properties to the corresponding TServerRequest Method and URL properties, as well as all of the form data. This form data will stay with the TServerRequest instance until the TServerRequest Reset method is called.

    Information There is no need to set the Content-Type header using the TServerRequest Headers property when submitting HTML forms using the TServerRequest component. It will be automatically set to "multipart/form-data" by the web browser when the request is executed.


  • Call the TServerRequest instance's Execute method to execute the request and perform the HTML form submission.
Testing Form Submissions
The internal web server embedded in the IDE includes support for echoing back any values submitted as part of an HTML form submission. Just be sure to use the following URL for the THTMLForm instance's URL property:

http://localhost/formsubmit

Information The above URL assumes that the internal web server is listening on the standard port 80. Please see the Modifying IDE Settings topic for more information on configuring the internal web server.

You can also test form submissions with a secure connection using the following URL:

https://localhost/formsubmit

Information The above URL assumes that the internal web server is listening on the standard secure port 443. Please see the Modifying Environment Options topic for more information on configuring the internal web server.

Redirecting Form Submission Output
By default, the THTMLForm Submit method will direct any response from the web server to a special hidden frame in order to suppress any output from the submission. This is done to prevent the web browser from navigating away from the client application itself. If you want to display the output from the HTML form submission process, or track when the submission is completed, you can use the THTMLForm's Output property to do so. This property allows you to specify a TBrowser control that will receive the web server response to the HTML form submission. In addition, you can assign an event handler to the TBrowser OnLoad event to determine when the web server response has been loaded into the frame encapsulated by the TBrowser control.

Information You cannot redirect the output of an HTML form submission that is completed using a TServerRequest instance instead of the THTMLForm Submit method. In addition, form submissions completed using a TServerRequest instance will never cause the web browser to navigate away from the client application.
Image