Adding HTML5 to Old Forms

Recently I began migrating this website to new hosting.  Part of the challenge has been getting my old PHP-powered pages to work with WordPress.  There are still several pages remaining to be reprogrammed.

HTML5 LogoOne of the more interesting changes is adding HTML5 form validation features.  I was able to eliminate chunks of JavaScript and replace with simple HTML5 commands to ensure only numbers are entered in the form field and make sure the form is not empty.  Below are some new features I found useful.

  • Autofocus – places cursor focus on the form field automatically
    autofocus="autofocus"
  • Pattern – validates the form data to ensure only decimal numbers (and an optional decimal point) are entered into the form, and limits the number of characters
    pattern="(d{1,3})([.]{0,1})(d{0,4})"
  • Title – displays text during mouse hover over the form field; more importantly, it is displayed on the screen when there is a form entry error
    title="Enter only numbers and decimal place"
  • Required – the form field is required, cannot be left empty
    required

My entire form field string looks like:

<INPUT TYPE="TEXT" NAME="freq" SIZE="8" maxlength="8" value="<?php echo $freq; ?>" autofocus="autofocus" pattern="(d{1,3})([.]{0,1})(d{0,4})" title="Enter only numbers plus one optional decimal place - e.g. 146.775 - no letters, commas or special characters" required />

The HTML5 enhancements seem to be working very well on the J-Pole Antenna Calculator Page.  I will be integrating HTML5 enhancements into other forms as development progresses.

Do you have suggestions or comments?  Please leave a reply below:

Leave a Reply

Your email address will not be published.

Name *
Email *
Website