hub.eb?material_id=162&track_id=260

Button Controls


A Button Control represents a <input type="submit"> HTML tag.

When a Button Control is created the Create new Control dialog opens where you can enter the text you want the button to display. This text can be altered by double-clicking on the Control to open the dialog again. 

More complex buttons can be created by dragging Text, Image and HTML Controls into them, either from the Palette, Outline or WYSIWYG View. Doing so changes HTML representation to a <button> tag.

Button Controls leverage accessibility tools built into a browser so they:

  • Are focusable using the Tab key.
  • Respond to keyboard events (like the Enter, Space, and Arrow keys).
  • Have semantic roles, states, and properties useful for assistive technologies such as screen readers.

When an end-user clicks on a button in the browser an event is generated in the Verj.io Runtime Enviroment for the corresponding Button Control. This event will execute all the Scripts configured in that Button Control's On Click event property. The On Click property can be configured in the Properties View when the Button Control is selected.

Before a Button Control's event is triggered, any Fields Controls that appear in the Page are validated and their corresponding Fields are updated with any changes. The Skip Validation property instructs the Button Control to skip the validation process before updating the Fields.

Steps


1

Create a Form and add a Button Control to the Page with the text Click me.

2

Add an Image Control to the Button Control and choose any existing image.

Notice that the Click me text now has a Text Control inside the button.

3

Run the form and see the button with text and your image.

Current Module

Related