User:Matthew Raymond:altinput element

From WHATWG Wiki

The <altinput> element is intended to be a possible alternative to my earlier <dataentry> element.

The <altinput> element is a way of accomplishing the same goals as <dataentry> while ensuring that the size of a form's elements collection and the position of controls within it doesn't change between legacy and WF2 browsers. Rather than the element itself being a form control, <altinput> instead performs the following:

• If it has a control with an |id| attribute equal to its |for| attribute, then it attempts to assign its own |type| attribute value to the |type| of the specified control.
• If the |type| is not supported, then the <altinput> acts as nothing more than a <span>.
• However, if the |type| is supported, the control has its |type| changed and the entire contents of the <altinput> element, with the exception of specified control, are not be rendered.

The result is that, in most cases, <altinput> acts almost exactly like <dataentry>.

Examples

Here's a simple example for the three <select> scenario:

<altinput for="d1" type="date" value="2005-02-09">
 <input type="hidden" id="d1" name="d1" />
 <select name="d1_day"><!-- Options --></select> /
 <select name="d1_month"><!-- Options --></select> /
 <select name="d1_year"><!-- Options --></select>
</altinput>

Here's an example for users of jscalendar:

<altinput for="sel1" type="date">
 <input type="text" id="sel1" name="date1" size="30" />
 <input type="reset" value=" ... " onclick="return showCalendar('sel1', '%Y-%m-%d');">
 YYYY-MM-DD
</altinput>

Pros

1. The size of a form's elements collection in Javascript never changes.
2. The <altinput> element can allow for a far greater range of legacy fallback than <input> alone.
3. Because the |type| is defined in an attribute, <altinput> can be used for input types in later specifications, or for vendor-specific input types.
4. Because the elemnt requires a child form control, it encourages the use of <input> alone in simple cases where legacy fallback needs are minimal.
5. The element is designed only to prevent the presentation of its child elements. It does not require user agents to delete contents from the DOM or suppress Javascript execution.

Cons

1. It's slightly more complicated to use than <dataentry>.
2. In some situations, you must use a hidden <input> control as the target of the <altinput> element's |for| attribute.
3. It may still inherit some minor issues from <dataentry>.