Guideinfoyou: Html Form Select Tag list

Selected list is a kind of form that we can use in our Html, it is common use for our content if we don't like to expand our content using listing our product, or we using this selected list in the costing amount for our product sales list.

Try to check the previous tutorial about Form in Html:

Html Form
Html Form Text Area

We are going to discuss about Select tag in our html and what is Select means in our dictionary?

Select Means:

1. Singled out in preference; chosen: a select few.
2. Of special quality or value; choice: select peaches.
3. Careful or refined in making selections; discriminating.

So we have now an Idea what is select or selecting in our html tag.

If we use the Select tag our attribute tag <SELECT> and closing </SELECT> and every list we make we need to put an option value by putting option tag, Option tag starting <OPTION> and closing </OPTION>.

Let us check our code below.

<SELECT> </SELECT> = Our Select tag
<OPTION> </OPTION> = Our option tag that we need to put a value name.

So here's our Sample:

========================================================================
First Sample:

Not having an Option tag:

<SELECT>
OUR PRODUCT
</SELECT>

In our browser looks like this.

========================================================================

Second Sample:

For Adjusting the width and height ( SELECT TAG)

FOR WIDTH:

<SELECT STYLE= "WIDTH:200PX">
OUR PRODUCT
</SELECT>

In our browser looks like this.

FOR HEIGHT:

<SELECT STYLE= "HEIGHT:40PX">
OUR PRODUCT
</SELECT>

In our browser looks like this.

COMBINE WIDTH AND HEIGHT

<SELECT STYLE= "WIDTH:200PX;HEIGHT:40PX">
OUR PRODUCT
</SELECT>

In our browser looks like this.

========================================================================

If you notice our text OUR PRODUCT doesn't recognize yet because we did not use the name for our Select Tags

For using having a name for our Select Tag attribute:

<SELECT NAME="OUR PRODUCT">
</SELECT>

========================================================================

Third Sample:

Now we are going to put a select list by using OPTION value in our SELECT tag.

SINGLE LIST:

<SELECT NAME="OUR PRODUCT" STYLE= "WIDTH:200PX;HEIGHT:40PX">
<OPTION VALUE=" PRODUCT"> WATER</OPTION>
</SELECT>

In our browser if we check.

MULTIPLE LIST

<SELECT NAME="OUR PRODUCT" STYLE= "WIDTH:200PX;HEIGHT:40PX">
<OPTION VALUE=" PRODUCT"> WATER</OPTION>
<OPTION VALUE=" PRODUCT"> TEA</OPTION>
.<OPTION VALUE=" PRODUCT"> COFFEE</OPTION>
</SELECT>

In our browser looks like:

========================================================================

By position we can use, Top, Left,right and bottom.

Sample:

( STYLE = POSITION:ABSOLUTE;LEFT:NUMBER)

<SELECT NAME="OUR PRODUCT" STYLE= "POSITION:ABSOLUTE;LEFT:150PX;WIDTH:200PX;HEIGHT:40PX">
<OPTION VALUE=" PRODUCT"> WATER</OPTION>
<OPTION VALUE=" PRODUCT"> TEA</OPTION>
.<OPTION VALUE=" PRODUCT"> COFFEE</OPTION>
</SELECT>

In our browser looks like this.

========================================================================

Now we are done, try it now and make your own listing list using selecting tag in our html.
Good luck -_-

Next to Html Images Using Opacity Javascript

Return to:

Html Tutorial Introduction

Html Structure And Method

Basic Tags and Formatting

Adding links in Html Hyperlinks

Html Instruction Formatting Text

Html Working With Fonts

Html Creating Lists

Html Adding Images To Our Pages Or Website

Html Creating Image Maps
HTML Table Border

HTML Marquee Tag Direction
HTML Marquee Image Attribute