HTML5 Forms – Verification

January 16, 2021

Created a HTML form with verification using only HTML 5 and CSS code. With HTML 5 you don’t need to rely on JavaScript to do a lot of things that was needed in the past. These things would be to not submit if area was blank, that the elements are in the right format. If you enter the wrong information in for a phone or an email it will not accept it causes an error message. Such as if you put in an email without the @ symbol in it will throw an error. Errors will also be thrown if you don’t put in enough digits or a letter for a phone number it will let you know this is not correct.

By having these elements already in the HTML it saves on having to add code. The code will add extra time to the development of the site. By not having extra code it will save in the load time for your form giving your site a faster feel to it.

I’ll be using the form I created and have in my CodePen page:

https://codepen.io/amacher13/pen/mgvpPN

To start your forms you’ll need to put a tag in for the form and include its name such as:

<form name=”survey-form” method=”post” id=”survey-form”>

The name will tell the site which form it is, there could always be the chance of having more than one form on the website, if you only have one form you’ll still need to name it, but you can give it a basic name like ‘form’. But you really should be specific in the name to help future proof your site, in case you decide to add another form later.

Method this will depend on what you’ll do with the form when submitted most of the time you will be posting the data somewhere.

Id used mostly for CSS to point to that form element, in the sample since I had one form I just pointed it to the form property. If there would have been two or more forms on the page it would have affected all of them. Using the id will point to just the one you want.

To label the form field with name, address, etc.

<label id=”name-label”><strong>Name:</strong> </label>

Required Fields:

To require that a field to be entered add ‘required’ into the input type area.

Related Articles

To create a child theme in WordPress

To create a child theme in WordPress

This write-up is to cover the very basics needed to have a child theme for testing, not instructions to create a full child theme for selling or white labeling for a client.You can get more in-depth information...

read more
Setup WordPress for local testing

Setup WordPress for local testing

If you’re getting started with WordPress or needing to test out themes, plug-ins or code, doing a local install is the best way to practice and test without worrying about altering your live site. Or if you want to work on WordPress sites when you don’t have internet...

read more
Moving WordPress to new limited server – Working notes

Moving WordPress to new limited server – Working notes

These are quick instructions written, mostly for me. But somebody with a more than basic understanding of how WordPress works and that knows basic trouble shooting should be able to follow along. If you’re not fully comfortable with WordPress it’s advised to contact...

read more

Pin It on Pinterest

Share This