HTML5 Form Validation Using Input Types

Song of the Week

Last week I wrote a post about how to use input tag attributes to implement form validation without JavaScript. This week I wanted to cover go over how you can use input tag types to implement form validation, again without JavaScript.

The great thing about using input tag types for form validation is that while some will generate an alert to tell the user they made a bad entry, many others will simply not allow the user to make an invalid entry in the first place.

Now there are quite a few input tag types, but I chose to show you the 6 types that I thought would be the most useful in restricting form inputs. And just like last week, at the end of this post I embedded a CodePen so you experiment with examples of all the types covered.

Date

The date input type creates a field in which the user can only enter a date in the format "mm/dd/yyyy". This is an example of one of the input types that doesn't allow the user to enter an invalid input, rather than creating an alert on submit. If the browser supports it, this field will have a date picker to assist when entering a date. Also, the date input type is not supported by Safari or Internet Explorer 11(or earlier). Here's an example:

<form id='form'>
  <label for='date-example'>Date:</label>
  <input 
    type='date' 
    id='date-example'
  /><br>
  <button type="submit">Submit</button>
</form> 

Time

The time input type creates a field in which the user can only enter a time in the format "00:00 AM/PM". Be aware that this input type is not supported by Safari or Internet Explorer 12(or earlier). Here's an example:

<form id='form'>
  <label for='time-example'>Time:</label>
  <input 
    type='time' 
    id='time-example'
  /><br>
  <button type="submit">Submit</button>
</form>

Email

The email input type creates a field which will create an alert if the user does not enter an email address. Another cool feature of this field is that some smartphones will recognize it and add a ".com" to the keyboard. Here's an example.

<form id='form'>
  <label for='email-example'>Email:</label>
  <input 
    type='email' 
    id='email-example' 
    placeholder='example@example.com'
  /><br>
  <button type="submit">Submit</button>
</form>

URL

The url input type creates a field which will create an alert if the user does not enter a url. Like this email type, some smartphones will also recognize it and add a ".com" to the keyboard. Here's an example:

<form id='form'>
  <label for='url-example'>URL:</label>
  <input 
    type='url' 
    id='url-example' 
  /><br>
  <button type="submit">Submit</button>
</form>

Number

The number input type creates a field in which the user can only enter a number. In addition to preventing the user from entering letters or symbols with this input type, you can also use the 'min', 'max', and 'step' attributes we covered last week to further restrict the user's entries. Here's an example:

<form id='form'>
  <label for='number-example'>Number:</label>
  <input 
    type='number' 
    id='number-example'
  /><br>
  <button type="submit">Submit</button>
</form>

Range

The range input type creates a field in which the user can only operate a slide bar. The default range of the slide bar is 0 to 100, but you can use the min and max attributes to set a custom range. You can also set how the slide bar increments between the min and max with the step attribute. Here's an example:

<form id='form'>
  <label for='range-example'>Range (0-30):</label>
  <input 
    type='range' 
    id='range-example'
    min="0"
    max="30"
    step="5"
  /><br>
  <button type="submit">Submit</button>
</form>

Interactive Example

As you try entering invalid values in each field, be aware that only the email and url input fields will create an alert if you enter an invalid entry. The other field will simply prevent you from making an invalid entry.

Takeaways

• The date input type creates a field in which the user can only enter a date in the format "mm/dd/yyyy".
• The time input type creates a field in which the user can only enter a time in the format "00:00 AM/PM".
• The email input type creates a field which will create an alert if the user does not enter an email address.
• The url input type creates a field which will create an alert if the user does not enter a url.
• The number input type creates a field in which the user can only enter a number.
• The range input type creates a field in which the user can only operate a slide bar. The default range of the slide bar is 0 to 100, but you can use the min and max attributes to set a new range.

If you want to read more about these and all the other input types in HTML5, click the w3shools link under references.

References

Cover Image
HTML Input Types - w3schools.com
Input Type Examples - codepen.io/lofiandcode