Form Element

Form elements include a label, optional prefix and suffix elements and will automatically render a message field after the input when there are validation errors or other messages for the input element.

You can add grid size hints to the wrapper by setting one or more of the small, medium and large attributes to a value between 1 and 12.

To add inline labels, use the prefix or suffix attributes, or simply add your own markup before or after the input field.

Buttons can also be rendered inline as shown above. Please refer to the Foundation For Apps Forms documentation for further options.

Markup

Documentation


<h:form>
    <t:grid-block>
        <t:form-element medium="6">
            <h:inputText pt:placeholder="Name"/>
        </t:form-element>

        <t:form-element label="Age" small="12" medium="6">
            <t:slider min="0" max="100" lower="20" connect="lower"/>
        </t:form-element>

        <t:form-element label="URL" prefix="www." suffix=".com" small="12" medium="6">
            <h:inputText pt:placeholder="Address"/>
        </t:form-element>

        <t:form-element label="Search" small="12" medium="6">
            <h:inputText pt:placeholder="Query"/>
            <t:commandButton value="Search"/>
        </t:form-element>
    </t:grid-block>
</h:form>

Form Element

Info

Tag name	form-element
Component type	io.tornadofaces.component.FormElement
Renderer type	io.tornadofaces.component.FormElementRenderer

Attributes

Name	Description	Required
quickhelp	Renders a quickhelp icon beside the label, requires label to be rendered.	false
label	Label for the form element	false
labelPosition	Label position. Valid options are "top", "left". Defaults to "top".	false
labelClass	Classes to apply to the label element.	false
padding	Add padding. Defaults to false.	false
render	Should this component be rendered?	false
show	Show this component normally, or render an empty placeholder element. Defaults to true.	false
prefix	Prefix label that will be added as a span with class form-label before the input element	false
suffix	Suffix label that will be added as a span with class form-label after the input element	false
styleClass	Styles to apply to the wrapper	false
style	CSS Styles applied to the switch.	false
small	Width in the 12 based grid for small devices	false
medium	Width in the 12 based grid for medium devices	false
large	Width in the 12 based grid for large devices	false
rendered	Should this component be rendered?	false

To fully understand the markup for form elements, please consult the Foundation for Apps Documentation.