How to design bio data form using html table

How to design bio data form using html table

This tutorial is about using html table to design and a simple bio-data form for the collection of personal information from users of website. Stay tune, as I will be guiding you on how to get this task accomplished. In creating a simple tabular form in html, the following steps are considered:

 

STEP ONE:  LAUNCH HTML EDITOR

  • Click on START menu
  • Click on All Programs
  • Click on WINDOWS ACCESSORIES folder
  • Click on NOTEPAD to launch

 

STEP TWO: SAVE THE DOCUMENT

  • Click on FILE
  • Click on SAVE AS (save as dialog box appears)
  • Choose LOCATION (Folder for Storage) [Save it in your desktop for easy access]
  • In the FILENAME box, type in your filename (e.g. form.html)
    • NOTE: Make sure you add .html extension to the filename, this tells the browser that the file is an HTML document, thus the browser displays it accordingly
  • In the SAVE AS TYPE box, choose ALL FILES
  • Click on SAVE button to complete the task of saving.

 

STEP THREE: TYPE YOUR CODE

Begin with the syntax  <!doctype html > and end with </html>. This mean that you are working with HTML 5. Check the snippet below for understanding.

NOTE: Every opened tag must be given a corresponding closing tag. Example: <input> text</input>

 

 

CODE EXPLAINED:

<table> This tells the browser that everything within this syntax is tabular. So, browser considers it as table.

The syntax <th align=”center” colspan=”2″ bgcolor=”blue”> is used to merge two or more columns (cells) together.

<th> </th>This simply mean table heading. This part holds the heading text of a given table

<tr> </tr>table row

<td> </td> table data (called cell in MS Excel)

Align: Is used to align cells and their content to direction of choice (e.g. left, right, center, etc)

<code><input> </code>Is used to collect data from site visitor or form user. (e.g. radio, text, password, e-mail, submit, etc.)

 

Below is the code. You can copy it and paste in your html editor. Edit and play around with it to have a different output.

 

CODE SNIPPET:

<code>

<!doctype html>

<html>

<head>

<title>Creating a Simple Form </title>

</head>

<body>

<form name=”biodata” method=”post”>

<table align=”center” cellspacing=”0″ cellpadding=”5″ bgcolor=”cornflowerblue”>

<!– Form-title –>

<tr>

<th align=”center” colspan=”2″ bgcolor=”blue”><h1><font color=”white”>Bio Data</font></h1></th>

</tr>

 

<!– Row-one –>

<tr>

<td align=”right”><strong>First Name:</strong></td>

<td><input type=”text”></td>

</tr>

 

<!– Row-two –>

<tr>

<td align=”right”><strong>Middle Name:</strong></td>

<td><input type=”text”></td>

</tr>

 

<!– Row-three –>

<tr>

<td align=”right”><strong>Last Name:</strong></td>

<td><input type=”text”></td>

</tr>

 

<!– Row-four –>

<tr>

<td align=”right”><strong>Date of Birth:</strong></td>

<td><input type=”date”></td>

</tr>

 

<!– Row-five –>

<tr>

<td align=”right”><strong>Age:</strong></td>

<td><input type=”text”></td>

</tr>

 

<!– Row-six –>

<tr>

<td align=”right”><strong>Mother’s Maiden Name:</strong></td>

<td><input type=”text”></td>

</tr>

 

<!– Row-seven –>

<tr>

<td align=”right”><strong>Job Title:</strong></td>

<td><input type=”text”></td>

</tr>

 

<!– Row-eight –>

<tr>

<td align=”right”><strong>Educational Qualification:</strong></td>

<td>

<select name=”qualification” type=”select-multiple”>

<option name=”Select Qualification”>Select Qualification</option>

<option name=”FSLC”>First School Leaving Certificate</option>

<option name=”SSCE”>Senior School Certificate Examination</option>

<option name=”OND”>Ordinary National Diploma</option>

<option name=”HND”>Higher National Diploma</option>

<option name=”B. Sc”>Bachelor of Science</option>

<option name=”Master’s”>Master’s Degree</option>

<option name=”PhD”>Doctor of Philosophy</option>

</select>

</td>

</tr>

 

<!– Row-nine –>

<tr>

<td align=”right”><strong>Work Experience:</strong></td>

<td><textarea name=”Work-experience” placeholder=”Input your work Experience Here”></textarea></td>

</tr>

 

<!– Row-ten –>

<tr>

<td align=”right”><strong>Skills/Interest:</strong></td>

<td><textarea name=”skills” placeholder=”Input your Skills and interest”></textarea></td>

</tr>

 

<!– Row-eleven –>

<tr>

<td align=”right”><strong>Referee:</strong></td>

<td><textarea name=”referee” placeholder=”Input your Referees”></textarea></td>

</tr>

 

<!– Row-twelve –>

<tr>

<td align=”right”><strong>Phone:</strong></td>

<td><input type=”phone”></input></td>

</tr>

 

<!– Row-thirteen –>

<tr>

<td align=”right”><strong>E-mail:</strong></td>

<td><input type=”e-mail”></input></td>

</tr>

 

<!– Row-fourteen  the last –>

<tr bgcolor=”blue”>

<td align=”center”></td>

<td><input type=”submit” value=”Submit”></td>

</tr>

 

</table>

</form>

</body>

</html>

</code>

Now, save it finally. Simply Press CTRL + S.

Next, go to your desktop and locate the saved file. If you have a browser in your system, it should be shown with the browser’s icon.

 

STEP FOUR: PREVIEW THE FILE IN A BROWSER

  • In your desktop environment, simply double click on the file icon of the save html file

OR

  • Right click on the file and in the options, click OPEN WITH and choose the browser to launch.

If you followed the steps carefully, your form’s output should be same as that in this tutorial’s illustration. Enjoy.

 

FINAL OUTPUT:

html form

Please follow and like us:

  • Share
Close Menu
Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.
WhatsApp chat