Aurora | Forms

Creating Forms in the Template Engine

The template engine simplifies the creation of forms by providing basic form elements like INPUT, TEXTAREA, SELECT, CHECKBOX, and RADIO. These elements can be easily used and customized within templates.

Key Attributes for Form Elements:

isInvalid: Marks the form element as invalid (typically used for validation feedback).
isRequired: Indicates that the element is required and must be filled out.
isHidden: Hides the element (useful for storing non-visible data).
isReadOnly: Makes the element read-only.
isDisabled: Makes the select element disabled.
isChecked: Specifically for checkboxes, denotes whether the box is checked by default.

Other attributes include:

id: The HTML id attribute.
class: CSS class for styling.
label: The label of the form element.
error: The message displayed when isInvalid is set.
type: Specifies the type of input (e.g., text, email).
value: The value of the element.
title: HTML title attribute.
placeholder: Placeholder text.
info: Additional information about the element, shown as a hint to the user.
selected: For SELECT elements, marks an option as selected.
checked: For RADIO buttons and CHECKBOXES, indicates the checked state.
data: Custom data attributes.
aria-label: Accessibility label.
rel: HTML rel attribute.

Usage of `input` in Template Engine

Example Usage of `input` Element:


    {input
        id="inputId"
        type="text"
        label="`INPUT TEST`"
        name='input_test'
        error="`Wrong filled variable!`"
        value=""
        placeholder="`Test`"
        title="Title"
        info="`Short info message`"
        isRequired}

Explanation of Attributes in the input Element:

Output

INPUT TEST*

Short info message

Usage of `textarea` in Template Engine

The textarea element in the template engine is used for multi-line text input and can be customized with a range of attributes for flexibility and functionality.

Textarea


    {textarea
        id="inputId"
        type="text"
        label="`TEXTAREA TEST`"
        name='input_test'
        error="`Wrong filled variable!`"
        value=""
        placeholder="`Test`"
        rows="5"
        cols="70"
        title="Title"
        info="`Short info message`"
        isRequired}

Output

TEXTAREA TEST*

Short info message

Usage of `checkbox` in Template Engine

The `checkbox` element in the template engine provides a straightforward way to include checkbox options in your forms, customizable with several attributes.

Checkbox:


    {checkbox
        label="Check Me"
        name='checkbox_test'
        selected='1'
        placeholder="test"
        info="Short info message"
        error="`ERROR`"
        isInvalid
        isChecked
        isRequired}

Output

Check Me*

Short info message

Usage of `select` in Template Engine

The `select` element in the template engine is used for creating dropdown lists in your forms, offering a variety of options to users. It's essential to set up an array representing the options for the dropdown.

Example Usage of `select` Element with an Options Array:

Defining the Options Array:


    {$arr = [
        ''  =>  '----',
        '1' => 'Option 1',
        '2' => 'Option 2',
        '3' => 'Option 3',
    ]}

Implementation of the `select` Element


    {select
        label="SELECT BOX"
        name='select_test'
        selected='1'
        data="$arr"
        placeholder="`Hello World`"
        info="`Hello World`"
        isDisabled
        isRequired}

Output

SELECT BOX*

Hello World

Usage of `radio` in Template Engine

Just like the `select` element, the `radio` element in the template engine requires an array for defining the available options. However, unlike `select`, which allows multiple options in a dropdown format, `radio` presents options as individual radio buttons, typically for selecting one among several choices.

Example Usage of `radio` Element with an Options Array:

Defining the Options Array:


    {$arr = [
        '1' => 'Option 1',
        '2' => 'Option 2',
        '3' => 'Option 3',
    ]}

Implementation of the `radio` Element


    {radio
        label="`Radio test`"
        name='radios_test'
        selected='3'
        data="$arr"
        placeholder="test"
        info="Short info message"
        isInvalid
        isRequired}

Output

Radio test*

Option 1

Option 2

Option 3

Short info message