Creating and Using Forms in HTML ( Part 2 )
Lessons Covered



The tutorial continues with other features that can be applied when using forms.


Radio Buttons

Radio buttons also provide the user with options to select from. The major difference between responses for radio buttons and responses for checkboxes is that radio buttons limit the input of the user to only one option. For the example below when you view the result you will note that you can only select option 1 or 2 or 3 or 4 but you cannot select two options at once.

Example:

<form>

How many vehicles do you presently own ?

<input  type="radio"  name="vehicle" value="1"> 1 </input> 

<input  type="radio" class="codeattribute"> name="vehicle" value="2"> 2 </input>

<input  type="radio" class="codeattribute"> name="vehicle" value="3"> 3 </input>

<input  type="radio" class="codeattribute"> name="vehicle" value="4"> 4 </input>

</form>

right arrow  Click to see result

Note: When creating radio buttons the value attribute must be included.


Drop Down Menu

The drop down menu as the name suggests is a menu displaying a set of options in a drop down list. The user of the form can only select a single value. Unlike the other form controls above, the drop down menu is specified by the <select> tag. This tag by itself is useless. At least one option must be specified. Each option in the menu is listed by the <option> tag.

In this example a list of faculties for a university is provided to the user: 

<form>

Select your university faculty:

<select name="Field">

	<option value="Computing">  Faculty of Engieering and Computing    </option>
	<option value="Business">   Faculty of Business and Management     </option>
	<option value="Built">      Faculty of the the Built Environment   </option>
	<option value="Science">    Faculty of Health and Applied Science  </option>
	<option value="Law">        Faculty of Law 	                    </option>

</select>

</form>

right arrow  Click to see result


Text Area

The text area provides a means of writing multiple lines of text. For example, a comment box on a wbesite which allow you to comment on a particular topic or leave feedback. Text areas are unlimited (i.e. you can type as much characters as you wish !).

A text area for comments on a web page: 

<form>

Comments:

<textarea rows="5" cols="30"> Write Your Comments Here!  </textarea>

</form>

right arrow  Click to see result

The rows and cols attribute specify the amount of rows and columns that the user of the form is able to see. These can be used to control the size of your textarea.


Submit and Reset Buttons

Submit buttons are used to send the contents of a form to a server. The action attribute specifies where this content should be sent. This attribute can usually be found in the opening form tag.

Reset buttons clear the form and sets all values back to their default state.

Producing a submit and reset button:

 <form action=" ">

 <input type="submit" value="Submit"/>

 <input type="reset" value="Clear"/>

</form>

right arrow  Click to see result

Note: Without specifying a value for the action attribute the contents of your form will not be sent even though it may appear to have been when the submit button is clicked.


The Combination

Now for the final test. You have learnt all about forms in this lesson. By now you should have grasped the concepts. How about we combine everything and produce the final form ?

If you were following this tutorial and did all the examples above, this is what combining everything together should look like:

right arrow  Click to see result

Now you have mastered forms ! One of the easiest topics and one that is quite fun ! On that note the HTML tutorials have finally ended. When you are ready you may begin the CSS tutorials.


    Previous Lesson Previous Lesson - Forms ( Part 1 )                                         Back To Home Next Lesson