The html_field_type model allows you to create definitions for HTML fields that can be shared by any number of sites and forms. The field definitions that you create will depend on the requirements of the forms that you plan to build. Let's say you plan to build one or more forms to collect customer contact information. Further suppose that each contact can enter many different telephone numbers (cell phone, home phone, work phone, etc.).

In most cases you will want the definitions (format, length, validation, etc.) of each of these phone number fields to be identical. This can be achieved easy by using the html_field_type model to create a "phone_number" definition and defining your html_field definitions to be based on this shared definition.

html_field_type Example

Creating an html_field_type called dimension

Let's suppose your company sells a product that can be custom ordered by supplying its dimensions (width x length). Further suppose that each dimension must be from 1/4 inch to 9999 inches in increments of 1/4 inch. Furthermore, whenever the dimensions change you need to execute a calculation on your form. Here we see an html_field_type definition that we could use to implement the width and length fields. Let's assume this definition is called dimension.

Notice that the Field Implementation type is set to the html field type number since dimensions are always numeric. The properties defined for a field can include any valid html property for the field type you are implementing. Additionally, there are dozens of pseudo properties that you can use to extend the base functionality of html. Pseudo properties always begin with an asterisk. For example, *label can be used to supply a default label (prompt text) for the field. 

Defining the width and length fields

The html_field model can be used to define the fields width and length. If you don't anticipate needing these fields on more than one form, you can also define these fields on-the-fly without creating a definition. Here we see a sample definition for the width field:

Notice that we have indicated that this field is based on the dimension type. Further note that we can supplement the properties provided by the dimension base html_field_type by adding additional properties. We have added a title tag that is specific to the width field. We can also use the merge option to override properties of the base field or extend these properties. Here we have extended the style property to include more styling that is specific to the width field (normally classes should be used to style fields so this example is somewhat contrived).

Adding the field to a form

To add the width field to a form, we can simply place :width into one of the form cells. No further definition is needed since the field is supported by an html_field definition.

Suppose there is another field that we don't want to pre-define since we don't plan to reuse this field. We can create this field on-the-fly by supplying the required field properties. Here we see an example of a field called height that will use the dimension definition:

:height,*based-on:definition,
title:Enter the height

Here we can see the html that will be generated to render the width field:

<input type="number" min=".25" max="9999" step=".25" style="width:4em; color:green;" onchange="sizeChange(this.form)"
title="Enter the desired width in inches or cm" name="width" id="number_width" value="" />

Notice that properties from the dimension html_field_type have been combined with properties of the html_field named width.

Inheriting from other sites

Before defining an html_field_type think about how widely this type will be used. If it is something specific to one website, it is best to create this definition within the site itself. On the other hand, if you think that many sites could make use of the same definition, it is best to define this within the system pseudo site so that other websites can inherit the definition.

It is also possible to define these definitions within a specialized inherited site. Suppose you develop sites for many different industries (restaurants, attorneys, morticians, etc.). Each of these different industries may required specialized field types. It is possible to group all of the field types related to restaurants within the restaurant pseudo site. Then all of the individual restaurant sites can inherit from the restaurant pseudo site by specifying this inherited site within site_settings. This site will still inherit from system if a definition can't be found within the current site or within the restaurant pseudo site.

Learn More About Fields and Forms

Please continue reading about defining forms and fields.