Option List

From Wiki openElement
Jump to: navigation, search
Path: Elements / Form / Option List

Contents

Description

This element allows website visitors to select one predefined option in a form (among several other choices) by clicking on a radio button.

Example : (No Preset)

Cases option01.png

Add an Option List Element

Drag-and-Drop the element Option List from the elements menu anywhere on the page.

Configuration

Dragging and dropping the element on the current page will automatically open the "List Management" configuration window.

Case option2.png


Add a Row: Add an option to the drop-down list.
Text: The list-item as it should appear on the web page when a visitor clicks on it.
Value: The text to associate with the corresponding list-item when submitting the form (can be different than the text displayed alongside the element on the page).

Liste deroulante3.png: This button allows users to access the List Management configuration window from the editing pane.


Option List Layout Configuration

Case option3.png: This button allows users to access the Layout configuration window from the editing pane.

This configuration window offers multiple layout options for how text should be displayed in relation to its corresponding radio button. These properties are also available from the elements and styles menu, under Properties.

Case option5.png

Other Properties

These are the properties specific to the Checkbox. These properties can be configured from the elements and styles menu -> Properties.

Case option4.png

Appearance

  • Layout: Layout of option list. Configure how radio buttons and corresponding text should be displayed.


Behavior

  • Multiple Choice: Allow the selection of multiple items in the drop-down list.
  • Validation Rules: Configure the validation rules for the form element.
  • Read-Only: Defines the checkbox as read-only (cannot be checked or unchecked by website visitors).


Common

  • Filter by Language: Choose whether or not to display the element depending on the language the page is in.
  • Tooltip: Add a tooltip on an element.
  • Name: Give the element an easily identifiable name.
  • Resizing: Change how the element is able to be resized.
    • Auto: The element adapts to the size of its content in height and width.
    • Height Only: The element can only be resized height-wise.
    • Width Only: The element can only be resized width-wise.
    • Height and Width: Element can be resized in height and width to a fixed size of your choice.


Edit

  • List Items: Opens the List Management configuration menu.


Expert

  • Attribute Name: Users can manually assign the name for this form field element that will appear in the HTML. This name must be unique.



Design and Presets

There are numerous style presets available for this element in the Cloud Library. Presets can be accessed through the Elements and Styles Menu, under the Styles tab, in Style Presets.

To change its appearance, users must override the element's various style zones.

Style case option1.png Option List
Valeur par défaut:
Aucun style par défaut

Style case option3.png Radio Button
Valeur par défaut:
Aucun style par défaut

Style case option4.png Error Icon
Default Value:
No style by default

Style case option5.png Input Field With Error
Default Value:
No style by default.

Personal tools
Namespaces

Variants
Views
Actions
openElement
Community
Toolbox