Drago Form

Drago Form is a lightweight and extendable form component built on top of the Nette Framework. It provides basic form input building blocks and a flexible Latte template for rendering Bootstrap 5 styled forms.

Requirements

• PHP >= 8.3, < 9
• Nette Framework
• Composer
• Bootstrap
• Naja
• Node.js

Installation

composer require drago-ex/form

Files copied into the project

The files are copied into the project by drago-ex/project-tools, as set in extra.drago-tools of this package's composer.json.

Examples

$form = new Drago\Form\Forms();

$form->addTextInput('username', 'Username')
     ->setAutocomplete(Drago\Form\Autocomplete::Username)
     ->setPlaceholder('Enter your username');

$form->addIntegerInput('age', 'Age')
     ->setMin(0)
     ->setMax(120);

ExtraForms

ExtraForms extends Forms with commonly used preconfigured fields:

• addPasswordField() - password input named password.
• addPasswordConfirmationField() - password confirmation named verify, validated against password.
• addEmailField() - email input named email with autocomplete and email validation.

Features

• Autocomplete enum - standard values for HTML autocomplete.
• FluentAttributes trait - fluent setters for autocomplete, placeholder and read-only.
• Forms class - extended Nette Form with helper methods:
• addTextInput(), addEmailInput(), addPasswordInput(), addIntegerInput(), addSlugInput(), addTextAreaInput()
• addSlugInput() - text input with the Forms::SlugPattern rule (lowercase letters, numbers, single hyphens) and at most 255 characters, the length of the slug columns; the constant also fits route masks.
• Custom inputs: Input, IntegerInput, Textarea - all support fluent attributes.

IntegerInput is validated as an integer on the server, like Nette's addInteger(): an empty value is null and a valid value is converted to int. setMin() and setMax() add server-side rules and render the min and max attributes.

setReadOnly() only renders the HTML readonly attribute; the browser still submits the value and a user can change it. For values that must not be changed, use setOmitted() and keep the value on the server, or setDisabled().

Latte Template

Use the provided Latte form template to render forms with Bootstrap 5 styling. The templates rely on Bootstrap 5 classes, so make sure Bootstrap is installed in your project:

{embed 'path/to/@form.latte', name: 'register', class: 'ajax'}
     {block form}
          {include input, name: 'username', columns: 6}
          {include input, name: 'email', columns: 6}
          <div class="d-block">
               {include submit, name: 'send'}
          </div>
     {/block}
{/embed}

A checkbox is rendered as a Bootstrap check, or with switch: true as a switch:

{include checkbox, name: 'newsletter', switch: true}

JavaScript setup

Since the package is installed via Composer, add the following to your package.json to make the drago-form alias available in your bundler:

{
  "type": "module",
  "dependencies": {
    "drago-form": "file:vendor/drago-ex/form"
  }
}

Then run npm install.

JavaScript buttons disabled

Optionally, include the submit disable script to prevent multiple submits of a valid AJAX form. Buttons are enabled again when the request completes, so a form with server-side errors can be sent again:

import SubmitButtonDisable from 'drago-form/submit-disable';

naja.registerExtension(new SubmitButtonDisable());

Password hide/show

{embed 'path/to/@form.latte', name: 'add', class: 'ajax'}
     {import 'path/to/@form-password.latte'}
     {block form}
          {include password-toggle, name: 'password', columns: 12}
     {/block}
{/embed}

JavaScript show/hide password

import PasswordToggle from 'drago-form/password-toggle';
import 'drago-form/styles/password-toggle';

naja.registerExtension(new PasswordToggle());

JavaScript Tom select

import TomSelectHandler from 'drago-form/tom-select';
import 'drago-form/styles/tom-select';

naja.registerExtension(new TomSelectHandler());

{embed 'path/to/@form.latte', name: 'add', class: 'ajax'}
     {import 'path/to/@form-tom-select.latte'}
     {block form}
          {include selectTom, name: 'tom', columns: 12, class: 'select-tom'}
     {/block}
{/embed}

Notes

• Fully compatible with Nette Forms API - all original methods remain functional.
• Fluent methods are optional; you can still use standard Nette Form controls.
• Designed for type safety and clean, readable code.