The <group> element is useful for dividing your XForm into sections with headings. By grouping elements, you can enhance the layout of your forms. Additionally, class attributes can be applied to <group> elements for CSS styling and layout adjustments. In the example below, Bootstrap classes are used to define the layout.

<group class="row">
    <label>Edit News Article</label>
    <group class="col-md-4">
	<group>
           <label>Settings</label>
	    ...
        </group>
    </group>
    <group class="col-md-8">
 	<group>
           <label>Content</label>
		...
        </group>
    </group>
</group>

• Labels: Groups can have labels, and the <label> tag is rendered as a group title, helping to organize sections in your form.

A basic text input is created with the <input> tag and linked to a data field using the bind attribute. Additional classes such as required and long can be used for styling.

<input bind="cContentHeadline" class="required long">
     <label>Headline</label>
</input>

To hide an input field, simply add the class hidden. This prevents the control from being displayed on the screen, but it still submits the data.

<input bind="nContentKey" class="hidden"/>

IF you required a input to be hidden just give the class = hidden and the control with not display to screen

This allows a user to input the date by using a pop up screen when clicked in the input area, Note by adding the class=”calendar” it turns the input from a plain text box to a calendar picker.

<input bind="dExpireDate" class="calendar short">
	<label>Expire Date</label>
</input>

You can transform a plain text input into a calendar picker by adding the class calendar. This will allow users to pick a date using a pop-up calendar interface.

For a Date of Birth picker, you can use the class DOBcalendar.

To allow users to pick a color, use the class colorPicker. This converts the input into a color selection tool.

The imgVerification input allows users to verify their identity by entering text displayed in an image (commonly used in CAPTCHA).

This input lets users select an image from the resource library. It is ideal for applications where media content needs to be uploaded.

With PickDocument, users can select a document from the resource library.

This input allows users to pick media files from the resource library, useful for adding audio or video content.

A <textarea> provides a larger input area than a standard text input, useful for entering large amounts of text. You can customize the size using the rows and cols attributes.

Example:

<textarea bind="cContentBody" rows="5" cols="50">
    <label>Content</label>
</textarea>

To provide a rich text editor experience, you can apply the class TextArea xhtml, which will allow users to format text.

The range input allows users to select a value within a predefined range. Ensure that you set the start, end, and step attributes to define the range properly.

The upload input allows users to upload files from their local machine.

The repeat control can be used to allow users to repeat a section of the form multiple times, commonly for repeating data entries like multiple addresses or phone numbers.

Use the RelatedContent element to link additional content to the form, allowing for better contextual organization of related materials.

• Back to xForms Guide