[HTML5] Form – New Elements, Types, and Attributes

Collecting information is one of the most important features in Commercial web applications. HTML5′ enhancement of the form is significant. Let’s overview the changes in HTML5.

1. New Form Elements

The following elements are added in HTML5:

  • <datalist> : a list of pre-defined options for an <input> element
  • <keygen> : a key-pair generator field in a form
  • <output> : the result of a calculation

 

2. Input Types in HTML4

The key element of the HTML form is <input>. It can be used in many ways depending on the “type”  attribute.

Let’s briefly review what HTML4 offers.

  • text : a one-line input field
  • hidden : a hidden input field
  • password :  a password field. The characters are masked
  • button : a clickable button
  • image: an image button
  • reset : a reset button
  • submit : a submit button
  • checkbox : a checkbox
  • radio: a radio button
  • file : an input field and a “Browse…” button, for file uploads

 

3. New Input Types

The following types are added to the <input> element in HTML5:

  • color : a color-picker
  • datetime : a calendar
  • date : a calendar (UTC date and time)
  • time : a time control
  • datetime-local : a calendar (Local date and time)
  • month: a calendar (month only)
  • week: a calendar (week only)
  • number: a numeric input
  • range: a numeric input in a range
  • email 
  • search 
  • tel 
  • url

Note that each type can be rendered differently in different browsers.

 

4. New Input Attributes

New types makes use of attributes to set the related information:

  • autocomplete : “on” and “off”
  • autofocus: “autofocus”
  • form : the id of the form to which the input element belongs
  • formaction : overrides the form action
  • formenctype : the form encoding type
  • formmethod : “get” or “post”, used for the “submit” type
  • formnovalidate :
  • formtarget : the target window
  • height / width: used for the “image” type
  • list : refers to the <datalist> element
  • min / max : for numbers and dates
  • multiple :
  • pattern : (regexp) holds the regular expression for validation
  • placeholder : the hint (water-mark) text
  • required :
  • step: the interval for numeric values

 

5. <datalist> Element

The <datalist> is a stroage of data. It is not rendered in UI. The main purpose of the <datalist> element is to provide an “autocomplete” feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.

You need to use the “list” attribute to connect <datalist> to <input>.

<script src="../Scripts/jquery.js"></script>
<script>
$(document).ready(function () {
  $("#colors").on("change", function (e) {
    alert(e.target.value);
  });
});
</script>
</head>
<body>
  <form id="form1" method="post" action="#">
  <p>Colors:
    <input list="colordata" id="colors" />
    <datalist id="colordata">
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
      <option>Black</option>
    </datalist>
    </p>
  </form>
</body>

 

6. <output> Element

The <output> element is used to represents the result of a calculation. The “for” attribute specifies the elements used in the calculation.

<script src="../Scripts/jquery.js"></script>
<script>
  $(document).ready(function () {
    $("#form1").on("input", function () {
      var result = parseInt($("#x").val()) + parseInt($("#y").val());
      $("#result").val(result);
  });
});
</script>
</head>
<body>
  <form id="form1" method="post" action="#">
  <p>
    <input type="number" id="x" value="50"> +
    <input type="number" id="y" value="50"> =
    <output id="result" for="x y"></output>
  </p>
  </form>
</body>

Note that it uses the new form event “input“. It is used when an element gets user input.

 

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s