Forms in HTML

In this tutorial I'm going to show you how to create forms, which are a great way to collect feedback from your site or if your creating a guestbook. FYI, HTML on it's own cannot create these, this is just the client side part (the forms), creating feedback forms or a guestbook would need to help of a server side language.

To begin, we need to open the form tag and give our entire form a name, like this;

Now we can add our input boxes / checkboxes / radio buttons ect, for people to add their data. Firstly, an input box for users to add their name.

The above code would give us the following results;

Name:

It is always wise to give all your form elements names that are relevant so you don't get muddled up when using forms on a larger scale. Now the code above would give us an input box called name that is size 20.

Next, for an input box for users to enter their email addresses, we can use the same code as before. After that, lets add a big textarea so users can write in comments.

Now this would give us a textarea, 7 rows (top - bottom) and 50 cols (left to right) which looks like this.

Comments:

OK, now we have input boxes and a comment textarea, how about a set of radio buttons?

Now you will notice we have type="radio" which tells the browser we want radio buttons, the name is again meaningful but this time we have a new attribute value. Value simple means what value that particular radio button has, each must be different otherwise you will end up with incorrect feedback. This code gives the following results;

Rate This Out of 5

5 -
4 -
3 -
2 -
1 -

And now we have a set of radio buttons, now how about an select group box with a drop down menu

Where are you from?

United Kingdom America France Germany Australia

This is easier to make than you might think, here is the code;

Now to finish we will need a reset and submit button, then we can close our form and finish up for the day.

Here are our two buttons, reset and submit should be the only two buttons you will need but it's not hard to make others, here's how to make these.

And now there's nothing left but to close our form with the </form> tag, easy! Now how about putting all of this together.

And all this would give us a nice form like so.

If you enter some data into any of the boxes and then press the RESET button you will notice that all currently entered data gets removed and all the boxes are emptied, the SUBMIT button won't do anything for the moment because it hasn't got any purpose (until you give it one using a server side language).