Click here, Press → key to advance.
Current Status
Left to complete
Attributes
Github repo
Feature Tracker
Feedback Please
placeholder
required
autofocus
multiple
formnovalidate
list (going to be)
autocomplete
spellcheck
inputmode
accept
dirname
email
url
number
range
tel
meter
progress
min & max
step
pattern
<field type="text" hint="Placeholder text goes here" />
In non supported browsers set color of placeholder by using css on placeholder class. For example
.placeholder{ color : grey; }
Test it in a Joomla site
<field type="text" required="true" /> <field type="text" required="1" /> <field type="text" required="required" />
Browsers which supports HTML5 provide feedback whose UI depends upon browser itsef. But in non supported browsers feedback is provided by adding required and invalid class to the field. So developers can set css to display invalid or required elements in highlight. For example
.required, .invalid{ colr : red; }In joomla users also get messages at top of the form.
Test it in a Joomla site
<field type="text" autofocus="true" /> <field type="text" autofocus="1" /> <field type="text" autofocus="on" />
First element with autofocus attribute get focus.
Test it in a Joomla site
<field type="email" multiple="true" /> <field type="email" multiple="1" /> <field type="email" multiple="multiple" />
<field type="file" multiple="true" /> <field type="file" multiple="1" /> <field type="file" multiple="multiple" />
Fallback is provided for only multiple emails only.
Test it in a Joomla site
Although it can't be used in xml with any field, but it affect other fields. So we can do as
<input type="submit" formnovalidate>
<field type="text"> <option value="Option 1">Opt1</option> <option value="Option 2">Opt2</option> <option value="Option 3">Opt3</option> </field>
This attribute still doesn't have fallback.
Test it in a Joomla site
<field type="text" autocomplete="off" /> <field type="text" autocomplete="0" /> <field type="text" autocomplete="false" /> <field type="text" autocomplete="name" />
Depends upon browser for the data.
Test it in a Joomla site
<field type="text" spellcheck="off" /> <field type="text" spellcheck="0" /> <field type="text" spellcheck="false" />
No Fallback
Test it in a Joomla site
<field type="text" inputmode="latin-prose" /> <field type="text" inputmode="default" /> <field type="text" inputmode="default latin-prose" />
No Fallback
Test it in a Joomla site
<field type="file" accept="text/js" />
No Fallback
Test it in a Joomla site
<field type="text" dirname />
No Fallback.
Test it in a Joomla site
Updated branch
https://github.com/Achal-Aggarwal/joomla-cms/tree/gsoc-fields
Comapred with master
https://github.com/Achal-Aggarwal/joomla-cms/compare/gsoc-fields
Comapred with master (diff)
https://github.com/Achal-Aggarwal/joomla-cms/compare/gsoc-fields.diff
Introducing HTML5 form fields and attributes - GSOC [#31347]
EMail Id : theachalaggarwal@gmail.com
Skype Name : achal_aggarwal