Checkbox

Details
Category: Form Fields

Description

{gdata id=|MjEDEWQ8xxo|}

A checkbox (check box, tickbox, tick box) is a Graphical control element that permits the user to make a choice, i.e. a choice between one of two or more possible options. For mutually exclusive options, use Radio button instead.

Checkboxes are often shown on the screen as a square box that can contain white space (for false) or a tick mark or × (for true), as shown ( ☐ or ☑, respectively). A caption describing the meaning of the checkbox is normally shown adjacent to the checkbox. Inverting the state of a checkbox is done by clicking the mouse on the box, or the caption, or by using a keyboard shortcut, such as the space bar.

Requirement

  1. Have watched the Form Fields -> Basic Features screencast;

Usage

1. Select Components → Contact Enhanced → Form Fields from the drop-down menu on the back-end of your Joomla! installation, then Select Checkbox from the Field Type select list;

2. Choose a category for your Form Field, then Save the changes.

3. In the Checkbox Parameters you can set a number of columns, whether to display a button to select all  and a custom error message in case this field is required;

4. In the Value box enter values separated by | (pipe). For Example:

Firefox |Internet Explorer |Opera |Google Chrome |Safari |Other

Output:

Browsers Tested
Firefox




Example 2 (value & text):
This way you can show a Label (Firefox) but the submitted value will be different.

FF::Firefox|IE::Internet Explorer|Opera|Chrome::Google Chrome|Safari|Other


Example 3 (value & text + Option Group):
All values starting with two dashes will display as a Option Group:

--Good Browsers|FF::Firefox|Chrome::Google Chrome|--So so Browsers|Opera|Safari|--Bad bad browsers|IE::Internet Explorer|Other


Example 4 (add html, image or link in the Checkbox label):

Terms Accepted::Accept <a href="http://idealextensions.com/pre-sales/terms-and-conditions.html" target="_blank">Terms and Conditions</a>|Another Option Value::<img src="http://idealextensions.com/images/ideal-logo.png" alt="image placeholder text" />

Tip: if adding image, you might need to add a CSS Form Field with the following content:

img{border:0;height:auto;max-width:100%}