Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Exploring HTML 5 Forms : Page 2

One of the major initial goals of the HTML 5 effort was to update the core HTML form elements to reflect more contemporary thinking. Find out how well the HTML 5 specification has fulfilled that goal so far.


advertisement

Working with Output

Perhaps the most significant of the new forms elements is the <output> element. Just as with the <input> element, the <output> element contains a @value attribute, which reflects its current state value. However, in this case, the value rather than the internal content will be displayed for the element. When the @value attribute (or the element's corresponding .value property) changes, so too will the content.

For instance, the following illustrates a simple "Hello, World!" where the target of the hello is an output field:

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Hello!</title> <script type="text/javascript"><![CDATA[ function updateHello(ctrl){ var helloOutput = document.getElementById('helloName'); helloOutput.value = ctrl.value; } ]]></script> </head> <body> <div>Hello, <output id="helloName" value="World"/>!</div> <input type="button" value="John" onclick="updateHello(this)"/> <input type="button" value="Paul" onclick="updateHello(this)"/> <input type="button" value="George" onclick="updateHello(this)"/> <input type="button" value="Ringo" onclick="updateHello(this)"/> </body> </html>



The advantages of output may not be obvious right away. After all, you could do the same thing with a <span> element that has the same id value and the .innerText property. However, the <output> element has a few additional properties that make using it more advantageous.

Two attributes, @mode and @defaultValue, allow you to create initial values for the field. When you set @mode to "default" and don't specify a @value attribute, the @value of the output field is the same as the value contained in @defaultValue. If you specify neither, then the result is an empty string (""). When @value changes, so does @defaultValue.

On the other hand, if you set the @mode attribute to "value," then changing the value of @value has no effect on @defaultValue, which consequently can be accessed only by the .defaultValue property.

You can see the results of having created initial values for the field when forms reset. Each form has its own .reset() method, which, when invoked, will cause each element associated with the form to call its own internal reset routines. For output, the effect of a reset is the @value attribute (and consequently the display for the element) is set to the value in @defaultValue. Note that form controls do not need to be contained in their associated form elements. Instead, you can use a control's @form=name attribute to associate a control with a form having the specified name. This can be especially useful for <output>, as this element is the most likely to be contained in text content, well away from the form to which it's linked.

Here is an example:

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Hello!</title> <script type="text/javascript"><![CDATA[ function updateHello(ctrl){ var helloOutput = document.getElementById('helloName'); helloOutput.mode="value"; helloOutput.value = ctrl.value; } ]]></script> </head> <body> <div>Hello, <output id="helloName" defaultValue="World" form="selector" />!</div> <form name="selector"> <input type="button" value="John" onclick="updateHello(this)"/> <input type="button" value="Paul" onclick="updateHello(this)"/> <input type="button" value="George" onclick="updateHello(this)"/> <input type="button" value="Ringo" onclick="updateHello(this)"/> <input type="reset" value="Reset"/> <form> </body> </html>

Here, the <output> is located outside of the form but is still bound to it via the @form attribute. Its initial value will be "World." When a user presses a button, the first thing that happens is that the @mode attribute is set to "value," enabling the @value and @defaultValue attributes to be decoupled. That way, @defaultValue always retains its initial value (in this case, "World").

When a user presses the Reset button, the @mode for the output field is automatically reset to "default" and the value of @value is set to the value contained in @defaultValue (once again, giving you "Hello, World!"). Whether or not the output so generated can incorporate HTML elements is unclear in the original HTML 5 specification.

When HTML 5 becomes widely adopted, <output> will likely become one of the more widely used elements. This can also serve to dramatically simplify JavaScript coding--especially with specific new document- and form-based events such as onforminput.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap