Wiki source code of Eingabefeld
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
3.3 | 1 | {{panel float="right"}} |
| |
3.4 | 2 | (% class="block text-align-center%){{ficon name="XTextfield" size="4em"/}} |
 |
1.1 | 3 | |
| |
16.2 | 4 | (% class="block%)The icon for form elements of type //input field//. |
| |
3.3 | 5 | {{/panel}} |
| 6 | |||
| |
16.2 | 7 | == Functionality == |
| |
1.1 | 8 | |
| |
16.2 | 9 | Form elements of type //input field// add an input field for a single line of text to the form. The [[label properties panel>>doc:Formcycle.FormDesigner.ElementProperties.Label]] allows you to add a descriptive label to the checkbox. |
| |
1.1 | 10 | |
| |
16.2 | 11 | Furthermore, the //mask// options allows you to mask the input similar to password fields. |
| 12 | |||
| |
9.4 | 13 | {{internBaseOptionsElement page="base"/}} |
| |
1.1 | 14 | |
| |
16.2 | 15 | {{figure image="designer_element_textfield_properties_constraints_en.png"}} |
| 16 | The constraints property panel lets you set the data type for the input field, and whether it is a required field that needs to be filled out. | ||
| |
9.2 | 17 | {{/figure}} |
| |
1.1 | 18 | |
| 19 | {{internBaseOptionsElement page="cond"}} | ||
| 20 | {{table dataTypeAlpha="0" colWidth="-500"}} | ||
| |
16.2 | 21 | |=Name|=Description |
| 22 | |Data type|Specifies the data type of the element. Each data type is connected to a [[validator>>doc:Formcycle.FormDesigner.CodingPanel.Validators.WebHome]] that checks whether text was entered in the correct format. When the data type //date// is selected, a calendar shows up that lets the user quickly select a particular date. See also [[internationalizing the calendar.>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.AdjustDateFormat.WebHome]]. | ||
| 23 | For formatting numeric input with a certain precision and optionally units such as //€// or //kg//, the function [[autoNumeric>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.AutoNumeric]] can be used. | ||
| 24 | By selecting the data type //regular expression//, you can use a custom //regexp// for validation. This will also display another field named //error text//, the text that will be displayed when the text of the input field does not match the regexp. The text of the error message can be [[translated into different languages>>doc:Formcycle.FormDesigner.Internationalization]] as well. The regexp flavor is JavaScript, described in detail at [[mozilla.org>>url:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions]]. | ||
| 25 | |Length min|The minimum number of characters that need to be entered. | ||
| 26 | |Length max|The maximum number of characters that can be entered. | ||
| 27 | |Value min|Minumum value of the input, applicable only to the numeric data types //integer//, //positive integer//, //number//, //amount of money//, and //positive amount of money//. | ||
| 28 | |Value max|Maximum value of the input, applicable only to the numeric data types //integer//, //positive integer//, //number//, //amount of money//, //positive amount of money// and //positive amount of money (decimal opt.)//. | ||
| 29 | |Must equal|Whether the value of this input field must equal the value of some other form field. | ||
| |
1.1 | 30 | {{/table}} |
| 31 | {{/internBaseOptionsElement}} | ||
| 32 | |||
| |
9.4 | 33 | {{internBaseOptionsElement page="label"/}} |
| |
1.1 | 34 | |
| |
16.2 | 35 | {{figure image="designer_element_textfield_properties_values_en.png"}} |
| 36 | Input fields allow you to specify an initial value and whether the input should be masked. | ||
| |
9.2 | 37 | {{/figure}} |
| |
1.1 | 38 | |
| |
16.2 | 39 | {{figure image="designer_element_textfield_masked_en.png"}} |
| 40 | When you turn on the option //mask//, the entered text is obfuscated. | ||
| |
9.2 | 41 | {{/figure}} |
| |
1.1 | 42 | |
| 43 | {{internBaseOptionsElement page="val"}} | ||
| 44 | {{table dataTypeAlpha="0" colWidth="-500"}} | ||
| |
16.2 | 45 | |=Name|=Description |
| 46 | |Value|Initial value of the element. | ||
| 47 | |Mask|Masks the input. Often used for password fields. | ||
| |
1.1 | 48 | {{/table}} |
| 49 | {{/internBaseOptionsElement}} | ||
| 50 | |||
| 51 | {{internBaseOptionsElement page="css"/}} | ||
| 52 | |||
| 53 | {{internBaseOptionsElement page="attr"/}} | ||
| 54 | |||
| 55 | {{internBaseOptionsElement page="avail"/}} | ||
| 56 | |||
| 57 | {{internBaseOptionsElement page="ronly"/}} | ||
| 58 | |||
| 59 | {{internBaseOptionsElement page="misc"/}} | ||
| 60 | |||
| 61 | {{content moveToTop="true"/}} |