Skip to Content search facebook instagram pinterest twitter youtube

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)

or

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.

autocomplete

A text field which, when the user starts entering text, provides a dropdown list of matching options.

autofillList

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)

checkboxBoolList

A list of boolean checkboxes (i.e. value '1'), each with a different name

checkboxSet

Checkboxes for a set of options (e.g. 'preferred colours' could have options 'red', 'green', blue', etc.)

chunkedUpload

A file upload field which shows progress as the file is being uploaded. Very handy!

colorpicker

To choose a HTML colour code (i.e. 24-bit hex colour code such as #123ABC)

datepicker

To choose a date and submit in YYYY-MM-DD format

daterangepicker

To choose a 'from' and 'to' date

datetimepicker

To choose a datetime (YYYY-MM-DD HH:mm:ss)

datetimerangepicker

To choose a 'from' and 'to' datetime

dropdown

A HTML <select> element with one or more selectable elements

dropdownTree

Formats a tree structure into a HTML <select> element

email

A HTML5 email field, which is the same as a text input, with the addition of email validation provided by modern browsers

googleMap

A pannable map for determining lat and long coordinates, and optionally a zoom level

input

A basic <input> tag. You probably shouldn't use this; it's mostly to support the other methods.

money

A number field which shows a currency symbol so you know it's really about money.

multiline

A field for entering multiple lines of text, i.e. a <textarea>

multiradio

A set of radio buttons in a fieldset

number

A HTML5 number field

password

A password field, where the data input is hidden from the user

phone

A HTML5 phone number field (which should show an appropriate software keyboard on a mobile device)

range

A slider which lets the user choose a point on a range between two endpoints

richtext

A rich text (i.e. HTML) field, implemented using TinyMCE.
N.B. This needs strict server-side validation to ensure the resulting HTML doesn't include JavaScript etc.

text

The most basic and common input field

timepicker

For choosing a time (HH:mm)

upload

An old-school file upload field. You really ought to use chunkedUpload instead.

Methods which only apply for admin forms

fileSelector

Supports both searching for files in the media repository and uploading new files

lnk

An interface to link to any type of data (a page, a file, an external URL, ...)

multipleFileSelect

Like the fileSelector, but submits multiple files instead of a single one

pageDropdown

Provides a dropdown list (i.e. a HTML <select>) which contains the entire page tree

Additional methods you might want to know about

heading

A heading in the form of a <h3> tag

output

Output content using a similar visual style to the form fields

tag

Generic method for arbitrary HTML tags

hiddenFields

A group of <input type="hidden"> fields