Tips on Creating Online HTML Forms

My daily routine includes checking the implementation of web forms by my clients. When checking the forms, I have noticed that the same mistakes are made again and again, so I thought that writing some tips on creating online HTML forms would be helpful. First of all, let me clarify, when I say “forms” I mean the “online forms” or “web forms” or “HTML forms” on a website. In general, forms are made to collect information from website visitors; and then a form processor sends that information to certain email addresses or saves it to database.

Note: To prevent auto-editing, the symbols “Less then” and “Greater than” have been replaced with “[” and “]” in this article.

Tip 1. Properly enclosing form’s elements.

A form begins with a [form…] tag and ends with a [/form] tag. All form’s elements must be enclosed within the [form…] and [/form] tags.

Some examples of form element are: text field, checkbox, radio button, submit button.

Any elements placed outside of the [form…] [/form] area will be ignored.

If there are more than one form on a page, make sure that you close one form before opening another; in other words, one form must not be a part of another form.

Tip 2. Naming form elements properly.

The “name” attribute of an element must contain only letters, numbers, underscore and dash. The “name” attribute should not start or end with an underscore or dash. Here are some examples:

These name attributes are correct:

<br /> [input name=&#8221;FirstName&#8221;&#8230; /]<br /> [input name=&#8221;company_address&#8221;&#8230; /]<br /> [select name=&#8221;Country&#8221;&#8230; /]&#8230; [/select]<br />

These name attributes are incorrect:

<br /> [input name=&#8221;First Name&#8221;&#8230; /]<br /> [input name=&#8221;Address:&#8221;&#8230; /]<br /> [input name=&#8221;Company&#8217;s address&#8221;&#8230; /]<br /> [select name=&#8221;-Country-&#8220;&#8230; /]&#8230; [/select]<br />

Tip 3. Validating form with JavaScript.

In most cases it is beneficial to check if the form was filled out correctly. If a visitor made a mistake, the form should not be processed and the visitor should be presented with a friendly message explaining the mistake.

Usually a JavaScript function is called from the [form] tag. Here is an example to verify if the “YourWebsite” field is empty or not. If the field is empty, the JavaScript will notify the user to enter a website address. Here is the code:

<br /> [form action=&#8221;URL&#8221; onsubmit=&#8221;return ValidateForm(this);&#8221; id=&#8221;TestForm&#8221; method=&#8221;post&#8221;]<br /> Enter your website address:[br /]<br /> [input name=&#8221;YourWebsite&#8221; type=&#8221;text&#8221; maxlength=&#8221;400&#8243; width=&#8221;300&#8243; /][br /]<br /> [input name=&#8221;SubmitButton&#8221; type=&#8221;submit&#8221; value=&#8221;Submit&#8221; /][br /]<br /> [/form]<br /> [script type=&#8221;text/javascript&#8221;]<br /> function ValidateForm(frm)<br /> {<br /> if (frm.YourWebsite.value == &#8220;&#8221;)<br /> {<br /> alert(&#8216;Please enter your website address.&#8217;);<br /> frm.YourWebsite.focus();<br /> return false;<br /> }<br /> return true;<br /> }<br /> [/script]<br />

The JavaScript function ValidateForm() will return “false” value to the form if the field “YourWebsite” is empty, and the form will not be processed. Then the user will see a message “Please enter your website address”.

Tip 4. Implementing anti-spam solution.

Online forms on web pages can be easily found by myriad spam-bots also known as spiders or crawlers. When the spam-bots find your unprotected form, they would:

– send you spam through your form,

– send spam to other people using your mail server and often using your email address.

One way to prevent this from happening is to use a Captcha image. Captcha is a contrived acronym for “Completely Automated Public Turing test to tell Computers and Humans Apart”. Humans can read distorted text on a picture, but current computer programs can’t.

Tip 5. Testing the form!

Testing a newly created or modified form is very important. A small mistake may stop the form from sending visitor’s or client’s requests; you might never know that someone wanted to contact you or have placed an order.

How to test a form? After your form is ready, fill it out with the information, pretending you were a website visitor. Submit the form, and then check your mail box. There should be a new message with the data you entered into the form. If you do not see the new message, then there might be a mistake in the code. Fix it and repeat the test again.