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:


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.
  
  
   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

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

https://localhost/formsubmit

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.