This is the continuation of my previous post Basic HTML – Part 1. On this phase of the post, I’m going to explain the table and form tags.

Table:

Table is a very important tag and widely used for alignment management of web pages. It is defined by the <table> tag. Some hierarchy are needed to be maintained for tables. First the table, then row, then column and finally content of the column.

Example:

<table style="border:1px solid #CCCCCC;">
<tr>
<td>Something Useful</td>
</tr>
</table>

This will produce something like:

There are some other optional tags inside a table. Such as, <thead>, <tfoot> and <tbody>. <thead> is used to define the header of a table and <tfoot> for the footer. <tbody> defines the body of the table. If you want to use these tags, follow this hierarchy:

<table border="1">
<thead>
<tr>
<th>Header One</th>
<th>Another Header</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Foot One</td>
<td>Foot Two</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Row One and Column One</td>
<td>Row One and Column Two</td>
</tr>
<tr>
<td colspan="2">Row Two with Two Column Attached!</td>
</tr>
</tbody>

Which will produce something like this:

Some properties that can be attached with a table are: width, height, colspan (Span of a column. In the above code colspan=”2″ defines the column will be as wide as two column), margin, padding, border etc.

Form:

Form is one of the most important thing in HTML. You collect any kind of data from end user through form.

While creating a form, you have to provide a name and an unique id for it. Also have to mention the action and method. Optionally you can attach JavaScript function on submit. Keeping the action of a form blank will submit it to the same page. The enctype of a form defines how the submitted value is passed.

Submitted values of a form are handled by some other scripting language like PHP, ASP etc.

Elements of a form are:

• Text Box
  • A single line text input area.
• Text Area
  • Multi line text input area.
• Combo Box
  • Select from a drop down list.
• Check Box
  • Check/un-check value.
• Radio Button
  • Select a value from a group.
• File
  • A file upload area.
• Button
  • Submit/reset or do some action.
• Label
  • Label of a input field.

Some points need to be notified are:

• You can mention width for text box.
• You can mention width and height for text area.
• You can distinguish between label and value of combo box. These are needed to be provided under option tag which is a child tag of select tag (used for combo box).
• You can provide value to a check box.
• To create a group of radio buttons provide same name/id.
• You can provide on click JavaScript action to buttons.
• Any form field can have functions for on change, on focus etc. JavaScript events.

An example with above form elements:

<form name="form1" id="form1" action="" method="post" enctype="multipart/form-data">
<label for="input1">Text Box</label><input type="text" size="10" name="input1" id="input1" value="A Text Box" />
<label for="input2">Text Box</label><textarea rows="2" cols="8" name="input2" id="input2">A Text Area</textarea>
<label for="input3">Combo Box</label><select name="input3" id="input3">
<optgroup label="Option Group">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select>
<label for="input4">Check Box</label><input type="checkbox" name="input4" id="input4" value="1" />
<label for="input5">Radio Button</label><input type="radio" name="input5" id="input5" value="1" />Radio 1<input type="radio" name="input5" id="input5" value="2" />Radio 2
<label for="input5">File</label><input type="file" name="input5" id="input5" />
<input type="button" name="button" id="button" value="Simple Button" /><input type="reset" name="reset" id="reset" value="Reset Button" /><input type="submit" name="submit" id="submit" value="Submit Button" />
</form>

Above code will produce this:

You can provide on submit, on focus, on blur, on change etc. event handler using JavaScript or VB Script if you wish.

Going to finish this part here.

Take care.