Song of the Week
This week I've been learning about all the different input tag types and attributes in HTML5, and I discovered that HTML5 has some built in form validation. That means you can produce warning messages to notify the user of an invalid entry, all without any JavaScript.
Let's go over four the input tag attributes that I felt were some of the most useful when implementing form validation. Then at the end, you can see how all these attributes work in the embedded CodePen.
Required
The most basic and widely applicable form validation attribute is required
. By simply adding this attribute to the input tag, HTML5 will generate an alert message if the user tries to submit that form without entering a value in that field. Here's an example:
<form>
<label for='name-field'>Name:</label><br>
<input type='text' id='name-field' required/><br>
<button type="submit">Submit</button>
</form>
Min and Max
The min
and max
attribute allow you to define a range of valid entries to the following input tag types: number, range, date, datetime-local, month, time and week. This can be very useful if you want the user to enter a rating from 1-10, or to choose a day after a certain date. Here's an example:
<form>
<label for='rate-field'>Rating(1-10):</label><br>
<input type='number' id='rate-field' min='1' max='10' required/><br>
<button type="submit">Submit</button>
</form>
Step
The step
attribute sets an amount by which the value in the field can increase or decrease. So for example, if the input tag is a number type and step
equals 5, then the number entered much be divisible by 5. The step
attribute works with all of the following input tag types: number, range, date, datetime-local, month, time and week. Here's an example:
<form>
<label for='donation-field'>
Would you like to donate to charity?<br>
Enter a dollar amount in multiples of $5:
</label><br>
<input type='number' id='donation-field' step='5'/><br>
<button type="submit">Submit</button>
</form>
Pattern
The pattern
attribute allows you to use a regular expressions to validate the input. This makes pattern
extremely powerful and allows you to customize the input requirements to that input's specific needs. This could be useful if the input was for 3 letter airport codes or license plate numbers. The pattern
attribute can be used with the following input tag types: text, date, search, url, tel, email, and password. Here's an example:
<form>
<label for='airport-field'>Airport Code:</label><br>
<input
type='text'
id='airport-field'
pattern=[A-Z]{3}
placeholder='Enter the 3 capitolized letter code.'
required
/><br>
<button type="submit">Submit</button>
</form>
Interactive Example
To give you a chance to see all these in action I created a simple Airport survey that a hypothetical passenger might fill out. As you try entering invalid values in each field, be aware the HTML5 will always produce an alert on the first field in the form that has an invalid entry. So if you want to see the alerts for an input farther down, you need to enter valid entries in the input fields above.
Takeaways
- The
required
attribute will require the user to entry a value in the field before the form can be submitted. - The
min
attribute sets a minimum value that is valid for the input field. - The
max
attribute sets a maximum value that is valid for the input field. - The
step
attribute sets an amount by which the value in the field can increase or decrease. - The
pattern
attribute allows you to use a regular expressions to validate the input.
References
Cover Image
HTML Input Attributes - w3schools.com
Airport Survey Form - codepen/lofiandcode
Top comments (2)
Excellent information thanks. I especially like the validation part.
So glad to hear you found it useful!