HTML5 Form Validation Using Input Types
Tags: html, beginners
Published: 2020-05-18 04:30:40

###Song of the Week
{% soundcloud https://soundcloud.com/cloudchord/sunlit %}
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:
```html
<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:
```html
<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.
```html
<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:
```html
<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:
```html
<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:
```html
<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.
{% codepen https://codepen.io/lofiandcode/pen/MWazwMe %}

##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](http://www.theresiliencyinstitute.net/we-need-your-input/)
[HTML Input Types - w3schools.com](https://www.w3schools.com/html/html_form_input_types.asp)
[Input Type Examples - codepen.io/lofiandcode](https://codepen.io/lofiandcode/pen/MWazwMe)