RK* - rikkertkoppes.com

thoughts

web forms 2 to go

Web Forms 2.0 is a html form extension proposal, which includes several new input types. I have built a library that reads features and provides the proposed functionality with the aid of javascript. Note that Opera already supports quite a number of these features, hence, this library does nothing extra in Opera.

Here's a showcase

This library is still under development, this is only a showcase of its features up till now. The library is subject to change, and licensed

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.

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

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.

Product Quantity

<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>

Additional resources (top 15)

Below is a list of additional resources that might contain extra information about the subject at hand. These are all sites linking to this one (i.e. backtracking).

  1. webforms2 example table add row from list - Поиск в Google (31)
older articles

AdministrationAtom feed