Progressive enhancement

September 25, 2014

JavaScript should never be required to make basic features (such as HTML forms) function.

Step 1: Make it work without JavaScript

First, write basic functioning HTML.

<form action="enhance/action.html" method="get">
  <input name="foo" type="text" size="24" placeholder="Type something" />
  <input type="submit" value="submit" />
</form>

Step 2: Make it "hip"

After the basic HTML is working, add some silly (but unnecessary) enhancements. Use JavaScript code that, if it fails to run on clients that don't want/need it, won't break the underlying functionality.

<script language="javascript">
  var forms = document.getElementsByTagName('form');
  var form = forms[forms.length - 1];
  form.onsubmit =
    function() {
      showUnnecessarySpinner();
      return true;
    };
</script>

Try it out

Try submitting this form with JavaScript either enabled or disabled. Note that it works in both cases.