Rony's

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.

Bookmark: