Progressive Enhancement

September 25, 2014

JavaScript should never be required by basic features such as HTML forms.

Make it work without JavaScript

First, write basic functioning HTML.

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

Make it hip

After the basic HTML is working, add whatever unnecessary enhancements are desired. 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 form = document.getElementsByTagName('form')[0];
  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.

References