Learn HTML Onlinetutorials for beginners

This tutorial will introduce you to the form elements in HTML.  If you have ever purchased something online or performed a search with a search engine such as Google, you have experienced a form in action.  A form allows us to accept input from a user.  We then return output based on what the user entered.

For instance, let’s say you purchase something online.  After you click the button to make the purchase, the next page might be a thank you page with a receipt for your purchase.  This is what is referred to as output.  In the case of a search engine; let’s say you search for used computers.  When you click the “search” button, a list of websites about used computers will be displayed.  This is output.

In this example, we will become familiar with some of the most common elements used in forms.

Let’s open up notepad.   Copy & paste or type the following:

Save this file as forms.htm

Understanding The Code

Before we go any further, all of the elements must be enclosed in a <form> tag in order to work.  We will learn more about the <form> tag in the next tutorial.

Another thing, for now don’t worry about the name attribute.  That will be covered in the next tutorial.

This line of code will display a text field.

This line of code will display a radio button.  The text “over 21″ is just regular text.  You can put anything you want here.  When the user clicks this particular button, its value becomes “yes”.  Take notice on how the other radio button is a part of this group.  They both have the same attribute name, “age”.  Only one button from the group can be checked.

This line of code will display a check box.  Check boxes are somewhat similar to the radio button.  The difference is that you can check more than one box in the group, as opposed to radio buttons were you can only select one button from the group.

This code will display a drop down menu.  This drop down menu opens with the <select> tag.  The options that the user sees are within the <option> tags.  If the user selects “Miami”, its value becomes “miami”.

This line of  code will display a textarea.  This is almost like a text field except you can change the size of the textarea.  In this example, our textarea has a rows value of 10 and a columns value of 20.  You do not need the text “Type notes in here…”.  You can simply delete that text and you will have a blank textarea.

This line of code displays a regular button.  The value is what is displayed on the button.  You can change it to whatever you like such as “click here”.  I am referring to this button as a “regular button” because it requires a scripting language like javascript to work.  We will learn more about this in the future.

This is just like a text field.  The difference is when you type into this field, bullets are displayed when you type instead of the actual text.  This is ideal for when you have a log-in form or something of that nature.

Finally our submit button.  Its value of “GO!” is what is displayed.  This button will simply submit all of the form’s input data.

Final Word

In this tutorial, we became familiar with most of the form elements.  There are a few more that we did not discuss.  If you are wondering why we didn’t discuss the purpose of the name attribute, don’t worry.  In the next tutorial we are going to discuss the significance of the name attribute.  Better yet, we are going to see our form in action!