|
HTML DIV/FORM Tag Tutorial
|
Last Revised: 12/12/2003
|
Quick Study
|
Chapter Four for Basic HTML
On this chapter, I will show you on how to use the <Div> </Div> tag pair using the ALIGN element. Where in, it allows you to indent your Text to LEFT, CENTER and RIGHT. Other commands that you can use for Align are : Justify, Top, Bottom, etc.
<DIV> can be viewable in Netscape 2, to 7, Internet Explorer, 3 to 6, Opera 3 & 6, WebTV, etc. We can use a lot of attributes for us to divide a website into a style sheets. The Class, DIR, ID, Lang, Onclick, Ondblick, Onkeydown,Onmousemove, onmouseout, onmouseover, onmouseup,style,etc. Are parts of the DIV element for buiding homepage with style. Combination of Style Sheet command will help customize a web page, that will create tables in a floating positon using a single attribute, "position:absolute." This feature allows you to tell the browser that this command is an attribute that needs to be position in an embedded form. You can use this attribute for Images and Text.
<DIV> defines logical divisions in your web page. It creates a meaningful content of a document using a combination of tables and CSS within the DIV tag.
Most commonly use tag in <Div> is the Align, that use plainly attributes: Center Left, Right, Justify, Bottom, Margin-left, Margin-right, etc. But most often these are the
attributes use in <DIV> are the Class,
ID ,
Title,
Style,
Lang,
Dir, and
Align.
We can also use the
ALIGN element on the < P > tag. The command for the use of ALIGN on
< P > is < P align >. On the < P Align=" " > you can either use the "Left", "Center" and "Right".
For example: < P align="center" > This will allow to center the message
In this example, the attribute's name is ALIGN and its associated values are center, left, or right.
A simple code using the <Div> tag is like this:
<Div align="center">
Your message here
</Div>
This command tag is very useful if you are using a Cascading Style Sheet (CSS)is a Web page derived from multiple sources with a defined order of precedence where the definitions of any style element conflict. You can use the CSS command on <Div> using ID and Class.
A very good example for the use of CSS on <Div> Tag is :
<Style type="Text/CSS">
< !-- (This is a comment tag)
#Sample{font-Family: Courier New;
color:#0000FF;
size: 2}
-->
</Style>
< Body>
<Div ID="Sample">
Your message here
</Div>
Using FORM tag
FORM Tag is another HTML code that you can
use while building your own HTML code to put extras on your HOMEPAGE. There are varieties of tag that you can use on a < FORM > tag with the use of the < INPUT >.Forms provide several different ways for your visitor to enter information. These are text-input boxes, text areas, check boxes, radio buttons, and pull down selection menus.
These are as follow.
- type="text/hidden/checkbox/radio/image/reset/submit"
- name="the_name"
- value="your_value"
For example of a < Form > and < Input > tag:
<FORM >
<input name="Sample text" size="30" type="text"
value="Type your own message here">
</Form >
This is an example of Text inputs in a single line for your visitor to enter the information. The Source Code given on the example:
We can also add a Form Button where in you can submit your
query once you type a message on the Text field. You can use either, Button, Submit, reset, an image
if you wanted to change the button with your own graphics.
An example for a Form Button :
Another example is:
You can add this HTML in a FORM tag if you wanted to reset the information you have written on the Text inputs
that allows you to erase the existing data listed. You can use the <Input Type="reset">
Another FORM example is to create an option that a user can check on a box or radio button tpo select an Item.
| RESULT |
HTML Coding |
|---|
|
|
<Form Method="Post">
<Input Type="checkbox" Name="items" Value="Item I">Item I
<Input Type="checkbox" Name="items" Value="Item II">Item II
<Input Type="checkbox" Name="items" Value="Item III">Item III
<Input Type="checkbox" Name="items" Value="Item IV">Item IV
<Input Type="checkbox" Name="items" Value="Item V">Item V
<Input Type="RESET">
</Form> |
| Note: If you want to change the checkbox to radio button. Simply change the value in Input type="Radio". |
If you want to change the options you selected on the Items, you can add a RESET button where you can click on to reset everything. You can add this elemt "Input Type="Reset"
| RESULT |
HTML Coding |
|---|
|
|
<Form Method="Post">
<Input Type="checkbox" Name="items" Value="Item I">Item I
<Input Type="checkbox" Name="items" Value="Item II">Item II
<Input Type="checkbox" Name="items" Value="Item III">Item III
<Input Type="checkbox" Name="items" Value="Item IV">Item IV
<Input Type="checkbox" Name="items" Value="Item V">Item V
<Input Type="RESET">
</Form> |
Another way of using FORM tag is to let a user select an option in a pull down menu. This create a single field that you can click on a the pull down button to choose an item.
| Result |
HTML Coding |
|---|
|
|
<Select Name="choice">
<Option Value="Select">Select
<Option Value="Item I [Computer]">Item I [Computer]
<Option Value="Item II [Laptop]">Item II [Laptop]
<Option Value="Item III [Printer]">Item III [Printer]
</Select>
<Input Type="Submit" Value="Submit">
<Input Type="Reset" Value="Reset">
|
INPUT tag is an element that specify an input within the FORM tag
[Go Back] [ HOME ][ Keyboard Shortcut ]