Deform Demo Site

AJAX form submission (inline success) AJAX form submission (redirect on success) Accordion Autocomplete Input Widget Autocomplete Input Widget (with Remote Data Source) Checkbox Choice Widget Checkbox Choice Widget (inline) Checkbox Choice Widget (read-only) Checkbox Choice Widget (with required field) Checkbox Widget Checkbox Widget (read-only) Checkbox Widget (with Label) Checked Input Widget Checked Input Widget (read-only) Checked Input Widget (with Input Mask) Checked Password Widget Checked Password Widget (read-only) Checked Password Widget (redisplay on validation failure) Custom classes on outermost html element of Widgets Date Input Widget Date Parts Widget Date Parts Widget (read-only) DateTime Input Widget DateTime Input Widget (read-only) Deferred Schema Bindings Don't Validate Readonly Fields Dynamic fields: add and remove Edit Form Field Defaults File Upload Widget File Upload Widget (read-only) Hidden Widget Hidden Widget (missing, representing an Integer) Inter-Field Validation Internationalization Mapping Widget Money Input Multiple Error Messages For a Single Widget (Mapping) Multiple Error Messages For a Single Widget (Sequence) Multiple Forms on the Same Page Non-Required Fields Non-Required Number Fields Password Widget Password Widget (redisplay on validation failure) Popup and retail rendering Pyramid CSRF Demo (using schema binding) Radio Choice Widget Radio Choice Widget (inline) Radio Choice Widget (read-only) Radio Choice Widget (with int values) Readonly HTML Attribute Readonly Widget Argument Require One Field or Another Rich Text Widget (TinyMCE) Rich Text Widget (delayed) Rich Text Widget (internationalized) Rich Text Widget (read-only) Select Widget Select Widget (read-only) Select Widget (with Integer values) Select Widget (with default) Select Widget (with deferred choices and default) Select Widget (with multiple default integers) Select Widget (with multiple) Select Widget (with optgroup and label attributes) Select Widget (with optgroup) Select Widget (with size) Select Widget (with unicode) Select2 Widget Select2 Widget (with multiple) Select2 Widget (with optgroup) Select2 Widget (with tags and multiple) Select2 Widget (with tags) Selectize Widget Selectize Widget (with multiple) Selectize Widget (with optgroup) Selectize Widget (with tags and multiple) Selectize Widget (with tags) Sequence (of Mappings) with Ordering Enabled Sequence With Prototype that Has No Name Sequence of Autocomplete Widgets Sequence of Constrained Min and Max Lengths Sequence of Date Inputs Sequence of Defaulted Selects Sequence of Defaulted Selects (with Initial Item) Sequence of File Upload Widgets Sequence of File Upload Widgets (with Initial Item) Sequence of I18N Sequence of Mapping Widgets Sequence of Mapping Widgets (with Initial Item) Sequence of Mappings (read-only) Sequence of Masked Text Inputs Sequence of Radio Choice Widgets Sequence of Rich Text Widgets Sequence of Sequence Widgets Text Area CSV Widget Text Area Widget Text Area Widget (read-only) Text Input CSV Widget Text Input Masks Text Input Widget Text Input Widget (read-only) Text Input Widget (with CSS class) Text Input Widget (with arbitrary HTML5 attributes) Time Input Unicode Everywhere Widget Adapter

Demo: Custom classes on outermost html element of Widgets

Captured submission

None

Code (click to show in context)

    @view_config(
        renderer="templates/form.pt",
        name="custom_classes_on_outermost_html_element",
    )
    @demonstrate("Custom classes on outermost html element of Widgets")
    def custom_classes_on_outermost_html_element(self):
        import datetime

        class Mapping(colander.Schema):
            upload = colander.SchemaNode(
                deform.FileData(),
                widget=deform.widget.FileUploadWidget(
                    tmpstore, item_css_class="mapped_widget_custom_class"
                ),
            )

        class Schema(colander.Schema):
            text = colander.SchemaNode(
                colander.String(),
                widget=deform.widget.TextInputWidget(
                    item_css_class="top_level_mapping_widget_custom_class"
                ),
            )
            sequence = colander.SchemaNode(
                colander.Sequence(),
                colander.SchemaNode(
                    colander.Date(),
                    name="Sequence Item",
                    widget=deform.widget.DatePartsWidget(
                        item_css_class="sequenced_widget_custom_class"
                    ),
                ),
                default=[datetime.date.today()],
                description="SequenceWidget",
            )
            mapping = Mapping(description="MappingWidget")

        return self.render_form(deform.Form(Schema(), buttons=("submit",)))