Guides > HTML Forms Generator

Introducing The HTML Forms Component

The dynamic html forms generator is an excellent tool that will help you build all kinds of html forms in just a few minutes. It will make you forget about all the problems involved with fields alignment, layouts, and server-side validation. For client-side validation the wonderful jquery validator plugin can be used. The component can also use event listeners to process form submission and validation, by using the Event Dispatcher (PtcEvent) component. This class is especially advised to webdesigners and webmasters that are having troubles with html forms. Make sure you check the bottom of the page where you will find the jquery-ui plugins for client-side validation, and to style the form components.

Main Features:

Fast & easy to use, for building and validating html forms
Completely flexible, can adapt to any web environment
Built in validator which supports custom methods
Automatic labels and fields alignment
No additional css files are needed for the class to work
Html templates can be all manipulated
Uses the PtcDebug class to debug the building process

Demos & Examples

All examples require the main class component which you can download from the repository.

**Form submission has been disabled for the live examples, you will need to download the source code of the example to test the server-side validation and the form submission

Example 1 - Login Form

This example will use a login form and redirect the user on successfull login:
Open in new window | Use jquery modal dialog | View source code

Example 2 - Contact Form

This example will use a contact form and send an email with the data on successfull validation:
Open in new window | Use jquery modal dialog | View source code

Example 3 - User Registration Form

This example will use a registration form and print a succefull message if form is valid:
Open in new window | Use jquery modal dialog | View source code

Example 4 - Using Event Listeners

This example is the same as example 2 (produces the same html output), but uses the
Event Dispatcher (PtcEvent) component to add event listeners for the form submission and validation. Have a look at the source code to see how this is done: View source code

Jquery Plugins

**Jquery-ui is used to style the form fields and to validate the form client-side. If you wish to use one of these plugins, you will need to add the following lines to the header of your page:
Show js code

For a complete list of options and examples read the full user guide.

**If you like this class, help the project to grow by rating or writing a review at one of the following sites: