Text Input is a property-editor that is used to enter plain-text content, configurable with modern HTML5 options.
In your new Data Type, selected the "[Contentment] Text Input" option. You will see the following configuration fields.
The first field is Input type, which is used to configure the type of input expected. You can select from:
- Text (for normal text) - this is the default
- Email (for an email address)
- Telephone (for a telephone number)
- URL (for a web address)
From an HTML5 perspective, this is the
<input>'stypeattribute.
The second field is Placeholder text, which is used to add initial instructional information for the text input, this is not a default value.
For technical users, from a HTML5 perspective, this is the
<input>'splaceholderattribute.
The next field is Data list, this is used to provide a list of predefined values to suggest to the user for the text input.
For technical users, this is the
<input>'slistattribute, making use of the<datalist>element.
The configuration of the data source uses the same approach as the Data List editor, please see the documentation for example data source options.
An extensive list of all the built-in data-sources is available.
The Maximum allowed characters field is used to limit the number of characters that can be entered in the text input. The default limit is 500 characters.
The Enable autocomplete? option can enable your web-browser's autocomplete functionality on the text input.
For technical users, this is the
<input>'sautocompleteattribute.
The Enable spellcheck? option can enable your web-browser's spellcheck functionality on the text input.
For technical users, this is the
<input>'sspellcheckattribute.
The Prepend icon - allows you to optionally select an icon that is shown before your input control.
The Append icon - this allows you to optionally select an icon that is shown after your input control.
Once you have added the configured Data Type to your Document Type, the Text Input editor will be displayed on the content page's property panel.
Visually, this is similar to Umbraco's Textbox editor.
The value for the Text Input is a string.
Programmatically, you would access the value exactly the same as Umbraco's Textbox editor, see Umbraco's documentation for code snippet examples.