thoughts

Usage

Include the following HTML in the head of your page:

<script 
  type="text/javascript"
  src="http://www.rikkertkoppes.com/modules/interfacing/wf2.0/wf2.0.js">
</script>

That's it, a stylesheet will automatically be inserted in your document.

General

Some of these controls show a picture at the very right side of the text field. This is done by adding a background image through a style sheet and some padding through inline style. A lot of css classes are added to the control, to enable restyling of the whole.

date

<input type="date">

This is what it looks like

• The input is equipped with a wf2-date-related class.
• The widget itself is equipped with lots of classes as well, which enable restyling. Note that the table layout of my own stylesheet is inherited.
• Note scrollwheel functionality on calendar, and month and year fields

I am redoing this at the moment. The widget will be a single widget, which is used for every field. The input element will no longer be replaced with a span element. The widget will dynamically be inserted after the input and removed when done. In short: less HTML pollution.

month and week

<input type="month">

<input type="week">

These are very much the same as the date control

time

<input type="time">

This is what it looks like

• The input is equipped with a wf2-time class
• The dial is a background-image and can be set in css (wf2-clock-dial class)
• The hand color and thickness can be set in css

This is only a starter, things are not working properly

number

<input type="number" min="-99" max="99" value="0" step="5">

This is what it looks like

• The input is equipped with a wf2-number class.
• The min attribute specifies the minimum value
• The max attribute specifies the maximum value
• The step attribute specifies the step size

Value can be changed with the aid of the scrollwheel, up and down arrows or by typing

Note that the spinner button does not work

range

<input type="range">

Working on it, here's a sample, it might look completely silly, as the library is changing. Note that safari also implemented this widget, but I am overruling it by my own, since Safari's implementation lacks some features (vertical slider and formchange event for example). I copied the slider however, but feel free to use your own, it is a background-image. The last one below is based on Opera's slider.

• The control changes orientation by looking at the width and height ratio.
• The input is equipped with a wf2-range-horizontal or wf2-range-vertical class, depending on the orientation.
• Add style to the hover and active pseudoclasses of these to get an even more rich control
• The min attribute specifies the minimum value
• The max attribute specifies the maximum value
• The step attribute specifies the step size

email

<input type="email">

No plans on implementing, one might write a suitable pattern instead. Suggestions:

• please make a suggestion

url

<input type="url">

Not implemented.

The output element

<output onforminput="this.value = this.form.elements['range1'].value">

This element is converted to an input element. It is equipped with a wf2-output class and set to readonly. Needs some tweaking. Try the first vertical slider above.

datalist element and list attribute

<input type="text" list="urls">

• This currently only works when the list attribute is pointing to the id of a select element, so the datalist element is not supported.

Pseudo-pseudoclasses

The WF2 specification defines some pseudoclasses that apply to various states of controls. Since I could not implement these, I implemented regular classes instead. Note that regular classes count the same in css specificity as pseudoclasses. The following pseudo-pseudoclasses are implemented:

• :invalid as wf2-invalid
• :valid as wf2-valid
• :required as wf2-required
• :optional as wf2-optional
• :read-only as wf2-read-only
• :read-write as wf2-read-write

I hope you see the pattern here. More will probably be implemented in the future

pattern attribute

<input type="text" pattern="\d{4}\s?[a-zA-Z]{2}">

This attribute allows to specify a regular expression. As an example, here is a text control with a pattern specified as \d{4}\s?[a-zA-Z]{2} (a zip code in the Netherlands). I also made a style rule for the wf2-invalid pseudo-pseudoclass (a red border-bottom).

required attribute

Specifies a control to be required, the control is invalid if it is empty. Example (I made a style rule for the wf2-required pseudo-pseudoclass (a beige background):

readonly attribute

It was already in HTML, but it is being processed and pseudo-pseudoclasses are attached (wf2-read-only or wf2-read-write)

autofocus attribute

This attribute focusses the element on page load. If there are more elements with this attribute, the last in the dom is focussed.

clearable attribute

This attribute adds a clear button to text fields. Note that this is not in the WF2 specification!

custom styling

The spinner and calendar and clock thingies are background-images to the input element. If you want to create your own background (maybe even to the complete field), you can do that, note that the padding-right and the clicking behaviour of that area still remain

Normal date field

Restyled (inline) date field

These are classes that are attached to the controls. They speak for themselves, use them to restyle your widgets:

• .wf2-text-clearable
• .wf2-daterelated
• .wf2-time
• .wf2-number
• .wf2-calendar
• .wf2-clock
• .wf2-calendar-button
• .wf2-calendar-head
• .wf2-clock-head
• .wf2-calendar-month
• .wf2-calendar-year
• .wf2-calendar-foot
• .wf2-clock-foot
• .wf2-current-month
• .wf2-other-month

DOM interfaces

• checkValidity() method on input and form elements
• reset() method on input, form and fieldset elements (the latter is not in the WF2 specification)
• oninvalid handler only executes code in the oninvalid attribute, no real event
• onformchange
• onforminput
• more...

The section is to be extended

Repetition model

The repetition model is currently in progress, it includes

• repeat attribute
• add, remove, move-up and move-down button types and template attribute.
• addRepetitionBlock() and addRepetitionBlockByIndex() methods
• moveRepetitionBlock() and removeRepetitionBlock() methods
• more...

Read the specification about how to use this, in short, define a template by using a repeat="template" attribute somewhere on an element-to-be-repeated (for example a table row or list item). Then add a add button somewhere with a template attribute pointing to the id of the template. Here is an (extended) example from the specification.

Add Row

<form>
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Quantity</th>
        <th colspan="4"></th>
      </tr>
    </thead>
    <tbody>
      <tr id="order" repeat="template" repeat-start="3">
        <td><input type="text" name="row[order].product" value=""></td>
        <td><input type="text" name="row[order].quantity" value="1"></td>
        <td><button type="remove">Remove This Row</button></td>
        <td><button type="add">add</button></td>
        <td><button type="move-up">Up</button></td>
        <td><button type="move-down">Down</button></td>
      </tr>
    </tbody>
  </table>
  <p><button type="add" template="order">Add Row</button></p>
</form>