Form field types
- Creating forms
- Form field types
Most of the field types belong to the
Fb class; although they should be called via the
Form class as well (using the same name and signature).
Each field type is provided as a method with a call signature as follows:
function fieldtype (string fieldname, array attributes, array options)
echo Form::inputType('inputName', [ 'inputAttributes' ], [' inputOptions' ]);
Example: Form::inputType('inputName', [ 'inputAttributes' ]);
<?php Form::nextFieldDetails('Email', true); echo Form::email('Email', ['placeholder' => 'Email Address', '-wrapper-class' => 'white']); ?>
The attributes are HTML attributes which apply on the input field (which may be an <input>, <select>, etc. as appropriate).
Some fields such as dropdown selectors and date selectors have additional options.
Example: Form::inputType('inputName', [ 'inputAttributes' ], [' inputOptions' ]);
<?php Form::nextFieldDetails('Fruits', false); echo Form::dropdown('fruits', ['-wrapper-class' => 'white'], ['Apple', 'Pear', 'Banana' ]); ?>
The options vary per field type. These are listed in the API documentation.
Complete list of inbuilt field types
Note: screenshots to come forthwith.
A text field which, when the user starts entering text, provides a dropdown list of matching options.
Similar to an autocomplete field, but it stores multiple values, which can optionally be ordered.
*This only exists in the
Form class (which you should be using anyway, by the way)
A list of boolean checkboxes (i.e. value '1'), each with a different name
Checkboxes for a set of options (e.g. 'preferred colours' could have options 'red', 'green', blue', etc.)
A file upload field which shows progress as the file is being uploaded. Very handy!
To choose a HTML colour code (i.e. 24-bit hex colour code such as #123ABC)
To choose a date and submit in YYYY-MM-DD format
To choose a 'from' and 'to' date
To choose a datetime (YYYY-MM-DD HH:mm:ss)
To choose a 'from' and 'to' datetime
A HTML <select> element with one or more selectable elements
Formats a tree structure into a HTML <select> element
A HTML5 email field, which is the same as a text input, with the addition of email validation provided by modern browsers
A pannable map for determining lat and long coordinates, and optionally a zoom level
A basic <input> tag. You probably shouldn't use this; it's mostly to support the other methods.
A number field which shows a currency symbol so you know it's really about money.
A field for entering multiple lines of text, i.e. a <textarea>
A set of radio buttons in a fieldset
A HTML5 number field
A password field, where the data input is hidden from the user
A HTML5 phone number field (which should show an appropriate software keyboard on a mobile device)
A slider which lets the user choose a point on a range between two endpoints
A rich text (i.e. HTML) field, implemented using TinyMCE.
The most basic and common input field
For choosing a time (HH:mm)
An old-school file upload field. You really ought to use chunkedUpload instead.
Methods which only apply for admin forms
Supports both searching for files in the media repository and uploading new files
An interface to link to any type of data (a page, a file, an external URL, ...)
Like the fileSelector, but submits multiple files instead of a single one
Provides a dropdown list (i.e. a HTML <select>) which contains the entire page tree
Additional methods you might want to know about
A heading in the form of a <h3> tag
Output content using a similar visual style to the form fields
Generic method for arbitrary HTML tags
A group of <input type="hidden"> fields