New form attributes

HTML4 and HTML5 input attributes

In this chapter, we will look at the new form attributes that have been introduced by HTML5.

HTML4

HTML5

  • name
  • disabled*
  • type
  • maxlength
  • readonly
  • size
  • value
  • alt
  • src
  • height
  • width
  • checked*
  • align **
  • form
  • readonly
  • autocomplete
  • autofocus
  • list
  • pattern
  • required*
  • placeholder
  • multiple
  • list
  • min
  • max
  • step
  • formaction
  • formenctype
  • formmethod
  • formtarget
  • formnovalidate
*   pseudoclasses CSS target with :disabled and :checked or :required selectors

** align is deprecated, CSS rules should be used instead

We have already seen the use of pseudo CSS classes used together with the input field and form validation (patternattribute, input:invalid CSS rule). We also briefly looked at the use of the placeholderattributes for displaying a helper message in the input field.

In this section, we will cover the rest of the new attributes and provide further examples of using the previously discussed attributes.

Another part of the course, about form validation and visual feedback using CSS, will examine some of the most useful attributes in even greater detail.

The form attribute

This attribute is useful for putting input fields outside the form itself. The form attribute of an external input field must share the same value as the id of the form the field belongs to. This is useful when using <fieldset> elements for making the page/form layout easier.

TYPICAL USE

Try this interactive example in JS Bin

 

Source code:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <label for=“yourName”>Enter your name:</label>
  5. <input type=“text” id=“yourName” name=“yourName” form=“form1”/>
  6. <p>
  7. <form id=“form1” action=“sumit.php” method=“post”>
  8. <fieldset>
  9.      <legend>Choose option</legend>
  10.      <label for=“free”>Free registering</label>
  11.      <input type=“checkbox” id=“free”/>
  12.      <label for=“premium”>Premium</label>
  13.      <input type=“checkbox” id=“premium”/>
  14.  
  15.      <button type=“submit”>Send form</button>
  16. </fieldset>
  17. </form>
  18. </body>
  19. </html>

Line 5 and 7 shows the form attribute. Make sure that its value matches the id of the form!

The autocomplete attribute

This attribute applies either to the <form> element or on individual <input> elements. It specifies when input fields must autocomplete the user’s input based on the user’s typing history.

Possible values of this attribute: on/off.

If applied to the <form> element, all input fields attached to the form (inside or linked to it using the form attribute), will have auto-completion set by default to the value of the autocomplete attribute of the form.

This default behavior can be overridden by setting it individually to any input field inside. In other words: it is possible to have autocomplete “on” for the form, and “off” for specific input fields, or vice-versa.

Sometimes this autocomplete behavior is disabled by default in some Web browsers, and will need to be adjusted in the preferences/settings.

This attribute targets most input types (those that allow typing in them).

TYPICAL USE

Online example: http://jsbin.com/fucoji/2/edit

Source code extract:

  1. <form submit=“test.php” method=“post” autocomplete=“on”>
  2.     …
  3.     <label for=“address”>Enter your address (autocomplete off, overrides the
  4.            form’s autocomplete=on attribute):</label>
  5.     <input type=“text” id=“address” autocomplete=“off”>
  6.     <p>
  7.     <label for=“address1”>Enter your address (autocomplete on by inheritance of
  8.            the form’s autocomplete=on attribute):</label>
  9.     <input type=“text” id=“address1”>
  10.     <p>
  11.     <button type=“submit”>Submit</button>
  12.     …
  13. </form>

The <autocomplete> attribute of the <form> or of the <input> elements proposes auto-completions from a dataset provided by the Web developer (locally or from a remote server)?

True

False

<span id="answer_bee3bfbbd3f44fdf8974b32c7f92e482_2_1"/>
</fieldset>


unanswered

</div></div>

SubmitSubmit your answer

</div>
</div>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s