README

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
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-project.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 and placeholder.
Forms class - extended Nette Form with helper methods:
addTextInput(), addEmailInput(), addPasswordInput(), addIntegerInput(), addTextAreaForm()
Custom inputs: Input, IntegerInput (min/max), Textarea - all support fluent attributes.

Latte Template

Use the provided Latte form template for a rendering form 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 on valid form:

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

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/password-toggle.scss';

JavaScript Tom select

import TomSelectHandler from 'drago-form/tom-select';
import 'drago-form/tom-select.scss';

{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

Maintainers

Package info

Statistics

Security