perch:input

perch:input is a self-closing tag which creates an input element in your form.

Perch enables you to use the HTML5 form input elements. Any user completing the form with a browser which supports these will get the additional validation and form input widgets in HTML5. These degrade to standard input elements in non-supporting browsers.

The following example will create an HTML textarea.

<perch:input type="textarea" id="message" required label="Message">

Attributes for perch:input

Attribute Description
id Required. The id of the element. This will be prefixed unless the prefix attribute is set to none on the form tag
name Optional: if not specified the value of id will create the form name attribute
type Required. See the below table for list of available types
label This is used in the admin and email output of the field - not shown on the page
required sets the field as being required when the form is completed
other html5 attributes if you wish to set any other html5 attributes for example placeholder, these will be copied as is through to the rendered field
class if you set a class on a input tag this will be copied through into the mark-up
antispam One of name, email, url, body or honeypot. For sending values to an anti spam service such as Akismet.

Values for the type attribute

The values that you select for the type attribute will change the way that fields are validated and, if you are using HTML5, may cause Perch to output a specific field type. For example there are HTML5 UI elements for number and range which will then display. If you simply want to use text input fields and validate them just as a string of text then simply use type=“text”.

The table below shows all possible values. Each one is detailed fully on the page for that type.

Possible values for the type attribute

Value Description
type=”text” Creates an input element of type text in your form
type=”email” Creates an input element of type email in your form
type=”url” Creates an input element of type url in your form. This wil validate to require a protocol.
type=”range” and type=”number” If using html5 these will display the HTML5 widgets for range and number. There are additional attributes to set for the validation: min - Minimum value allowed, max - maximum value allowed, step - increments
type=”date” this accepts a date in format YYYY-MM-DD
type=”datetime” this accepts date and time YYYY-MM-DD HH:MM (optionally :SS too)
type=”month” This accepts a year and month YYYY-MM
type=”week” This accepts a year and week number YYYY-WNN e.g. 2011-W23 (W is literal)
type=”color” This will accept a hex color e.g. #FFFFFF
type=”textarea” Creates a textarea
type=”select” A select list. If using type=”select” you also need an options attribute with a value which is a string of options.
type=”radio” Creates a set of radiobuttons. If using type=”select” you also need an options attribute with a value which is a string of options.
type=”checkbox” creates a checkbox field. The value set will become the checked value of the checkbox
type=”image” this will create a file upload field which accepts image formats. The allowed formats are detailed in: perch/config/filetypes.ini
type=”file” this will create a file upload field which accepts document formats using the accept attribute. The allowed formats are detailed in: perch/config/filetypes.ini
type=”hidden” creates a hidden field
type=”submit” creates a submit button, the value of this field becomes the text displayed on the button