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.
