Improve Form Fields

Click here, Press key to advance.

Table Of Contents

Current Status
Left to complete
Attributes
Github repo
Feature Tracker
Feedback Please

Current Status

Attributes (with fallback)

placeholder
required
autofocus
multiple
formnovalidate
list (going to be)

Current Status (cont.)

Attributes (without fallback)

autocomplete
spellcheck
inputmode
accept
dirname

Left to Complete

Input fields

email
url
number
range
tel

Left to Complete (cont.)

Elements

meter
progress

Left to Complete (cont.)

Attributes

min & max
step
pattern

Attributes

Placeholder

<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

Attributes

Required

<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

Attributes

Autofocus

<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

Attributes

Multiple

<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

Attributes

Formnovalidate

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>

Attributes

List

<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

Attributes

Autocomplete

<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

Attributes

Spellcheck

<field type="text" spellcheck="off" />
<field type="text" spellcheck="0" />
<field type="text" spellcheck="false" />

No Fallback

Test it in a Joomla site

Attributes

Inputmode

<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

Attributes

Accept

<field type="file" accept="text/js" />

No Fallback

Test it in a Joomla site

Attributes

Dirname

<field type="text" dirname />

No Fallback.

Test it in a Joomla site

Feature Tracker

Introducing HTML5 form fields and attributes - GSOC [#31347]

Feedback ( only negative )

EMail Id : theachalaggarwal@gmail.com

Skype Name : achal_aggarwal