Form types

With 22 different types the input tag is by far and away the most used tag with in forms. In the following notes we have split the input tag into groups, so that you can see an example of where that particular tag is used in our example forms

The default input type is text which is why an example of this input type is shown in the basic form along with a hidden field

• input type="text" (default value)
• input type="hidden"

Input buttons are shown in the button form along with buttons. Input buttons can only show text or in the case of the image button, an image. These are great for submitting a form, resetting it and a variety of other applications. The three modes of all forms produced by WDZ are add, delete and update and these tags can look different in the three modes.

• input type="button"
• input type="image"
• input type="reset"
• input type="submit"

Grouped data like checkboxes and radio tags are fantastic for similar types of data. Adding checkboxes and radio type inputs to your forms is helped enormously by the use of categories

• input type="checkbox"
• input type="radio"

Although this is only one tag, the files form is dedicated to this tag because there are a few associated fields that are already programmed in to WDZ. The path, this is so that if you decide to split your images up into directories, then the additional path is stored with the file. Link, if you decide to upload a file then the file is uploaded and an image based on the extension is shown, with a link to the file. The other reason that the file tag has a form to itself, is because the form must be set up to accept upload.

• input type="file"

The number tag, shown in the numbers form, is fairly self evident allowing you to input an integer number, however, with the range although this also produces an integer number, the integers can represent other things that are in a linear format

• input type="number"
• input type="range"

When using the various tags associated with time, that are shown in the time form, do be aware that the implementation of these tags varies considerably between browsers. In WDZ alternate implementations of all of the requirements needed for the time are available

• input type="month"
• input type="date"
• input type="datetime-local"
• input type="time"
• input type="week"

Special data for the most part look like text fields, but for email and url for example, various browsers validate these before the form is submitted.

• input type="color"
• input type="email"
• input type="password"
• input type="search"
• input type="tel"
• input type="url"

The textarea tag defines a multi-line text input control. In WDZ the size of a text area is specified with CSS. In addition a css tag also requests the mce editor supplied with WDZ. To see the difference a css tag can make, view our Basic Form

Although the button tag is only one tag, within WDZ, three button types are supplied

• button - This creates the button type button and can be used for a variety of applications
• button-reset - This creates the button type reset, which resets the form
• button-submit - This creates the button type submit, which submits the form

With buttons you can include a mixture of html tags within the button such as i, b, strong, br, img, etc. To see the three button tags in operation visit our button form

Although select, option and optgroup are treated as three different tags in W3 schools, in WDZ they are treated as one as both option and optgroup are dependent on select. To create a select, then a set of data structures need to be supplied to the form. The data structure must contain

• key - This is the data to be stored to the web site
• value - This is what the customer sees
• altKey - As key is usually stored as a unique code, if the key needs to be repeated for some reason or an option needs to be disabled for some reason, then using the altKey can achieve these goals
• title - Used to give more information to the customer about an option
• group - Used to create the optgroup tag

To see the select in operation visit our grouped data form

The label tag is extensively used with-in WDZ, so that be it a textarea or text input, the label tag is used as required. One of the requirements of the forms created within WDZ, is that all fields names are unique within a form, so that the field can have a unique id and a label associated with it. The label tag is used in all the forms shown in example forms.

There are two other tags that work with the label tag and these are shown in the numbers form as they require numbers to function

• meter
• progress

As well as all the form fields specified in W3 schools, WDZ allows a few more options within forms:-

• Div Open and div close - For various reasons you might want a div within a form, this could be to group the address fields together, or in our numbers form we wanted a div with a specific id, so that we could target the inner html of the div, the results of which you can only seen when you move the clarity slider
• none - This does nothing.
• Ext. words and words - For when you want to include a message with in the form. Our contact us form shows an example of external words(words before the form tag), while our numbers form shows words within the form
• Display file/image - For when you want to display a file or image in a form, like in our file form
• freetext - This allows the presentation of a variety of elements and three examples are shown in WDZ form elements
• captcha - Shows a captcha field