HTML/Elements/noscript

From Web Education Community Group
< HTML‎ | Elements
Revision as of 16:31, 22 November 2011 by Hiroki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

<noscript>

The <noscript> element represents nothing if scripting is enabled, and represents its children if scripting is disabled.

Point

  • The noscript element is used to present different markup to user agents that don’t support scripting
  • The noscript element is only effective in the HTML syntax, it has no effect in the XHTML syntax.


HTML Attributes

See global attributes.


Example

Example A

In the following example, a noscript element is used to provide fallback for a script. When script is disabled, a button appears to do the calculation on the server side. When script is enabled, the value is computed on-the-fly instead.[try it]:

<form action="calcSquare.php">
  <p>
    <label for=x>Number</label>:
    <input id="x" name="x" type="number">
  </p>
  <script>
    var x = document.getElementById('x');
    var output = document.createElement('p');
    output.textContent = 'Type a number; it will be squared right then!';
    x.form.appendChild(output);
    x.form.onsubmit = function () { return false; }
    x.oninput = function () {
      var v = x.valueAsNumber;
      output.textContent = v + ' squared is ' + v * v;
    };
  </script>
  <noscript>
    <input type=submit value="Calculate Square">
  </noscript>
</form>


The noscript element is a blunt instrument. Sometimes, scripts might be enabled, but for some reason the page's script might fail. For this reason, it's generally better to avoid using noscript, and to instead design the script to change the page from being a scriptless page to a scripted page on the fly, as in the next example. The above technique is also useful in XHTML, since noscript is not supported in the XHTML syntax [try it]:

<form action="calcSquare.php">
  <p>
    <label for=x>Number</label>:
    <input id="x" name="x" type="number">
  </p>
  <input id="submit" type=submit value="Calculate Square">
  <script>
    var x = document.getElementById('x');
    var output = document.createElement('p');
    output.textContent = 'Type a number; it will be squared right then!';
    x.form.appendChild(output);
    x.form.onsubmit = function () { return false; }
    x.oninput = function () {
      var v = x.valueAsNumber;
      output.textContent = v + ' squared is ' + v * v;
    };
    var submit = document.getElementById('submit');
    submit.parentNode.removeChild(submit);
  </script>
</form>

Noscript01.png

HTML Reference

The HTML5 specification defines the <noscript> element in 4.3.2 The noscript element.