NetLife Guru

Customizing Forms in the Template Engine

The template engine provides a flexible way to customize form elements according to specific needs, such as aligning with a CSS framework like Bootstrap. This customization allows developers to control the appearance and behavior of form elements like `input`, `textarea`, `select`, `radio`, and `checkbox`.

Customization Process:

Create a Template File (e.g., forms.html):

This file will contain blocks for each form element.

    {Input}{/Input}
    {Textarea}{/Textarea}
    {Select}{/Select}
    {Radio}{/Radio}
    {Checkbox}{/Checkbox}

Define Custom Layouts for Each Form Element:

Customize each form element block to fit the desired design or framework standards. Example for Bootstrap framework:

Bootstrap Input

    {Input}
    {if $isHidden}
        <input type="hidden" {$chain}>
    {else}
        <div class="form-group {$isInvalid?'invalid':''}">
            <label for="{$id}">{$label}{$isRequired?'<span class="text-danger">*</span>':''}</label>
            <input class="form-control" {$chain} {$isRequired?'required':''} {$isReadOnly?'readonly':''}>
            {if $isInvalid && $error}<small class="form-text text-danger">{$error}</small>{/if}
            {if $info}<small class="form-text text-muted">{$info}</small>{/if}
        </div>
    {/if}
    {/Input}

Bootstrap Textarea

    {Textarea}
    <div class="form-group {$isInvalid?'invalid':''}">
        <label for="{$id}">{$label}{$isRequired?'<span class="text-danger">*</span>':''}</label>
        <textarea class="form-control" {$chain} {$isRequired?'required':''} {$isReadOnly?'readonly':''}>{$value}</textarea>
        {if $isInvalid && $error}<small class="form-text text-danger">{$error}</small>{/if}
        {if $info}<small class="form-text text-muted">{$info}</small>{/if}
    </div>
    {/Textarea}

Bootstrap Select

    {Select}
    <div class="form-group {$isInvalid?'invalid':''}">
        <label for="{$id}">{$label}{$isRequired?'<span class="text-danger">*</span>':''}</label>
        <select class="form-control" {$chain} {$isRequired?'required':''} {$isReadOnly?'readonly':''}>
            {foreach $data as $value => $title}
            <option value="{$value}" {$selected==$value?'selected':''}>{$title}</option>
            {/foreach}
        </select>
        {if $isInvalid && $error}<small class="form-text text-danger">{$error}</small>{/if}
        {if $info}<small class="form-text text-muted">{$info}</small>{/if}
    </div>
    {/Select}

Bootstrap checkbox

    {Checkbox}
    <div class="{$isInvalid?'invalid'} form-group">
        <label for="{$id}"> {$label} {$isRequired?<span class="text-danger">*</span>}</label>
        {foreach $data as $value => $title}
        <div class="row">
            <input class="form-check-input" name="{$name}" type="radio" value="{$value}" {$checked== $value?' checked'}/>
        </div>
        {$title}
        {/foreach}
        {if $isInvalid && $error}
        <small class="form-text text-danger">{$error}</small>
        {/if}
        {if $info}
        <small class="form-text text-muted">{$info}</small>
        {/if}
    </div>
    {/Checkbox}

Bootstrap Radio

    {Radio}
    <div class="{$isInvalid?'invalid'} form-group">
        <label for="{$id}"> {$label} {$isRequired?<span class="text-danger">*</span>}</label>
        {foreach $data as $value => $title}
        <div class="row">
            <input class="form-check-input" name="{$name}" type="radio" value="{$value}" {$checked== $value?' checked'}/>
        </div>
        {$title}
        {/foreach}
        {if $isInvalid && $error}
        <small class="form-text text-danger">{$error}</small>
        {/if}
        {if $info}
        <small class="form-text text-muted">{$info}</small>
        {/if}
    </div>
    {/Radio}