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

Website Contact form using AWS

Website Contact form using AWS

For the next iteration of the HTML form was to set it up to send an email to the web owner using AWS. The purpose behind this is, if you have a HTML site and don’t want to purchase a monthly plan or build and maintain server software. Using AWS for this functionality...

read more
HTML with JavaScript contact form

HTML with JavaScript contact form

Link to the form: https://www.lynnamacher.com/pdf/contactForm_V1.html This is created to be basic test for an AWS contact form test. The full form when filled out will send an email through AWS to the site owner. Instead of creating the normal test form I try to...

read more
Save Illustrator for SVG to use in HTML page

Save Illustrator for SVG to use in HTML page

When working with the AWS contact form, I had created a graphic in Illustrator. You can see the post here. With this test form I wanted to have everything in one HTML file this way it’s just one file to upload and update when needed without making sure the other files...

read more

Pin It on Pinterest

Share This