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:

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

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
Cloud Computing

Cloud Computing

As we seen in the above cartoon there can be some confusion over what is ‘the cloud’ and how it works. Such as how Bob, the slightly balding manager in the cartoon, thought the data was up in an actual cloud. I’ve wrote up a basic description of what is ‘the cloud’....

read more
Visit Farmer City: Test Site

Visit Farmer City: Test Site

Visit Farmer City is a test website location that I use to work on website ideas usually for big projects. When doing these sample sites I give them a generic branding to not show who the customer is. Right now it’s being used to create an idea for a newspaper and not...

read more

Pin It on Pinterest

Share This