Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Form field docs update (fixes #7521)
- Loading branch information
Showing
9 changed files
with
73 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -1,83 +1,75 @@ | |||
# Form Field Types | # Form Field Types | ||
|
|
||
This is a highlevel overview of available `[apiFormField]` subclasses. An automatically generated list is available through our [API](api:FormField) | This is a highlevel overview of available `[api:apiFormField]` subclasses. An automatically generated list is available through our [API] | ||
|
|
||
## Formatted Input | ## Basic | ||
|
|
||
* `[AjaxUniqueTextField](api:AjaxUniqueTextField)`: Text field that automatically checks that the value entered is unique for | * `[api:CheckboxField]`: Single checkbox field. | ||
the given set of fields in a given set of tables | * `[api:DropdownField]`: A `<select>` tag. Can optionally save into has-one relationships. | ||
* `[AutocompleteTextField](api:AutocompleteTextField)` | * `[api:ReadonlyField]`: Read-only field to display a non-editable value with a label. | ||
* `[ConfirmedPasswordField](api:ConfirmedPasswordField)`: Shows two password-fields, and checks for matching passwords. | * `[api:TextareaField]`: Multi-line text field. | ||
* `[CreditCardField](api:CreditCardField)` | * `[api:TextField]`: Multi-line text field. | ||
* `[CurrencyField](api:CurrencyField)` | * `[api:PasswordField]`: Masked input field | ||
* `[EmailField](api:EmailField)` | |||
* `[HTMLEditorField](api:HTMLEditorField)`: A WYSIWYG editor field, powered by tinymce. | |||
* `[NumericField](api:NumericField)`: A Single Numeric field extending a typical TextField but with validation. | |||
* `[PasswordField](api:PasswordField)` | |||
* `[UniqueRestrictedTextField](api:UniqueRestrictedTextField)`: Text field that automatically checks that the value entered | |||
is unique for the given set of fields in a given set of tables | |||
* `[UniqueTextField](api:UniqueTextField)`: Text field that automatically checks that the value entered is unique for the | |||
given set of fields in a given set of tables | |||
|
|||
## Date/Time | |||
|
|||
* `[DateField](api:DateField)`: Represents a date in a textfield (New Zealand) | |||
* `[DatetimeField](api:DatetimeField)`: Combined date- and time field | |||
* `[TimeField](api:TimeField)`: Represents time in a textfield (New Zealand) | |||
|
|
||
## Structure | ## Actions | ||
|
|
||
* `[CompositeField](api:CompositeField)`: Base class for all fields that contain other fields. Uses `<div>` in template, but | * `[api:FormAction]`: Button element for forms, both for `<input type="submit">` and `<button>`. | ||
doesn't necessarily have any visible styling. | * `[api:ResetFormAction]`: Action that clears all fields on a form. | ||
* `[FieldGroup](api:FieldGroup)`: Same as CompositeField, but has default styling (indentation) attached in CMS-context. |
|
||
* `[api:FieldList]`: Basic container for sequential fields, or nested fields through CompositeField. Does NOT render a | ## Formatted Input | ||
`<fieldgroup>`. | |||
* `[TabSet](api:TabSet)` | |||
* `[Tab](api:Tab)` | |||
|
|
||
* `[api:AjaxUniqueTextField]`: Text field that automatically checks that the value entered is unique for the given set of fields in a given set of tables | |||
|
|||
* `[api:ConfirmedPasswordField]`: Two masked input fields, checks for matching passwords. | |||
* `[api:CountryDropdownField]`: A simple extension to dropdown field, pre-configured to list countries. | |||
* `[api:CreditCardField]`: Allows input of credit card numbers via four separate form fields, including generic validation of its numeric values. | |||
* `[api:CurrencyField]`: Text field, validating its input as a currency. Limited to US-centric formats, including a hardcoded currency symbol and decimal separators. | |||
See `[api:MoneyField]` for a more flexible implementation. | |||
* `[api:DateField]`: Represents a date in a single input field, or separated into day, month, and year. Can optionally use a calendar popup. | |||
* `[api:DatetimeField]`: Combined date- and time field | |||
* `[api:EmailField]`: Text input field with validation for correct email format according to RFC 2822. | |||
* `[api:GroupedDropdownField]`: Grouped dropdown, using <optgroup> tags. | |||
* `[api:HTMLEditorField]. | |||
* `[api:MoneyField]`: A form field that can save into a `[api:Money]` database field. | |||
* `[api:NumericField]`: Text input field with validation for numeric values. | |||
* `[api:OptionsetField]`: Set of radio buttons designed to emulate a dropdown. | |||
* `[api:PhoneNumberField]`: Field for displaying phone numbers. It separates the number, the area code and optionally the country code and extension. | |||
* `[api:UniqueRestrictedTextField]`: Text field that automatically checks that the value entered is unique for the given set of fields in a given set of tables | |||
|
|||
* `[api:SelectionGroup]`: SelectionGroup represents a number of fields which are selectable by a radio button that appears at the beginning of each item. | |||
* `[api:TimeField]`: Input field with time-specific, localized validation. | |||
|
|
||
## Actions | ## Structure | ||
|
|
||
* `[api:Form]` for more info | * `[api:CompositeField]`: Base class for all fields that contain other fields. Uses `<div>` in template, but | ||
* `[InlineFormAction](api:InlineFormAction)`: Render a button that will act as If you want to add custom behaviour, please | doesn't necessarily have any visible styling. | ||
set {inlcudeDefaultJS} to false and work with behaviour.js. | * `[api:FieldGroup] attached in CMS-context. | ||
* `[api:Image]`: Action that uses an image instead of a button | * `[api:FieldList]`: Basic container for sequential fields, or nested fields through CompositeField. | ||
* `[InlineFormAction](api:InlineFormAction)`: Prevents placement of a button in the CMS-button-bar. | * `[api:TabSet]`: Collection of fields which is rendered as separate tabs. Can be nested. | ||
* `[api:Tab]`: A single tab inside a `TabSet` | |||
* `[api:ToggleCompositeField]`: Allows visibility of a group of fields to be toggled. | |||
* `[api:ToggleField]`: ReadonlyField with added toggle-capabilities - will preview the first sentence of the contained text-value, and show the full content by a javascript-switch. | |||
|
|
||
## Files | ## Files | ||
|
|
||
* `[FileField](api:FileField)`: Simple file upload dialog. | * `[api:FileField]`: Simple file upload dialog. | ||
* `[UploadField](api:FileIFrameField)`: File uploads through HTML5 features, including upload progress, preview and relationship management. | * `[api:UploadField]`: File uploads through HTML5 features, including upload progress, preview and relationship management. | ||
|
|
||
## Relations | ## Relations | ||
|
|
||
* `[ComplexTableField](api:ComplexTableField)`: Provides a tabuar list in your form with view/edit/add/delete links to modify | * `[api:CheckboxSetField]`: Displays a set of checkboxes as a logical group. | ||
records with a "has-one"-relationship (in a lightbox-popup). | * `[api:TableField]`: In-place editing of tabular data. | ||
* `[HasManyComplexTableField](api:HasManyComplexTableField)` | * `[api:TreeDropdownField]`: Dropdown-like field that allows you to select an item from a hierarchical AJAX-expandable tree. | ||
* `[HasOneComplexTableField](api:HasOneComplexTableField)` | * `[api:TreeMultiselectField]`: Represents many-many joins using a tree selector shown in a dropdown-like element | ||
* `[LanguageDropdownField](api:LanguageDropdownField)`: An extension to dropdown field, pre-configured to list languages. | * `[api:GridField](/topics/grid-field)`: Displays a `[api:SS_List]` in a tabular format. Versatile base class which can be configured to allow editing, sorting, etc. | ||
Tied into i18n. | * `[api:ListboxField]`: Multi-line listbox field, through `<select multiple>`. | ||
* `[ManyManyComplexTableField](api:ManyManyComplexTableField)` | |||
* `[TableField](api:TableField)` | |||
* `[api:TableListField]` | |||
* `[TreeDropdownField](api:TreeDropdownField)` | |||
* `[TreeMultiselectField](api:TreeMultiselectField)`: represents many-many joins using a tree selector shown in a | |||
dropdown-like element | |||
* `[api:WidgetArea]` | |||
* `[GridField](/topics/grid-field)` | |||
|
|||
|
|
||
|
|
||
## Dataless/Utility | ## Utility | ||
|
|
||
* `[DatalessField](api:DatalessField)` - Base class for fields which add some HTML to the form but don't submit any data or | * `[api:DatalessField]` - Base class for fields which add some HTML to the form but don't submit any data or | ||
save it to the database | save it to the database | ||
* `[HeaderField](api:HeaderField)`: Renders a simple `<h1>`-`<h6>` header | * `[api:HeaderField]`: Renders a simple HTML header element. | ||
* `[HiddenField](api:HiddenField)` | * `[api:HiddenField]` | ||
* `[LabelField](api:LabelField)` | * `[api:LabelField]`: Simple label tag. This can be used to add extra text in your forms. | ||
* `[LiteralField](api:LiteralField)`: Renders arbitrary HTML into a form. | * `[api:LiteralField]`: Renders arbitrary HTML into a form. | ||
|
|||
## CMS Field Editor | |||
|
|||
Please see `[api:HTMLEditorField]` for in-depth documentation about custom forms created through a GUI in the CMS, | |||
as well as the topic documentation about [Rich Text Editing](/topics/rich-text-editing) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters