Tuesday 28 January 2014

Html coding lesson #4

The first part of this lesson I'm going to show you how to put a border around a set of information or a form to fill out, I've already show you how to make the text boxes in prior lessons so ill just show you how to make a border around it. All you need to do is put a tag saying <fieldset> After the form action part and the a </fieldset> tag after you have entered the text boxes you want to show and before the ending <form> tag heres an example of the border.
<form action=""><fieldset><legend>Personal information:</legend>Name: <input type="text" size="30"><br>E-mail: <input type="text" size="30"><br>Date of birth: <input type="text" size="10"></fieldset></form>

And in html heres what the border would look like
Personal information: Name:
E-mail:
Date of birth:
As you can see it cleans up the form and makes it look more mature.

Now i am going to show you how to make a drop down list, the first thing you need to know is it starts with the exact same <form action=""> tag and then it is followed by a <select name="items">
Except the items part can be change to whatever you drop down list is about. The just add
<option value="typeofitem>typeofitem</option> you keep doing see for different options in the drop down list,  except change the typeofitem to the actual item in the list. Now once you added all your options end it with a </select> then under that a </form> and then you are done. Heres an example of a drop down list i made on cars to show you quickly and under it will be what it looks like in html:

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>



Now ill show you how to make checkboxes, these are very simple you just need to type the following except change the bike and car part to whatever you want the checkboxes to be:

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 

I have a bike
I have a car

Then under this you can put a submit button, but the only problem is e result needs to be sent somewhere well you just need to type the following except change html_form_action.asp part to the name of the page you want it sent to.

<form name="input" action="html_form_action.asp" method="get">

Thankyou for checking out this lesson he next lesson will be posted in a few days