Actions

Difference between revisions of "Text form field type/3.2"

From Joomla! Documentation

< Text form field type
m
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{warning|The page on this doc is in development and is not included in the master yet - It will probably be included in Joomla 3.2 but may change in usage between now and then. Use it at your own risk!}}
+
{{warning|The page is in development and is not included in the master yet - It will probably be included in Joomla 3.2 but may change in usage between now and then. Use it at your own risk!}}
 
+
[[Image:Params.text.jpg|right]]
+
  
 +
= Description =
 
The '''text''' form field type provides a text box for data entry. If the field has a value saved, this value is displayed when the page is first loaded. If not, the default value (if any) is selected.  
 
The '''text''' form field type provides a text box for data entry. If the field has a value saved, this value is displayed when the page is first loaded. If not, the default value (if any) is selected.  
  
* '''type''' (mandatory) must be ''text''.
+
= Attributes =
* '''name''' (mandatory) is the unique name of the field.
+
{| class="wikitable" border="1" style="width:85%;margin: 0 auto;"
* '''label''' (mandatory) (translatable) is the descriptive title of the field.
+
|-
* '''size''' (optional) is the width of the text box in characters. If omitted the width is determined by the browser. The value of size does not limit the number of characters that may be entered.
+
! attribute
* '''maxlength''' (optional) limits the number of characters that may be entered.
+
! presence
* '''default''' (optional) (not translatable) is the default value.
+
! type
* '''description''' (optional) (translatable) is text that will be shown as a tooltip when the user moves the mouse over the drop-down box.
+
! style="width:60%;" | description
* '''class''' (optional) is a CSS class name for the HTML form field. If omitted this will default to 'text_area'.
+
! example
* '''readonly''' (optional) The field cannot be changed and will automatically inherit the default value
+
|-
* '''disabled''' (optional) The field cannot be changed and will automatically inherit the default value - it will also not submit  
+
| type || mandatory || string || Type of field - must be text || "text"
* '''required''' (optional) The field must be filled before submitting the form.
+
|-
* '''filter''' (optional) allow the system to save certain html tags or raw data.
+
| name || mandatory || string || is the unique name of the field. || "myName"
 +
|-
 +
| label || mandatory || string || (translatable) is the descriptive title of the field. || "Text Field"
 +
|-
 +
| size || optional || number || is the width of the text box in characters. If omitted the width is determined by the browser. The value of size does not limit the number of characters that may be entered. || "20"
 +
|-
 +
| maxlength || optional || number || limits the number of characters that may be entered. || "25"
 +
|-
 +
| default || optional || string || (not translatable) is the default value. || "Default value"
 +
|-
 +
| description || optional || string || (translatable) is text that will be shown as a tooltip when the user moves the mouse over the drop-down box. || "This is a text field"
 +
|-
 +
| hint || optional || string || (translatable) is text that will be shown as a placeholder. || "Placeholder text"
 +
|-
 +
| class || optional || string || is a space separated CSS class name list for the HTML form field. || "foo bar barfoo"
 +
|-
 +
| readonly || optional || boolean || The field cannot be changed and will automatically inherit the default value. || "true"<br/>"1"<br/>"readonly"
 +
|-
 +
| disabled || optional || boolean || The field cannot be changed and will automatically inherit the default value. It will also not submit || "true"<br/>"1"<br/>"disabled"
 +
|-
 +
| required || optional || boolean || The field must be filled before submitting the form. || "true"<br/>"1"<br/>"required"
 +
|-
 +
| filter || optional || enum || allow the system to save certain html tags or raw data. || "integer"
 +
|-
 +
| autocomplete || optional || boolean || allow the user agent to prefilling the value based on earlier user input. || "false"<br/>"0"<br/>"off"
 +
|-
 +
| autofocus || optional || boolean || The field get focused automatically on page load. || "true"<br/>"1"<br/>"on"
 +
|-
 +
| spellcheck || optional || boolean || allow the user agent to disable spellcheck. || "false"<br/>"0"<br/>"off"
 +
|-
 +
| inputmode || optional || string || kind of input mechanism for users entering content into the field. || "default numeric"
 +
|}
 +
 
 +
= Options =
 +
The XML <code><field></code> element may include one or more <code><option></code> elements which define the datalist items. The text between the <code><option></code> and <code></option></code> tags is what will be shown in the suggestion list and is a translatable string.
 +
 
 +
Example
 +
<source lang="xml"><field name="mytextvalue" type="text" default="Some text" label="Enter some text">
 +
      <option>First suggestion</option>
 +
      <option>Second suggestion</option>
 +
      <option>Third suggestion</option>
 +
</field></source>
 +
 
 +
= Examples =
 +
*Basic Usage
 +
**<source lang="xml"><field name="mytextvalue" type="text" default="Some text" label="Enter some text" /></source>[[File:Basic_default.png]]
 +
 
 +
*Setting text field size
 +
**<source lang="xml"><field name="mytextvalue" type="text" label="Enter some text" size="10" /></source>[[File:Size.png]]
 +
 
 +
*Setting text field maxlength
 +
**<source lang="xml"><field name="mytextvalue" type="text" label="Enter some text" maxlength="20" /></source>[[File:Maxlength.png]]
 +
 
 +
 
 +
*Setting text field default value
 +
**<source lang="xml"><field name="mytextvalue" type="text" default="Some text" label="Enter some text" /></source>[[File:Basic_default.png]]
 +
 
 +
 
 +
*Setting a description
 +
**<source lang="xml"><field name="mytextvalue" type="text" label="Enter some text" description="Some info about the field" /></source>
 +
 
 +
 
 +
*Setting a hint(placeholder)
 +
**<source lang="xml"><field name="mytextvalue" type="text" label="Enter some text" hint="Some info about the field" /></source>[[File:Hint.png]]
 +
 
 +
 
 +
*Setting class list
 +
**<source lang="xml"><field name="mytextvalue" type="text" label="Enter some text" class="foo bar" /></source>
 +
 
 +
 
 +
*Making field readonly
 +
**<source lang="xml"><field name="mytextvalue" type="text" label="Enter some text" readonly="true" /></source>[[File:Disabled_readonly.png]]
 +
 
 +
 
 +
*Making field disabled
 +
**<source lang="xml"><field name="mytextvalue" type="text" label="Enter some text" disabled="true" /></source>[[File:Disabled_readonly.png]]
 +
 
 +
 
 +
*Making field required
 +
**<source lang="xml"><field name="mytextvalue" type="text" label="Enter some text" required="true" /></source>[[File:Required.png]]
 +
 
 +
 
 +
*Setting a filter for field
 +
**Use the integer filter to ensure that letters types get stripped when the form is processed.
 +
**<source lang="xml"><field name="myintvalue" type="text" default="8" label="Enter some text" description="Enter some description" filter="integer" /></source>
 +
**Use the raw filter to ensure that html code is preserved when the form is processed.
 +
**<source lang="xml"><field name="myhtmlvalue" type="text" default="" label="Enter some text" description="Enter some description" filter="raw" /></source>
 +
 
 +
 
 +
*Setting text field autocomplete false
 +
**<source lang="xml"><field name="mytextvalue" type="text" label="Enter some text" autocomplete="false" /></source>
 +
 
 +
 
 +
*Setting text field autofocus
 +
**<source lang="xml"><field name="mytextvalue" type="text" label="Enter some text" autofocus="true" /></source>
 +
 
 +
 
 +
*Setting text field spellcheck off
 +
**<source lang="xml"><field name="mytextvalue" type="text" label="Enter some text" spellcheck="false" /></source>[[File:Spellcheck_on.png]] [[File:Spellcheck_off.png]]
  
Example XML field definition:
 
<source lang="xml"><field name="mytextvalue" type="text" default="Some text" label="Enter some text" description="" size="10" /></source>
 
  
Use the integer filter to ensure that letters types get stripped when the form is processed.
+
*Setting text field inputmode
<source lang="xml"><field name="myintvalue" type="text" default="8" label="Enter some text" description="Enter some description" filter="integer" /></source>
+
**<source lang="xml"><field name="mytextvalue" type="text" label="Enter some text" inputmode="default" /></source>
  
Use the raw filter to ensure that html code is preserved when the form is processed.
+
<headertabs/>
<source lang="xml"><field name="myhtmlvalue" type="text" default="" label="Enter some text" description="Enter some description" filter="raw" /></source>
+

Latest revision as of 07:39, 6 September 2013

Stop hand nuvola.svg.png
Warning!

The page is in development and is not included in the master yet - It will probably be included in Joomla 3.2 but may change in usage between now and then. Use it at your own risk!


Contents

Description

The text form field type provides a text box for data entry. If the field has a value saved, this value is displayed when the page is first loaded. If not, the default value (if any) is selected.

Attributes

attribute presence type description example
type mandatory string Type of field - must be text "text"
name mandatory string is the unique name of the field. "myName"
label mandatory string (translatable) is the descriptive title of the field. "Text Field"
size optional number is the width of the text box in characters. If omitted the width is determined by the browser. The value of size does not limit the number of characters that may be entered. "20"
maxlength optional number limits the number of characters that may be entered. "25"
default optional string (not translatable) is the default value. "Default value"
description optional string (translatable) is text that will be shown as a tooltip when the user moves the mouse over the drop-down box. "This is a text field"
hint optional string (translatable) is text that will be shown as a placeholder. "Placeholder text"
class optional string is a space separated CSS class name list for the HTML form field. "foo bar barfoo"
readonly optional boolean The field cannot be changed and will automatically inherit the default value. "true"
"1"
"readonly"
disabled optional boolean The field cannot be changed and will automatically inherit the default value. It will also not submit "true"
"1"
"disabled"
required optional boolean The field must be filled before submitting the form. "true"
"1"
"required"
filter optional enum allow the system to save certain html tags or raw data. "integer"
autocomplete optional boolean allow the user agent to prefilling the value based on earlier user input. "false"
"0"
"off"
autofocus optional boolean The field get focused automatically on page load. "true"
"1"
"on"
spellcheck optional boolean allow the user agent to disable spellcheck. "false"
"0"
"off"
inputmode optional string kind of input mechanism for users entering content into the field. "default numeric"

Options

The XML <field> element may include one or more <option> elements which define the datalist items. The text between the <option> and </option> tags is what will be shown in the suggestion list and is a translatable string.

Example

<field name="mytextvalue" type="text" default="Some text" label="Enter some text">
       <option>First suggestion</option>
       <option>Second suggestion</option>
       <option>Third suggestion</option>
</field>

Examples

  • Basic Usage
    • <field name="mytextvalue" type="text" default="Some text" label="Enter some text" />
      
      Basic default.png
  • Setting text field size
    • <field name="mytextvalue" type="text" label="Enter some text" size="10" />
      
      Size.png
  • Setting text field maxlength
    • <field name="mytextvalue" type="text" label="Enter some text" maxlength="20" />
      
      Maxlength.png


  • Setting text field default value
    • <field name="mytextvalue" type="text" default="Some text" label="Enter some text" />
      
      Basic default.png


  • Setting a description
    • <field name="mytextvalue" type="text" label="Enter some text" description="Some info about the field" />
      


  • Setting a hint(placeholder)
    • <field name="mytextvalue" type="text" label="Enter some text" hint="Some info about the field" />
      
      Hint.png


  • Setting class list
    • <field name="mytextvalue" type="text" label="Enter some text" class="foo bar" />
      


  • Making field readonly
    • <field name="mytextvalue" type="text" label="Enter some text" readonly="true" />
      
      Disabled readonly.png


  • Making field disabled
    • <field name="mytextvalue" type="text" label="Enter some text" disabled="true" />
      
      Disabled readonly.png


  • Making field required
    • <field name="mytextvalue" type="text" label="Enter some text" required="true" />
      
      Required.png


  • Setting a filter for field
    • Use the integer filter to ensure that letters types get stripped when the form is processed.
    • <field name="myintvalue" type="text" default="8" label="Enter some text" description="Enter some description" filter="integer" />
      
    • Use the raw filter to ensure that html code is preserved when the form is processed.
    • <field name="myhtmlvalue" type="text" default="" label="Enter some text" description="Enter some description" filter="raw" />
      


  • Setting text field autocomplete false
    • <field name="mytextvalue" type="text" label="Enter some text" autocomplete="false" />
      


  • Setting text field autofocus
    • <field name="mytextvalue" type="text" label="Enter some text" autofocus="true" />
      


  • Setting text field spellcheck off
    • <field name="mytextvalue" type="text" label="Enter some text" spellcheck="false" />
      
      Spellcheck on.png Spellcheck off.png


  • Setting text field inputmode
    • <field name="mytextvalue" type="text" label="Enter some text" inputmode="default" />
      

<headertabs/>