.. _widgetpedia/elements/gnrwidgets/formlet:

formlet
=======




Formlet è un contenitore moderno per il layout dei form che combina la potenza di  :ref:`gridbox<widgetpedia/elements/gnrwidgets/gridbox>`  con la facilità d'uso di  :ref:`formbuilder<widgetpedia/elements/gnrwidgets/formbuilder>` . Utilizza internamente il CSS Grid layout, fornendo un controllo più flessibile sul posizionamento, spanning e styling dei campi rispetto al tradizionale formbuilder basato su tabelle.

**Vantaggi principali rispetto a formbuilder:**

* Layout basato su Grid invece di tabelle HTML
* Facile spanning di colonne e righe con ``colspan`` e ``rowspan``
* Design responsive con numero di colonne dinamico
* Styling consistente con i parametri ``item_*``
* Migliore controllo sul posizionamento individuale dei campi

Formlet vs Formbuilder
----------------------

**Usa formlet quando:**

* Hai bisogno di layout responsive con numero di colonne variabile
* Vuoi che i campi si estendano su più colonne o righe
* Necessiti di un controllo preciso sul posizionamento dei campi
* Vuoi un layout moderno basato su CSS Grid

**Usa formbuilder quando:**

* Hai bisogno della massima compatibilità browser (browser vecchi)
* Stai lavorando con codice legacy
* Hai bisogno della tradizionale struttura basata su tabelle

**Confronto sintassi:**
::

  # Formbuilder (traditional)
  fb = pane.formbuilder(cols=2)
  fb.textbox(value='^.name', lbl='Name')
  fb.textbox(value='^.email', lbl='Email', colspan=2)

  # Formlet (modern)
  fl = pane.formlet(cols=2)
  fl.textbox(value='^.name', lbl='Name')
  fl.textbox(value='^.email', lbl='Email', colspan=2)

Esempi
------

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/formlet", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Layout Formlet Base ", "example_name": "base"} );'>
                Layout Formlet Base 
            </a>
            <div></div>
        </div> 
        

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/formlet", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Spanning di Colonne e Righe ", "example_name": "spanning"} );'>
                Spanning di Colonne e Righe 
            </a>
            <div></div>
        </div> 
        

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/formlet", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Styling Globale con Parametri item_* ", "example_name": "styling"} );'>
                Styling Globale con Parametri item_* 
            </a>
            <div></div>
        </div> 
        

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/formlet", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Form Responsive ", "example_name": "reponsive_form"} );'>
                Form Responsive 
            </a>
            <div></div>
        </div> 
        

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/formlet", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Form Complesso con Elementi Misti ", "example_name": "complex_form"} );'>
                Form Complesso con Elementi Misti 
            </a>
            <div></div>
        </div> 
        

Vedi anche
----------
*  :ref:`Formbuilder<widgetpedia/elements/gnrwidgets/formbuilder>`  - Layout form tradizionale basato su tabelle
*  :ref:`gridbox<widgetpedia/elements/gnrwidgets/gridbox>`  - Contenitore grid sottostante
*  :ref:`field<widgetpedia/elements/gnrwidgets/formbuilder/field>`  - Widget campo per form

.. raw:: html

 <hr>

**Parametri:**

+------------------------+------+--------------------------------------------------+
|     Nome parametro     | Tipo |                   Descrizione                    |
+========================+======+==================================================+
|columns                 |L     |Permette di indicare il numero di colonne in forma|
|                        |      |numerica o testuale (es: columns=3) N.B.          |
|                        |      |Equivalente a cols                                |
+------------------------+------+--------------------------------------------------+
|cols                    |L     |Permette di indicare il numero di colonne in forma|
|                        |      |numerica o testuale (es: cols=3) N.B. Equivalente |
|                        |      |a columns                                         |
+------------------------+------+--------------------------------------------------+
|table                   |T     |La tabella di riferimento, se omessa equivale a   |
|                        |      |page.maintable                                    |
+------------------------+------+--------------------------------------------------+
|formletCode             |T     |Permette di specificare il formletCode            |
|                        |      |identificativo del widget (opzionale)             |
+------------------------+------+--------------------------------------------------+
|formletclass            |T     |Permette di specificare la classe CSS del formlet |
|                        |      |(di default "formlet")                            |
+------------------------+------+--------------------------------------------------+
|gap                     |T     |Permette di specificare lo spazio tra gli elementi|
|                        |      |della form (es: gap='10px')                       |
+------------------------+------+--------------------------------------------------+
|columns_gap             |T     |Permette di specificare lo spazio orizzontale tra |
|                        |      |le colonne (es: columns_gap='10px')               |
+------------------------+------+--------------------------------------------------+
|rows_gap                |T     |Permette di specificare lo spazio verticale tra le|
|                        |      |righe (es: rows_gap='10px')                       |
+------------------------+------+--------------------------------------------------+
|                                 *Html Parametri*                                 |
+------------------------+------+--------------------------------------------------+
|_class                  |T     |Permette di assegnare una specifica classe CSS al |
|                        |      |widget                                            |
+------------------------+------+--------------------------------------------------+
|height                  |T     |Permette di assegnare un'altezza al widget        |
+------------------------+------+--------------------------------------------------+
|width                   |T     |Permette di assegnare una larghezza al widget     |
+------------------------+------+--------------------------------------------------+
|border                  |T     |Permette di assegnare un bordo al widget          |
+------------------------+------+--------------------------------------------------+
|rounded                 |L     |Permette di assegnare un arrotondamento al widget |
+------------------------+------+--------------------------------------------------+
|style                   |T     |Permette di assegnare uno stile (da esprimersi    |
|                        |      |come serie di attributi CSS) al widget            |
+------------------------+------+--------------------------------------------------+
|background              |T     |Permette di assegnare uno sfondo al widget        |
+------------------------+------+--------------------------------------------------+
|                       *Item Styling Parameters Parametri*                        |
+------------------------+------+--------------------------------------------------+
|item\_                  |T     |Permette di specificare gli attributi degli item  |
|                        |      |(es: item_border, item_rounded, item_padding)     |
+------------------------+------+--------------------------------------------------+
|item_side               |T     |Permette di specificare la posizione della label  |
|                        |      |(es: item_side='left')                            |
+------------------------+------+--------------------------------------------------+
|item_box_l\_            |T     |Permette di specificare gli attributi della label |
|                        |      |degli item (es: item_box_l_background='red')      |
+------------------------+------+--------------------------------------------------+
|item_box_c              |T     |Permette di specificare gli attributi del         |
|                        |      |contenuto degli item (es:                         |
|                        |      |item_box_c_padding='10px')                        |
+------------------------+------+--------------------------------------------------+
|item_fld\_              |T     |Permette di specificare gli attributi dei field   |
|                        |      |(es: item_fld_border='solid 1px grey')            |
+------------------------+------+--------------------------------------------------+
|                           *Field Attributes Parametri*                           |
+------------------------+------+--------------------------------------------------+
|colspan                 |L     |Permette di specificare il numero di colonne      |
|                        |      |occupate dall'elemento (es: colspan=2)            |
+------------------------+------+--------------------------------------------------+
|rowspan                 |L     |Permette di specificare il numero di righe        |
|                        |      |occupate dall'elemento (es: rowspan=2)            |
+------------------------+------+--------------------------------------------------+
|lbl_side                |T     |Permette di specificare la posizione della label  |
|                        |      |dell'elemento specifico (es: lbl_side='left')     |
+------------------------+------+--------------------------------------------------+

.. sectionauthor:: Davide Paci

.. raw:: html

   <p style="font-size:0.8em;">Data di pubblicazione 12-12-2025</p>