Download the PHP package efabrica/neoforms without Composer

NeoForms are the very much needed medicine for Nette\Forms.

• Gives you an easier way to write your own renderer templates
• Gives you conventions to collaborate with your team more efficiently
• Gives you a way to render form fields individually with the {formRow}, {formLabel} and {formInput} tags that you could be used to from Symfony.
• Gives you a way to render rows and columns when building the form in PHP
• Gives you a readonly mode to render a form for people who can't edit it by rendering regular text instead of inputs. (Say goodbye to grayed-out disabled fields!)
• Gives you FormCollection for pre-styled AJAX-less Multiplier with built-in diff calculator
• ControlGroup inside of a ControlGroup (tree structure)

Installation

Documentation

• Using ActiveRowForm
  • Presenter
  • Using component in latte (simple rendering)
  • Using component in latte (custom HTML structure around it)
  • Using component in latte (stand-alone HTML template for form)
• {formGroup} example
• .row .col grid layout in PHP
• Latte Tags (API) Documentation
  • {neoForm}
  • {formRow}
  • {formGroup}
  • {formLabel}
  • {formInput}
• Applying Attributes
• Custom Template

Using ActiveRowForm

Component Usage in Presenter

Component Usage in Latte Templates

Simple Rendering

Custom HTML Structure inside the <form> tag

Stand-alone HTML Template for Form

Grouping Form Elements

.row .col Grid Layout in PHP

Latte Tags (API) Documentation

{neoForm}

The {neoForm} tag is used to render the <form> element in your HTML. It can also render all the unrendered inputs at the end of the form. The argument for this tag is the name of the control without quotes.

To render an entire form without specifying any sub-elements, use the following syntax:

If you want to exclude certain form fields from rendering, you can use rest => false like this:

This will render an empty <form>, similar to using an empty {form} tag.

{formRow}

The {formRow} tag is used to render a form label and form input inside a wrapping group. It accepts various options. The argument for this tag is a BaseControl instance (e.g., $form['title']).

Here are some examples of how to use {formRow}:

This renders a form row with a custom class, resulting in <div class="mt-3">...</div>.

If you are using a Bootstrap template, this will render a form group with a class, resulting in <div class="form-group mt-3">...</div>.

You can also add attributes to the input or label elements using options:

This renders a form row with an input element that has a data-tooltip attribute.

This renders a form row with a label element that has a data-toggle attribute.

{formGroup}

The {formGroup} tag accepts a ControlGroup as a required argument and renders all controls in the group. It internally uses {formRow} to handle rendering.

Example usage:

{formLabel}

The {formLabel} tag is used to render a <label> element. The argument is a BaseControl instance.

Example usage:

This renders a label element with a custom class and data attributes.

If the form element is a hidden field or checkbox, the label is rendered as an empty HTML string.

{formInput}

The {formInput} tag is used to render an <input>, <textarea>, <button>, or any other essential part of a form row. The argument is a BaseControl instance.

Example usage:

This renders an input element with an empty data-select2 attribute.

Applying Attributes

Attributes can be applied to form elements using options. Here are some commonly used attributes:

"icon"

The "icon" attribute, when applied to buttons, adds an icon before the text. For example:

You can customize how the icon is added in your template.

"description"

The "description" attribute adds gray helper text under input elements. For example:

"info"

The "info" attribute adds a blue info circle tooltip next to the label. For example:

"readonly"

The "readonly" attribute, when set to true, makes the value non-modifiable and not submitted. It is rendered as a badge. Examples:

You can also provide a callback function for dynamic readonly behavior.

"class"

The "class" attribute allows you to override a class or any other HTML attribute to the row/input/label. For example:

If you want to keep the classes from your template, use +class instead:

This also works:

If you want to force remove a class from your template, use false instead:

"input" and "label"

You can apply these attributes to the {formRow} tag to pass HTML attributes to the input and label elements, respectively. Example:

FormCollection

Usage:

You render the form as any other control in the form. ({formRow} or automatically)

Processing

You don't have to use the Diff API. If you for example only use a simple collection of single text inputs, you might find it easier to just persist the new array of values.

Custom Template

To create your own extended template for rendering forms, you can follow our examples. Below is a step-by-step guide on how to create your custom extended template using Bootstrap 4 as an example:

Step 1: Create a New PHP Class

Create a new PHP class for your extended template by extending the base template class. In this example, we'll call it Bootstrap5FormTemplate. Make sure to place this class in an appropriate namespace, just like in the provided code.

Step 2: Customize Form Elements

Override the methods in your extended template class to customize the rendering of form elements according to your preferred Bootstrap 4 styling. For example, you can define how text inputs, buttons, checkboxes, and other form elements should be rendered with Bootstrap classes.

Here's an example of customizing the rendering of text inputs:

Step 3: Customize Form Labels

You can also customize how form labels are rendered. In Bootstrap, you may want to add the col-form-label class for proper alignment. Override the formLabel method to achieve this:

Step 4: Customize Buttons

For buttons, you can add Bootstrap classes and icons if desired. Customize the rendering of buttons like this:

Step 5: Customize Other Form Elements

Repeat similar customization for other form elements like checkboxes, radio buttons, select boxes, etc., based on your desired styling.

Step 6: Implement Additional Styling

If your template requires additional styling for specific elements or form groups, you can do so in your extended template class.

Step 7: Apply Your Custom Template To use your custom template, you need to instantiate it and set it as the template for your forms when rendering. For example:

If you want to use your custom template for all forms, you can set it as the default template by rewiring your auto-wiring :)

By following these steps, you can create your own extended template for rendering forms in a way that aligns with Bootstrap 4 or any other custom styling you prefer. Customize the template methods according to your specific styling needs.