Wiki source code of Eingabefeld

Show last authors
1 {{panel float="right"}}
2 (% class="block text-align-center%){{ficon name="XTextfield" size="4em"/}}
3
4 (% class="block%)The icon for form elements of type //input field//.
5 {{/panel}}
6
7 == Functionality ==
8
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.Designer.Form.ElementProperties.Label]] allows you to add a descriptive label to the checkbox.
10
11 Furthermore, the //mask// options allows you to mask the input similar to password fields.
12
13 {{internBaseOptionsElement page="base"/}}
14
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.
17 {{/figure}}
18
19 {{internBaseOptionsElement page="cond"}}
20 {{table dataTypeAlpha="0" colWidth="-500"}}
21 |=Name|=Description
22 |Data type|Specifies the data type of the element. Each data type is connected to a [[validator>>doc:Formcycle.Designer.Form.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.Designer.Form.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.Designer.Form.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.Designer.Form.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.
30 {{/table}}
31 {{/internBaseOptionsElement}}
32
33 {{internBaseOptionsElement page="label"/}}
34
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.
37 {{/figure}}
38
39 {{figure image="designer_element_textfield_masked_en.png"}}
40 When you turn on the option //mask//, the entered text is obfuscated.
41 {{/figure}}
42
43 {{internBaseOptionsElement page="val"}}
44 {{table dataTypeAlpha="0" colWidth="-500"}}
45 |=Name|=Description
46 |Value|Initial value of the element.
47 |Mask|Masks the input. Often used for password fields.
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"/}}