[FEATURE] EXT:form - Add HTML4 / HTML5 attributes to the wizard 75/43775/10
authorRalf Zimmermann <ralf.zimmermann@tritum.de>
Tue, 6 Oct 2015 11:02:07 +0000 (13:02 +0200)
committerWouter Wolters <typo3@wouterwolters.nl>
Tue, 6 Oct 2015 19:20:38 +0000 (21:20 +0200)
* Add new attributes to the wizard:

autocomplete, autofocus, contenteditable, contextmenu, draggable,
dropzone, height, hidden, inputmode, list, max, min, minlength,
novalidate, pattern, required, selectionDirection, selectionEnd,
selectionStart, spellcheck, step, translate, width, wrap

* Add new values for the type attribute:

color, date, datetime, datetime-local, email, month, number, range,
search, tel, time, url, week

Resolves: #70332
Releases: master
Change-Id: Ib22a3229e0a8d6f51b8f5fd66a64bd8745437961
Reviewed-on: http://review.typo3.org/43775
Reviewed-by: Bjoern Jacob <bjoern.jacob@tritum.de>
Tested-by: Bjoern Jacob <bjoern.jacob@tritum.de>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
typo3/sysext/core/Documentation/Changelog/master/Feature-70332-EXTform-AddHTML4HTML5AttributesToTheWizard.rst [new file with mode: 0644]
typo3/sysext/form/Configuration/PageTS/modWizards.ts
typo3/sysext/form/Resources/Private/Language/locallang_wizard.xlf
typo3/sysext/form/Resources/Public/JavaScript/Wizard/Viewport/Left/Options/Forms/Attributes.js

diff --git a/typo3/sysext/core/Documentation/Changelog/master/Feature-70332-EXTform-AddHTML4HTML5AttributesToTheWizard.rst b/typo3/sysext/core/Documentation/Changelog/master/Feature-70332-EXTform-AddHTML4HTML5AttributesToTheWizard.rst
new file mode 100644 (file)
index 0000000..6f98120
--- /dev/null
@@ -0,0 +1,220 @@
+=======================================================================
+Feature: #70332 - EXT:form - Add HTML4 / HTML5 attributes to the wizard
+=======================================================================
+
+Description
+===========
+
+The form wizard should support a wide set of attributes.
+At the moment the wizard is able to set some attributes, but this
+attribute-set is not complete and does not include HTML5 attributes.
+
+The patch extends the wizard to set all universal HTML and HTML5
+attributes based on selfhtml documentation version 8.1.2.
+
+Currently supported attributes
+------------------------------
+
+``accept, acceptcharset, accesskey, action, alt, checked, class, cols,
+dir, disabled, enctype, id, label, lang, maxlength, method, multiple,
+name, placeholder, readonly, rows, selected, size, src, style, tabindex,
+title, type, value``
+
+New attributes
+--------------
+
+``autocomplete, autofocus, contenteditable, contextmenu, draggable,
+dropzone, height, hidden, inputmode, list, max, min, minlength,
+novalidate, pattern, required, selectionDirection, selectionEnd,
+selectionStart, spellcheck, step, translate, width, wrap``
+
+The **type attribute** will be extended with the following HTML5 types:
+
+``color, date, datetime, datetime-local, email, month, number, range,
+search, tel, time, url, week``
+
+Each element is now able to set the HTML universal attributes and
+element specific attributes.
+
+Universal attributes are:
+
+``accesskey, class, contenteditable, contextmenu, dir, draggable,
+dropzone, hidden, id, lang, spellcheck, style, tabindex, title,
+translate``
+
+FORM
+----
+
+Currently supported attributes
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+``accept, accept-charset, action, class, dir, enctype, id, lang, method,
+style, title``
+
+New attributes
+^^^^^^^^^^^^^^
+
+Universal attributes + ``accept, accept-charset, action, autocomplete,
+enctype, method, novalidate``
+
+BUTTON
+------
+
+Currently supported attributes
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+``accesskey, alt, class, dir, disabled, id, lang, name, style, tabindex,
+title, type, value``
+
+New attributes
+^^^^^^^^^^^^^^
+
+Universal attributes + ``autofocus, disabled, name, type, value``
+
+SELECT
+------
+
+Currently supported attributes
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+``class, disabled, id, lang, multiple, name, size, style, tabindex,
+title``
+
+New attributes
+^^^^^^^^^^^^^^
+
+Universal attributes + ``autofocus, disabled, multiple, name,
+required, size``
+
+TEXTAREA
+--------
+
+Currently supported attributes
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+``accesskey, class, cols, dir, disabled, id, lang, name, placeholder,
+readonly, rows, style, tabindex, title``
+
+New attributes
+^^^^^^^^^^^^^^
+
+Universal attributes + ``autofocus, cols, disabled, inputmode,
+maxlength, minlength, name, placeholder, readonly, required, rows,
+selectionDirection, selectionEnd, selectionStart, wrap``
+
+SUBMIT
+------
+
+Currently supported attributes
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+``accesskey, alt, class, dir, disabled, id, lang, name, style, tabindex,
+title, type, value``
+
+New attributes
+^^^^^^^^^^^^^^
+
+Universal attributes + ``autofocus, disabled, name, type, value``
+
+RADIO
+-----
+
+Currently supported attributes
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+``accesskey, alt, class, dir, disabled, id, lang, name, style, tabindex,
+title, type, value``
+
+New attributes
+^^^^^^^^^^^^^^
+
+Universal attributes + ``autofocus, checked, disabled, name, readonly,
+required, type, value``
+
+PASSWORD
+--------
+
+Currently supported attributes
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+``accesskey, alt, class, dir, disabled, id, lang, maxlength, name,
+placeholder, readonly, size, style, tabindex, title, type, value``
+
+New attributes
+^^^^^^^^^^^^^^
+
+Universal attributes + ``autocomplete, autofocus, disabled, maxlength,
+minlength, name, pattern, placeholder, readonly, required, size, type,
+value``
+
+HIDDEN
+------
+
+Currently supported attributes
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+``class, id, lang, name, style, type, value``
+
+New attributes
+^^^^^^^^^^^^^^
+
+Universal attributes + ``name, type, value``
+
+FILEUPLOAD
+----------
+
+Currently supported attributes
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+``accesskey, alt, class, dir, disabled, id, lang, name, size, style,
+tabindex, title, type``
+
+New attributes
+^^^^^^^^^^^^^^
+
+Universal attributes + ``accept, autofocus, disabled, multiple name,
+readonly, required, type, value``
+
+RESET
+-----
+
+Currently supported attributes
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+``accesskey, alt, class, dir, disabled, id, lang, name, style, tabindex,
+title, type, value``
+
+New attributes
+^^^^^^^^^^^^^^
+
+Universal attributes + ``autofocus, disabled, name, type, value``
+
+TEXTLINE
+--------
+
+Currently supported attributes
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+``accesskey, alt, class, dir, disabled, id, lang, maxlength, name,
+placeholder, readonly, size, style, tabindex, title, type, value``
+
+New attributes
+^^^^^^^^^^^^^^
+
+Universal attributes + ``autocomplete, autofocus, disabled, inputmode,
+list, maxlength, minlength, name, pattern, placeholder, readonly,
+required, size, type, value``
+
+CHECKBOX
+
+Currently supported attributes
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+``accesskey, alt, class, dir, disabled, id, lang, name, style,
+tabindex, title, type, value``
+
+New attributes
+^^^^^^^^^^^^^^
+
+Universal attributes + ``autofocus, checked, disabled, name, readonly,
+required, type, value``
index cbfbb18..141b2d9 100644 (file)
@@ -41,7 +41,7 @@ prefix = tx_form
                                        showAccordions = legend, label, attributes, options, validation, filters, various
                                        accordions {
                                                attributes {
-                                                       showProperties = accept, acceptcharset, accesskey, action, alt, checked, class, cols, dir, disabled, enctype, id, label, lang, maxlength, method, multiple, name, placeholder, readonly, rows, selected, size, src, style, tabindex, title, type, value
+                                                       showProperties = accept, accept-charset, accesskey, action, alt, autocomplete, autofocus, checked, class, cols, contenteditable, contextmenu, dir, draggable, dropzone, disabled, enctype, hidden, height, id, inputmode, label, lang, list, max, maxlength, method, min, minlength, multiple, name, novalidate, pattern, placeholder, readonly, required, rows, selected, selectionDirection, selectionEnd, selectionStart, size, spellcheck, src, step, style, tabindex, title, translate, type, value, width, wrap
                                                }
                                                label {
                                                        showProperties = label
@@ -157,9 +157,6 @@ prefix = tx_form
                                form {
                                        showAccordions = behaviour, prefix, attributes, postProcessor
                                        accordions {
-                                               attributes {
-                                                       showProperties = accept, acceptcharset, action, class, dir, enctype, id, lang, method, name, style, title
-                                               }
                                                postProcessor {
                                                        showPostProcessors = mail, redirect
                                                        postProcessors {
@@ -176,6 +173,13 @@ prefix = tx_form
                        }
                }
                elements {
+                       form {
+                               accordions {
+                                       attributes {
+                                               showProperties = accept, accept-charset, action, class, dir, enctype, id, lang, method, style, title
+                                       }
+                               }
+                       }
                        button {
                                showAccordions = attributes
                                accordions {
index b25af05..d0dc0dc 100644 (file)
@@ -78,6 +78,9 @@
                        <trans-unit id="basic_hidden">
                                <source>Hidden Field</source>
                        </trans-unit>
+                       <trans-unit id="basic_input">
+                               <source>Input Field</source>
+                       </trans-unit>
                        <trans-unit id="basic_password">
                                <source>Password Field</source>
                        </trans-unit>
                        <trans-unit id="attributes_alt">
                                <source>Alt</source>
                        </trans-unit>
+                       <trans-unit id="attributes_autocomplete">
+                               <source>Autocomplete</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_autocomplete_none">
+                               <source>Not set</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_autocomplete_off">
+                               <source>Off</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_autocomplete_on">
+                               <source>On</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_autofocus">
+                               <source>Autofocus</source>
+                       </trans-unit>
                        <trans-unit id="attributes_checked">
                                <source>Checked</source>
                        </trans-unit>
                        <trans-unit id="attributes_cols">
                                <source>Cols</source>
                        </trans-unit>
+                       <trans-unit id="attributes_contenteditable">
+                               <source>Content editable</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_contenteditable_none">
+                               <source>Not set</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_contenteditable_true">
+                               <source>True</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_contenteditable_false">
+                               <source>False</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_contextmenu">
+                               <source>Contextmenu</source>
+                       </trans-unit>
                        <trans-unit id="attributes_dir">
                                <source>Dir</source>
                        </trans-unit>
                        <trans-unit id="attributes_disabled">
                                <source>Disabled</source>
                        </trans-unit>
+                       <trans-unit id="attributes_draggable">
+                               <source>Draggable</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_draggable_none">
+                               <source>Not set</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_draggable_true">
+                               <source>True</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_draggable_false">
+                               <source>False</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_draggable_auto">
+                               <source>Auto</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_dropzone">
+                               <source>Dropzone</source>
+                       </trans-unit>
                        <trans-unit id="attributes_enctype">
                                <source>Enctype</source>
                        </trans-unit>
                        <trans-unit id="attributes_enctype_3">
                                <source>No encoding - Spaces converted</source>
                        </trans-unit>
+                       <trans-unit id="attributes_hidden">
+                               <source>Hidden</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_height">
+                               <source>Height</source>
+                       </trans-unit>
                        <trans-unit id="attributes_id">
                                <source>Id</source>
                        </trans-unit>
+                       <trans-unit id="attributes_inputmode">
+                               <source>Inputmode</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_inputmode_none">
+                               <source>Not set</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_inputmode_verbatim">
+                               <source>Verbatim</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_inputmode_latin">
+                               <source>Latin</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_inputmode_latin-name">
+                               <source>Latin-name</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_inputmode_latin-prose">
+                               <source>Latin-prose</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_inputmode_full-width-latin">
+                               <source>Full-width-latin</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_inputmode_kana">
+                               <source>Kana</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_inputmode_kana-name">
+                               <source>Kana-name</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_inputmode_katakana">
+                               <source>Katakana</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_inputmode_numeric">
+                               <source>Numeric</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_inputmode_tel">
+                               <source>Tel</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_inputmode_email">
+                               <source>Email</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_inputmode_url">
+                               <source>Url</source>
+                       </trans-unit>
                        <trans-unit id="attributes_label">
                                <source>Label</source>
                        </trans-unit>
                        <trans-unit id="attributes_lang">
                                <source>Lang</source>
                        </trans-unit>
+                       <trans-unit id="attributes_list">
+                               <source>List</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_max">
+                               <source>Max</source>
+                       </trans-unit>
                        <trans-unit id="attributes_maxlength">
                                <source>Maxlength</source>
                        </trans-unit>
                        <trans-unit id="attributes_method">
                                <source>Method</source>
                        </trans-unit>
+                       <trans-unit id="attributes_min">
+                               <source>Min</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_minlength">
+                               <source>Minlength</source>
+                       </trans-unit>
                        <trans-unit id="attributes_method_get">
                                <source>Get</source>
                        </trans-unit>
+                       <trans-unit id="attributes_pattern">
+                               <source>Pattern</source>
+                       </trans-unit>
                        <trans-unit id="attributes_method_post">
                                <source>Post</source>
                        </trans-unit>
                        <trans-unit id="attributes_name">
                                <source>Name</source>
                        </trans-unit>
+                       <trans-unit id="attributes_novalidate">
+                               <source>Novalidate</source>
+                       </trans-unit>
                        <trans-unit id="attributes_placeholder">
                                <source>Placeholder</source>
                        </trans-unit>
                        <trans-unit id="attributes_readonly">
                                <source>Readonly</source>
                        </trans-unit>
+                       <trans-unit id="attributes_required">
+                               <source>Required</source>
+                       </trans-unit>
                        <trans-unit id="attributes_rows">
                                <source>Rows</source>
                        </trans-unit>
                        <trans-unit id="attributes_selected">
                                <source>Selected</source>
                        </trans-unit>
+                       <trans-unit id="attributes_selectionDirection">
+                               <source>Selection direction</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_selectionDirection_none">
+                               <source>Not set</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_selectionDirection_forward">
+                               <source>Forward</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_selectionDirection_backward">
+                               <source>Backward</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_selectionEnd">
+                               <source>Selection end</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_selectionStart">
+                               <source>Selection start</source>
+                       </trans-unit>
                        <trans-unit id="attributes_size">
                                <source>Size</source>
                        </trans-unit>
+                       <trans-unit id="attributes_spellcheck">
+                               <source>Spellcheck</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_spellcheck_none">
+                               <source>Not set</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_spellcheck_true">
+                               <source>True</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_spellcheck_false">
+                               <source>False</source>
+                       </trans-unit>
                        <trans-unit id="attributes_src">
                                <source>Src</source>
                        </trans-unit>
+                       <trans-unit id="attributes_step">
+                               <source>Step</source>
+                       </trans-unit>
                        <trans-unit id="attributes_style">
                                <source>Style</source>
                        </trans-unit>
                        <trans-unit id="attributes_title">
                                <source>Title</source>
                        </trans-unit>
+                       <trans-unit id="attributes_translate">
+                               <source>Translate</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_translate_none">
+                               <source>Not set</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_translate_yes">
+                               <source>Yes</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_translate_no">
+                               <source>No</source>
+                       </trans-unit>
                        <trans-unit id="attributes_type">
                                <source>Type</source>
                        </trans-unit>
                        <trans-unit id="attributes_type_checkbox">
                                <source>checkbox</source>
                        </trans-unit>
+                       <trans-unit id="attributes_type_color">
+                               <source>color</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_type_date">
+                               <source>date</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_type_datetime">
+                               <source>datetime</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_type_datetime-local">
+                               <source>datetime-local</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_type_email">
+                               <source>email</source>
+                       </trans-unit>
                        <trans-unit id="attributes_type_file">
                                <source>file</source>
                        </trans-unit>
                        <trans-unit id="attributes_type_image">
                                <source>image</source>
                        </trans-unit>
+                       <trans-unit id="attributes_type_month">
+                               <source>month</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_type_number">
+                               <source>number</source>
+                       </trans-unit>
                        <trans-unit id="attributes_type_password">
                                <source>password</source>
                        </trans-unit>
                        <trans-unit id="attributes_type_radio">
                                <source>radio</source>
                        </trans-unit>
+                       <trans-unit id="attributes_type_range">
+                               <source>range</source>
+                       </trans-unit>
                        <trans-unit id="attributes_type_reset">
                                <source>reset</source>
                        </trans-unit>
+                       <trans-unit id="attributes_type_search">
+                               <source>search</source>
+                       </trans-unit>
                        <trans-unit id="attributes_type_submit">
                                <source>submit</source>
                        </trans-unit>
+                       <trans-unit id="attributes_type_tel">
+                               <source>tel</source>
+                       </trans-unit>
                        <trans-unit id="attributes_type_text">
                                <source>text</source>
                        </trans-unit>
+                       <trans-unit id="attributes_type_time">
+                               <source>time</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_type_url">
+                               <source>url</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_type_week">
+                               <source>week</source>
+                       </trans-unit>
                        <trans-unit id="attributes_value">
                                <source>Value</source>
                        </trans-unit>
+                       <trans-unit id="attributes_width">
+                               <source>Width</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_wrap">
+                               <source>Wrap</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_wrap_none">
+                               <source>Not set</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_wrap_soft">
+                               <source>Soft</source>
+                       </trans-unit>
+                       <trans-unit id="attributes_wrap_hard">
+                               <source>Hard</source>
+                       </trans-unit>
                        <trans-unit id="options_label">
                                <source>Label Properties</source>
                        </trans-unit>
index a3421ff..db2eb53 100644 (file)
@@ -72,10 +72,10 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
-                               case 'acceptcharset':
+                               case 'accept-charset':
                                        formItems.push({
                                                fieldLabel: TYPO3.l10n.localize('attributes_acceptcharset'),
-                                               name: 'acceptcharset',
+                                               name: 'accept-charset',
                                                listeners: {
                                                        'triggerclick': {
                                                                scope: this,
@@ -121,6 +121,48 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'autocomplete':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_autocomplete'),
+                                               name: 'autocomplete',
+                                               xtype: 'combo',
+                                               mode: 'local',
+                                               triggerAction: 'all',
+                                               forceSelection: true,
+                                               editable: false,
+                                               hiddenName: 'autocomplete',
+                                               displayField: 'label',
+                                               valueField: 'value',
+                                               store: new Ext.data.JsonStore({
+                                                       fields: ['label', 'value'],
+                                                       data: [
+                                                               {label: TYPO3.l10n.localize('attributes_autocomplete_none'), value: ''},
+                                                               {label: TYPO3.l10n.localize('attributes_autocomplete_off'), value: 'off'},
+                                                               {label: TYPO3.l10n.localize('attributes_autocomplete_on'), value: 'on'}
+                                                       ]
+                                               }),
+                                               listeners: {
+                                                       'select': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
+                               case 'autofocus':
+                                       formItems.push({
+                                               xtype: 'checkbox',
+                                               fieldLabel: TYPO3.l10n.localize('attributes_autofocus'),
+                                               name: 'autofocus',
+                                               inputValue: 'autofocus',
+                                               listeners: {
+                                                       'check': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                                case 'checked':
                                        formItems.push({
                                                xtype: 'checkbox',
@@ -165,6 +207,46 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'contenteditable':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_contenteditable'),
+                                               name: 'contenteditable',
+                                               xtype: 'combo',
+                                               mode: 'local',
+                                               triggerAction: 'all',
+                                               forceSelection: true,
+                                               editable: false,
+                                               hiddenName: 'contenteditable',
+                                               displayField: 'label',
+                                               valueField: 'value',
+                                               store: new Ext.data.JsonStore({
+                                                       fields: ['label', 'value'],
+                                                       data: [
+                                                               {label: TYPO3.l10n.localize('attributes_contenteditable_none'), value: ''},
+                                                               {label: TYPO3.l10n.localize('attributes_contenteditable_true'), value: 'true'},
+                                                               {label: TYPO3.l10n.localize('attributes_contenteditable_false'), value: 'false'}
+                                                       ]
+                                               }),
+                                               listeners: {
+                                                       'select': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
+                               case 'contextmenu':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_contextmenu'),
+                                               name: 'contextmenu',
+                                               listeners: {
+                                                       'triggerclick': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                                case 'dir':
                                        formItems.push({
                                                fieldLabel: TYPO3.l10n.localize('attributes_dir'),
@@ -206,6 +288,47 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'draggable':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_draggable'),
+                                               name: 'draggable',
+                                               xtype: 'combo',
+                                               mode: 'local',
+                                               triggerAction: 'all',
+                                               forceSelection: true,
+                                               editable: false,
+                                               hiddenName: 'draggable',
+                                               displayField: 'label',
+                                               valueField: 'value',
+                                               store: new Ext.data.JsonStore({
+                                                       fields: ['label', 'value'],
+                                                       data: [
+                                                               {label: TYPO3.l10n.localize('attributes_draggable_none'), value: ''},
+                                                               {label: TYPO3.l10n.localize('attributes_draggable_false'), value: 'false'},
+                                                               {label: TYPO3.l10n.localize('attributes_draggable_true'), value: 'true'},
+                                                               {label: TYPO3.l10n.localize('attributes_draggable_auto'), value: 'auto'}
+                                                       ]
+                                               }),
+                                               listeners: {
+                                                       'select': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
+                               case 'dropzone':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_dropzone'),
+                                               name: 'dropzone',
+                                               listeners: {
+                                                       'triggerclick': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                                case 'enctype':
                                        formItems.push({
                                                fieldLabel: TYPO3.l10n.localize('attributes_enctype'),
@@ -234,6 +357,37 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'height':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_height'),
+                                               name: 'height',
+                                               xtype: 'spinnerfield',
+                                               listeners: {
+                                                       'spin': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       },
+                                                       'blur': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
+                               case 'hidden':
+                                       formItems.push({
+                                               xtype: 'checkbox',
+                                               fieldLabel: TYPO3.l10n.localize('attributes_hidden'),
+                                               name: 'hidden',
+                                               inputValue: 'hidden',
+                                               listeners: {
+                                                       'check': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                                case 'id':
                                        formItems.push({
                                                fieldLabel: TYPO3.l10n.localize('attributes_id'),
@@ -246,6 +400,44 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'inputmode':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_inputmode'),
+                                               name: 'inputmode',
+                                               xtype: 'combo',
+                                               mode: 'local',
+                                               triggerAction: 'all',
+                                               forceSelection: true,
+                                               editable: false,
+                                               hiddenName: 'inputmode',
+                                               displayField: 'label',
+                                               valueField: 'value',
+                                               store: new Ext.data.JsonStore({
+                                                       fields: ['label', 'value'],
+                                                       data: [
+                                                               {label: TYPO3.l10n.localize('attributes_inputmode_none'), value: ''},
+                                                               {label: TYPO3.l10n.localize('attributes_inputmode_verbatim'), value: 'verbatim'},
+                                                               {label: TYPO3.l10n.localize('attributes_inputmode_latin'), value: 'latin'},
+                                                               {label: TYPO3.l10n.localize('attributes_inputmode_latin-name'), value: 'latin-name'},
+                                                               {label: TYPO3.l10n.localize('attributes_inputmode_latin-prose'), value: 'latin-prose'},
+                                                               {label: TYPO3.l10n.localize('attributes_inputmode_full-width-latin'), value: 'full-width-latin'},
+                                                               {label: TYPO3.l10n.localize('attributes_inputmode_kana'), value: 'kana'},
+                                                               {label: TYPO3.l10n.localize('attributes_inputmode_kana-name'), value: 'kana-name'},
+                                                               {label: TYPO3.l10n.localize('attributes_inputmode_katakana'), value: 'katakana'},
+                                                               {label: TYPO3.l10n.localize('attributes_inputmode_numeric'), value: 'numeric'},
+                                                               {label: TYPO3.l10n.localize('attributes_inputmode_tel'), value: 'tel'},
+                                                               {label: TYPO3.l10n.localize('attributes_inputmode_email'), value: 'email'},
+                                                               {label: TYPO3.l10n.localize('attributes_inputmode_url'), value: 'url'}
+                                                       ]
+                                               }),
+                                               listeners: {
+                                                       'select': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                                case 'label':
                                        formItems.push({
                                                fieldLabel: TYPO3.l10n.localize('attributes_label'),
@@ -270,6 +462,30 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'list':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_list'),
+                                               name: 'list',
+                                               listeners: {
+                                                       'triggerclick': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
+                               case 'max':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_max'),
+                                               name: 'max',
+                                               listeners: {
+                                                       'triggerclick': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                                case 'maxlength':
                                        formItems.push({
                                                fieldLabel: TYPO3.l10n.localize('attributes_maxlength'),
@@ -314,6 +530,35 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'min':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_min'),
+                                               name: 'min',
+                                               listeners: {
+                                                       'triggerclick': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
+                               case 'minlength':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_minlength'),
+                                               name: 'minlength',
+                                               xtype: 'spinnerfield',
+                                               listeners: {
+                                                       'spin': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       },
+                                                       'blur': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                                case 'multiple':
                                        formItems.push({
                                                xtype: 'checkbox',
@@ -341,6 +586,32 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'novalidate':
+                                       formItems.push({
+                                               xtype: 'checkbox',
+                                               fieldLabel: TYPO3.l10n.localize('attributes_novalidate'),
+                                               name: 'novalidate',
+                                               inputValue: 'novalidate',
+                                               listeners: {
+                                                       'check': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
+                               case 'pattern':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_pattern'),
+                                               name: 'pattern',
+                                               listeners: {
+                                                       'triggerclick': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                                case 'placeholder':
                                        formItems.push({
                                                fieldLabel: TYPO3.l10n.localize('attributes_placeholder'),
@@ -367,6 +638,20 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'required':
+                                       formItems.push({
+                                               xtype: 'checkbox',
+                                               fieldLabel: TYPO3.l10n.localize('attributes_required'),
+                                               name: 'required',
+                                               inputValue: 'required',
+                                               listeners: {
+                                                       'check': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                                case 'rows':
                                        formItems.push({
                                                fieldLabel: TYPO3.l10n.localize('attributes_rows'),
@@ -399,6 +684,68 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'selectionDirection':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_selectionDirection'),
+                                               name: 'selectionDirection',
+                                               xtype: 'combo',
+                                               mode: 'local',
+                                               triggerAction: 'all',
+                                               forceSelection: true,
+                                               editable: false,
+                                               hiddenName: 'selectionDirection',
+                                               displayField: 'label',
+                                               valueField: 'value',
+                                               store: new Ext.data.JsonStore({
+                                                       fields: ['label', 'value'],
+                                                       data: [
+                                                               {label: TYPO3.l10n.localize('attributes_selectionDirection_none'), value: ''},
+                                                               {label: TYPO3.l10n.localize('attributes_selectionDirection_forward'), value: 'forward'},
+                                                               {label: TYPO3.l10n.localize('attributes_selectionDirection_backward'), value: 'backward'}
+                                                       ]
+                                               }),
+                                               listeners: {
+                                                       'select': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
+                               case 'selectionEnd':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_selectionEnd'),
+                                               name: 'selectionEnd',
+                                               xtype: 'spinnerfield',
+                                               listeners: {
+                                                       'spin': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       },
+                                                       'blur': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
+                               case 'selectionStart':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_selectionStart'),
+                                               name: 'selectionStart',
+                                               xtype: 'spinnerfield',
+                                               listeners: {
+                                                       'spin': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       },
+                                                       'blur': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                                case 'size':
                                        formItems.push({
                                                fieldLabel: TYPO3.l10n.localize('attributes_size'),
@@ -416,6 +763,34 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'spellcheck':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_spellcheck'),
+                                               name: 'spellcheck',
+                                               xtype: 'combo',
+                                               mode: 'local',
+                                               triggerAction: 'all',
+                                               forceSelection: true,
+                                               editable: false,
+                                               hiddenName: 'spellcheck',
+                                               displayField: 'label',
+                                               valueField: 'value',
+                                               store: new Ext.data.JsonStore({
+                                                       fields: ['label', 'value'],
+                                                       data: [
+                                                               {label: TYPO3.l10n.localize('attributes_spellcheck_none'), value: ''},
+                                                               {label: TYPO3.l10n.localize('attributes_spellcheck_true'), value: 'true'},
+                                                               {label: TYPO3.l10n.localize('attributes_spellcheck_false'), value: 'false'}
+                                                       ]
+                                               }),
+                                               listeners: {
+                                                       'select': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                                case 'src':
                                        formItems.push({
                                                fieldLabel: TYPO3.l10n.localize('attributes_src'),
@@ -428,6 +803,23 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'step':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_step'),
+                                               name: 'step',
+                                               xtype: 'spinnerfield',
+                                               listeners: {
+                                                       'spin': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       },
+                                                       'blur': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                                case 'style':
                                        formItems.push({
                                                fieldLabel: TYPO3.l10n.localize('attributes_style'),
@@ -469,6 +861,34 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'translate':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_translate'),
+                                               name: 'translate',
+                                               xtype: 'combo',
+                                               mode: 'local',
+                                               triggerAction: 'all',
+                                               forceSelection: true,
+                                               editable: false,
+                                               hiddenName: 'translate',
+                                               displayField: 'label',
+                                               valueField: 'value',
+                                               store: new Ext.data.JsonStore({
+                                                       fields: ['label', 'value'],
+                                                       data: [
+                                                               {label: TYPO3.l10n.localize('attributes_translate_none'), value: ''},
+                                                               {label: TYPO3.l10n.localize('attributes_translate_no'), value: 'no'},
+                                                               {label: TYPO3.l10n.localize('attributes_translate_yes'), value: 'yes'}
+                                                       ]
+                                               }),
+                                               listeners: {
+                                                       'select': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                                case 'type':
                                        formItems.push({
                                                fieldLabel: TYPO3.l10n.localize('attributes_type'),
@@ -486,14 +906,27 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                        data: [
                                                                {label: TYPO3.l10n.localize('attributes_type_button'), value: 'button'},
                                                                {label: TYPO3.l10n.localize('attributes_type_checkbox'), value: 'checkbox'},
+                                                               {label: TYPO3.l10n.localize('attributes_type_color'), value: 'color'},
+                                                               {label: TYPO3.l10n.localize('attributes_type_date'), value: 'date '},
+                                                               {label: TYPO3.l10n.localize('attributes_type_datetime'), value: 'datetime'},
+                                                               {label: TYPO3.l10n.localize('attributes_type_datetime-local'), value: 'datetime-local'},
+                                                               {label: TYPO3.l10n.localize('attributes_type_email'), value: 'email'},
                                                                {label: TYPO3.l10n.localize('attributes_type_file'), value: 'file'},
                                                                {label: TYPO3.l10n.localize('attributes_type_hidden'), value: 'hidden'},
                                                                {label: TYPO3.l10n.localize('attributes_type_image'), value: 'image'},
+                                                               {label: TYPO3.l10n.localize('attributes_type_month'), value: 'month'},
+                                                               {label: TYPO3.l10n.localize('attributes_type_number'), value: 'number'},
                                                                {label: TYPO3.l10n.localize('attributes_type_password'), value: 'password'},
                                                                {label: TYPO3.l10n.localize('attributes_type_radio'), value: 'radio'},
+                                                               {label: TYPO3.l10n.localize('attributes_type_range'), value: 'range'},
                                                                {label: TYPO3.l10n.localize('attributes_type_reset'), value: 'reset'},
+                                                               {label: TYPO3.l10n.localize('attributes_type_search'), value: 'search'},
                                                                {label: TYPO3.l10n.localize('attributes_type_submit'), value: 'submit'},
-                                                               {label: TYPO3.l10n.localize('attributes_type_text'), value: 'text'}
+                                                               {label: TYPO3.l10n.localize('attributes_type_tel'), value: 'tel'},
+                                                               {label: TYPO3.l10n.localize('attributes_type_text'), value: 'text'},
+                                                               {label: TYPO3.l10n.localize('attributes_type_time'), value: 'time'},
+                                                               {label: TYPO3.l10n.localize('attributes_type_url'), value: 'url'},
+                                                               {label: TYPO3.l10n.localize('attributes_type_week'), value: 'week'}
                                                        ]
                                                }),
                                                listeners: {
@@ -516,6 +949,51 @@ TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPa
                                                }
                                        });
                                        break;
+                               case 'width':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_width'),
+                                               name: 'width',
+                                               xtype: 'spinnerfield',
+                                               listeners: {
+                                                       'spin': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       },
+                                                       'blur': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
+                               case 'wrap':
+                                       formItems.push({
+                                               fieldLabel: TYPO3.l10n.localize('attributes_wrap'),
+                                               name: 'wrap',
+                                               xtype: 'combo',
+                                               mode: 'local',
+                                               triggerAction: 'all',
+                                               forceSelection: true,
+                                               editable: false,
+                                               hiddenName: 'wrap',
+                                               displayField: 'label',
+                                               valueField: 'value',
+                                               store: new Ext.data.JsonStore({
+                                                       fields: ['label', 'value'],
+                                                       data: [
+                                                               {label: TYPO3.l10n.localize('attributes_wrap_none'), value: ''},
+                                                               {label: TYPO3.l10n.localize('attributes_wrap_soft'), value: 'soft'},
+                                                               {label: TYPO3.l10n.localize('attributes_wrap_hard'), value: 'hard'}
+                                                       ]
+                                               }),
+                                               listeners: {
+                                                       'select': {
+                                                               scope: this,
+                                                               fn: this.storeValue
+                                                       }
+                                               }
+                                       });
+                                       break;
                        }
                }, this);