README

English | Čeština

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

Project files

File copying is handled automatically by drago-ex/project-tools, which must be installed in your project. Without it, copy the files manually according to the copy section in this package's composer.json. To skip this package, set "skip": true under extra.drago-tools.packages.<package-name> in your root 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}

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.

drago-ex / form

Package info

Security

Statistics