19 Practical Steps To Creating A Web Forms With HTML - With Code Example.

19 Practical Steps To Creating A Web Forms With HTML - With Code Example.
Did you miss the article i wrote on forms? if yes please click here to get familiar with forms and if no continue with the class:

Digital Photo, a chain of photo printing shops, has decided to add a simple survey to the company Web site to investigate the Internet usage of its customers. You have been asked to create a Web form as shown below.


 19 Practical Steps To Creating A Form Like Above:

To complete this task do the following steps:
  • Use your text editor to create a new file. Save your file as formproject.html. You will create this file yourself. No data files are needed.
  • Add the basic tags required for a Web page. The title of the page should be form project. Also add an HTML comment in the <head> section that identifies you as the author of the page.
  • After the <body> tag, create a level 2 heading as shown. Below the heading, enter the description of the purpose of the form in a paragraph.
  • Begin your form. The form name should be survey. Specify the mailto action with your e-mail, the method attribute with the post value.
  • As you code your form, keep in mind that it is good practice to specify a name and an id for some input types to ensure compatibility across browsers. Also keep in mind that you may want to use <br /> tags and other formatting tags to improve the layout and readability of your form.
  • You will use a table to lay out the form on the page. Create a table that is eight rows by two columns. Give the table cellpadding of 15 and cellspacing of 5. Set the width of the entire table to 65% of the browser window.
  • In the first row of the table, create a selection list to allow the user to choose their type of Internet connection. Place the label in the left column and the list in the right column. Specify that the list size so that it shows all choices at once and the High-Speed Cable choice is the default.
  • In the second row of the table, create option buttons to allow the user to specify the type of computer used at home. Place the label in the left column and the options in the right column.
  • In the third row of the table, create option buttons to allow the user to choose the main reason for using the Internet. Place the label in the left column and the options in the right column.
  • In the fourth row create a fieldset of check boxes and a fieldset of radio buttons. In the left column, use check boxes to allow the user to choose the types of sites visited most. In the right column, use radio buttons to allow the user to choose a time range that best reflects the average weekly time spent on the Internet. Put a descriptive legend on each fieldset.
  • In the fifth row, create a textarea box that spans both columns. This area will allow users to comment on the issues of Internet privacy and safety. Set the dimensions of the text area to 5 rows and 100 columns.
  • In the sixth row, create text boxes for First Name and Last Name, placing one text box in each column as shown. Set the size of each to 50.
  • In the seventh row, create text boxes for Age (size 5) and Zip Code (size 10), placing one text box in each column as shown.
  • In the eighth row create a submit button in the left column and a reset button in the right column. Enter the text of each button as shown.

Save the file.

  • View the formproject.html with your browser. Compare it with the sample page as shown above.

Make corrections as necessary and save your file.

  • You may also want to test your form by completing and submitting it. This should send your data file to you in an email message. You should then be able to open the submitted data in your text editor to view the format of the form output. Note: This will only work if your computer is set up with an email client.

Print a copy from the text editor and from the browser. for offline use.

Code That Will Give You The Best Result For Above Steps And The Picture.

Copy this code to your text editor notepad, notepad++, Bracket etc.

<!DOCTYPE html>
<title> Tutorial Project 6 D16CSC1060</title>
<p><style="color:red" align="center"h6> Yakubu Binuyaminu Adeiza <br> <font color="red">Reg No:</font> D16CSC1060</h6></p></center>
<form name = "survey">

<h2><b> Internet Usage Survey</b></h2>
This survey is being conducted to help identify the internet usage patterns of our customers.</br>
Please take a few moments to complete and submit this short form. Thank you for your cooperation.

<p><table cellpadding = "15" cellspacing = "5" width=65% rules="none" >

What type of internet connection do you have? </br> (Select One)</td>
<select name="int" id ="int" size ="4">
<option> Dail-up
<option> DSL
<option> High Speed Cable
<option> Other

<td>What type of computer do you use most at home?</td>
<td> <input type ="radio" name ="comp" id= "dsk" value="dsk" checked
<label for ="dsk"> Desktop </label>

<input type ="radio" name ="comp" id= "lapt" value="lapt"
<label for ="lapt"> Laptop </label> </td>


<td>How would you describe your main reason for using the</br>internet?</td>

<td> <input type ="radio" name ="rsn" id= "wrk" value="wrk"
<label for ="wrk"> To do work related activities </label><br>

<input type ="radio" name ="rsn" id= "sch" value="sch"
<label for ="sch"> To do school-related activities </label><br>

<input type ="radio" name ="rsn" id= "ent" value="ent"
<label for ="ent"> For entertainment purposes </label><br>

<input type ="radio" name ="rsn" id= "oth" value="oth"
<label for ="oth"> Other activities </label> </td>

<td> <fieldset>
<legend align ="left"> Types of sites visited</legend>
 <p>What types of web sites do you access most often?<br>Check all that apply. </p>
<input type ="checkbox" name ="sites" id= "slf" value="slf"
<label for ="slf"> Self Improvement</label><br>

<input type ="checkbox" name ="sites" id= "entt" value="entt"
<label for ="entt"> Entertainment</label><br>

<input type ="checkbox" name ="sites" id= "nws" value="nws"
<label for ="nws"> News and Sports</label><br>

<input type ="checkbox" name ="sites" id= "ref" value="ref"
<label for ="ref"> Reference</label><br> 

<input type ="checkbox" name ="sites" id= "eml" value="eml"
<label for ="eml"> Email</label><br>

</fieldset> </td>

<td> <fieldset>
<legend align ="left"> Time spent using internet</legend>

<p> During an average week, how long do you spend<br>online?</p>
<input type ="radio" name ="time" id= "3" value="3"
<label for ="3"> 0-3 Hours </label><br>

<input type ="radio" name ="time" id= "6" value="6"
<label for ="6"> 4-6 Hours </label><br>

<input type ="radio" name ="time" id= "10" value="10"
<label for ="10"> 7-10 Hours </label><br>

<input type ="radio" name ="time" id= "11" value="11"
<label for ="11"> 11-14 Hours </label><br>

<input type ="radio" name ="time" id= "15" value="15"
<label for ="15"> 15+ Hours </label><br>

 </fieldset> </td>

<td colspan="2"> Please comment on your options concerning internet privacy and safety.<br>

<textarea name="comment" id="comm" rows="5" cols="100"> </textarea>


First Name:<br>
<input type="text" name="fname" id="fname" size= "50">

Last Name:<br>
<input type="text" name="lname" id="lname" size= "50">

<input type="text" name="age" id="age" size= "5">

Zip Code:
<input type="text" name="age" id="age" size= "10">

<td align="right">
<input type ="submit" value="Click to Submit">

<input type ="reset" value="Clear Form">

Read More

Introductions To Form In HTML

Introductions To Form In HTML <form></form>

HTML Form Control Elements

Control elements that are commonly used:

  • Text boxes for text and numerical entries
  • Selection lists for long lists of options, usually appearing in a drop-down list box
  • Radio buttons, also called option buttons, to select a single option from a predefined list
  • Check boxes to specify an item as either present or absent
  • Groups boxes to organize form elements
  • Text areas for extended entries that can include several lines of text
  • Buttons that can be clicked to start processing the form
  • Each control element in which the user can enter information is called a field.
  • Information entered into a field is called the field value, or simply the value.
  • In some fields, users are free to enter anything they choose.
  • Other fields, such as selection lists, limit the user to a predefined list of options.

The <form> Tag

The <form> tag identifies the beginning and end of a form. A single page can include several different forms, but you cannot nest one form inside another.
The general syntax of the <form> tag is:
<form attributes>
    form elements and layout tags
Between the <form> and </form> tags, place the various tags for each of the fields in the form.
Use standard HTML tags to specify the form’s appearance.

A single Web page can contain multiple forms, the <form> tag includes the name attribute.
The name attribute identifies each form on the page.
The name attribute is also needed for programs that retrieve values from the form.

Input Types 

The picture below shows other supported HTML input types. 


Working with Text Boxes

  • Text boxes are created using the <input> tag.
  • The general syntax is:
<input type=“type” name=“name” id=“id”>
  • Type specifies the type of input field name and id attributes identifies the input field for the CGI script
  • To create a text box, you would enter the tag:
<input type=“text”>
  • If the type attribute is not included, the Web browser assumes, by default, that you want to create a text box.

The name and id Attribute

  • The name and id attributes of the <input> tag identifies the input field for the CGI script.
  • The name attribute represents the older standard, but it is deprecated in HTML 4.01, however, some CGI scripts still recognize only the name attribute
  • The newest standard uses the id attribute.
  • The id attribute is required, if a form contains form labels.
  • It is best to duplicate the information by using both the name and id attributes.

How To Create a Text Box

  • To create a text box, use the following HTML code:
<input name=“name” id=“id” value=“value” size=“value” maxlength=“value”>
  • Name and id attributes identify the field
  • Value attribute assigns a default value to the text box
  • Size attribute defines the width of the text box in number of characters
  • Maxlength attribute defines the maximum number of characters allowed in the field

How to Create a Password Field

  • A password field is a text box in which the characters typed by the user are displayed as bullets or asterisks i.e. ****.
  • The syntax for creating a Password field is:
<input type=“password”>
  • Using a password field should not be confused with having a secure connection.
  • The password itself is not encrypted.
  • The password field only acts as a mask for a field entry as it is entered.
My Next Topic On Form Will Be Working with Form Labels Please Stay Tunned.

Click Here To See 19 Steps To Creating A Web Form With HTML With Source Codes.
Read More

Introduction To Tables In HTML. - Tutorial 1.

Introduction To Tables In HTML. - Tutorial 1.
Tutorial Objectives
Create a text table
Create a table using the <table>, <tr>, and <td> tags
Create table headers and captions
Control the appearance of a table and table text
Create table cells that span several rows or columns
Use nested tables to enhance page design
Learn about Internet Explorer extensions for use with tables

A table can be displayed on a Web page either in a text or graphical format.
A text table:
contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing characters:

A graphical table:
is displayed using graphical elements
can include design elements such as background colors, and colored borders with shading
allows you to control the size of tables cells, rows, columns and alignment of text within the table.
Comparisons for Text and Graphical Tables.
Graphical tables are more flexible and attractive, however there are some situations when a text table is needed.
the text-based Lynx browser used on many UNIX systems, can display only text characters
Working with tags for graphical tables can be complicated and time-consuming.
for these reasons, you might want to create two versions of a Web page: one that uses only text elements, and another that uses graphical elements

Using the <pre> Tag
The <pre> tag creates preformatted text and retains any spaces or line breaks indicated in the HTML file.
preformatted text is text formatted in ways that HTML would otherwise not recognize.
The <pre> tag displays text using a fixed-width font.
By using the <pre> tag, a text table can be displayed by all browsers, and the columns will retain their alignment no matter what font the browser is using.
Most of the time, the <table> tag will be used to insert tables into a Web page.

Defining a Table Structure

The first step to creating a table is to specify the table structure:
the number of rows and columns
the location of column headings
the placement of a table caption
Once the table structure is in place, you can start entering data into the table.

Using the <table>, <tr>, and <td> Tags

Graphical tables are enclosed within a two-sided <table> tag that identifies the start and ending of the table structure.
Each row of the table is indicated using a two-sided <tr> (for table row).
Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells.
The general syntax of a graphical table is:
  <td> First Cell </td>
  <td> Second Cell </td>
  <td> Third Cell </td>
  <td> Fourth Cell </td>
This creates a table with two rows and two columns.
Columns within a Table

HTML does not provide a tag for table columns.
In the original HTML specifications, the number of columns is determined by how many cells are inserted within each row.
for example, if you have four <td> tags in each table row, that table has four columns
Later versions of HTML provide increased support for controlling the appearance of table columns.

Next Tutoriaal- Creating Headings with the <th> Tag.
Read More

How To Create A CV Using HTML Tags. (With Source Code).

How To Create A CV Using HTML Tags. (With Source Code).
How To Create A CV Using HTML Tags

One of my readers sent me an email that she was asked to create a simple CURRICULUM VITAE and that she wants me to help her, well at first i must tell you that creating a CV is not as hard as some people think it is, which is why i will not type a full tutorial here but will like to teach you how to do it practically.

First of all you need to understand some Basic HTML tags that will help you in creating any project with HTML i have analyzed and also provide you with video courses on this topic see links below to the previous posts on this topics:

Secondly open your word editor be it NotePad, NotePad++, Bracket,  WordPad etc. and after the tutorial remember to save your work with the extension .html example (mycv.html)

Copy This Code Below;

<!--Cv Code Starts Here-->

<!DOCTYPE html>
<title>D16CSC1060 CURRICULUM VITAE</title>
navi {
<h1 align="center" style="color:green">CURRICULUM VITAE<b></b><hr></h1>
<h4 align="center"> MY DOCCUMMENTS </h4>
 <img src="ctoon.jpg" name="iframe_a" width="350" height="300" style="border:none"></img>
<p><a href="Ducuments.folder" target="iframe_a">Click Here To View All My DOCCUMMENTS</a></p> 
<p><h4 align="center">YAKUBU, BINUYAMINU ADEIZA   <br><b>Email:</b> <a href="http://binoosmart@gmail.com">binoosmart@gmail.com </a><br> website: <a href="http://icict.blogspot.com"> ICICT BLOG </a></p>
<p align="center">GSM: +2348168374589</p></h4> 
REG NO:D16CSC1060<br>
COURSE TITLE: Web Application Engineering</p></b>
To take a responsibilities with determination and to succeed while maintaining overall cooperate image, mission and vision.<br>
<li>Date of Birth:6TH OCTOBER 1994<br>
<li>Marital Status:Single<br>
<li>Home Town: INOZIOMI
<li>LGA: Adavi
<li>State of Origin: Kogi
<li>Nationality: Nigeria<br>
<li> OJO-UGBOLE HIGH SCHOOL IGBOLE EKITI:                    2010 - 2012</li>
<li> AHMADU BELLO UNIVERSITY ZARIA:                          2017 - 2019</li>

<li>Primary School Leaving Certificate 2009<br>
<li>Junior secondary School Leaving Certificate 2011<br>
<li>Senior secondary School Leaving Certificate 2014<br>

<li> ENGLISH </li>
<li> EBIRA </li>
<!--Cv Code Ends Here--> 
you can make adjustments by replacing some of my details with yours i hope it helps
Read More

Do While…Loop Repetition Statement In Microsft Visual Basic Tutorial 5.

Do While…Loop Repetition Statement In Microsft Visual Basic Tutorial 5.
  • Gain experience with Do While…Loop and Do…Loop While and Select…Case control structures
  • Gain experience with Exit Do and Continue Do statements.

Do While…Loop Repetition Statement
Do While…loops are set up with a condition and run while that condition is true. There must be a line of code inside the loop that can change that condition. The general form for a Do While…Loop looks like this:
Do While <<condition>>

Task 1: a program that receives an integer from user and generates the times table for that integer.

How to Program a Multiplication Table

Module MultiplicationTable
Sub Main()
Dim num As Integer
Dim contVar As Integer = 1
Console.WriteLine("Please enter an integer")
num = Console.ReadLine()
Do While (contVar <= 12)
Console.WriteLine(contVar & " * " & num & " = " & contVar * num)
contVar = contVar + 1
End Sub
End Module

Do…Loop While Repetition Statement
Do…Loop While is a variation on the Do While…Loop. Instead of putting the condition in the Do line, the While condition is placed in the Loop line. The general form for a Do…Loop While looks like this:
Loop While <<condition>>
Task 2: Write a program that keeps track of the number of odd and even numbers supplied by a user. The program should stop when the user enter the number 0 and display all the even numbers and the number of even numbers supplied as well as that of the odd numbers.
Module CountOddAndEven

Sub Main()
Dim number As Integer
Dim countEven As Integer = 0
Dim countOdd As Integer = 0
Dim strOdd, strEven As String
strOdd = "These are the Odd numbers entered "
strEven = "These are the Even numbers entered "
Console.WriteLine("Please enter a number or zero to Qiut")
number = Console.ReadLine()
If number <> 0 Then
Select Case (number Mod 2)
Case 0
countEven = countEven + 1
strEven = strEven & number & vbTab
Case 1
strOdd = strOdd & number & vbTab
countOdd = countOdd + 1
End Select
End If
Loop While number <> 0
'write the below code as it is. do not change anything
Console.WriteLine(vbCrLf & strEven & vbCrLf & vbCrLf & _
"Number of even numbers supplied " & countEven)
'write the below code as it is. do not change anything
Console.WriteLine(vbCrLf & strOdd & vbCrLf & vbCrLf & _
"Number of odd numbers supplied " & countOdd)

End Sub

End Module


Select…Case Selection Statement
Select...Case are controlled by an expression which should evaluate to number or string. It selects the first Case that matches and ignores all the rest. There is an optional Case Else at the end that only works when none of the Case statements match.
Task 3: write a program that output the grade when a score is supplied by a user.

Exit Do and Continue Do
Sometimes a loop doesn’t need to be completed. To get out of a loop early, use Exit Do statement. Exit Do is used to short circuit Do While…Loops
There are also some situations where statements within a loop need to be skipped while control moves to the next iteration without ending the loop. To achieve that, use the Continue Do statement. It is used to ignore any statement that comes after it as the loop continues.
Task 4: write a program that counts numbers from 1 to 100. The program should exit when it come across the number 30.
Module UsingExit

Sub Main()
Dim number As Integer = 1
Select Case (number)
Case 30
Exit Do
End Select
Console.Write(number & vbTab)
number = number + 1
Loop While (number <= 100)
End Sub

End Module
Task 5: Rewrite the above program using Do While … Loop and If statement
Task 6: Write a program that counts numbers from 1 to 100. The program should skip all multiples of 5
Module UsingContinue

Sub Main()
Dim contVar As Integer = 0
Do While (contVar <= 100)
contVar = contVar + 1
If ((contVar Mod 5 = 0) Or contVar > 100) Then
Continue Do
End If
Console.Write(contVar & vbTab)

End Sub

End Module

Task 7: Rewrite the above program using Do … Loop While and Select Case

Read More

Control Structures In Microsoft Visual Studio - Programming Tutorial 4.

Control Structures In Microsoft Visual Studio - Programming Tutorial 4.
 Welcome to introduction to programming Tutorial 3.
  • Understand what control structures are
  • Gain Experience with If…Then and If…Then…Else and While control structures
  • Gain Experience with compound assignment operators.
Note: all class work and exercises should be saved under Lab04 solution

Control Structures
Normally, statements in a program are executed one after another in the order in which they are written. This is called sequential execution. Control Statements are used to alter the flow of program's execution. Visual Basic supports eleven (11) control statements: sequential statements, selection statements (3 types) and repetition statements (7 types).

Selection Statements
1 If…Then
2 If…Then…Else
3 Select…Case
Repetition Statements
1 While
2 Do While…Loop
3 Do…Loop While
4 Do Until…Loop
5 Do…Loop Until
6 For…Next
7 For Each…Next

If…Then Selection Statement
The If...Then selection statement performs an indicated action only when the condition is True; otherwise the action is skipped. The general structure is:
If <<condition>> then
End If
If the condition is true the program will execute the statements within If…Then and End If control structure
Task 1
Write a program that inputs an integer number from a user and then output whether it is an even number or odd number. (See output below)


If…Then…else Selection Statement
The If...Then...Else selection statement allows the programmer to specify that different action to be performed when the condition is True and when the condition is False. The general structure is:
If <<condition>> then
End If

Task 3
Rewrite Task 1 and Task 2 using If…Then…Else statements.

Compound Assignment Operators
Visual Basic provides several compound assignment operators for abbreviating assignment statements. For example:
score = score + 3
can be abbreviated as
score += 3
Summary of compound assignment operators
Compound Assignment Operator
+= grade += 3 grade = grade + 3
-= grade -= 3 grade = grade - 3
*= grade *= 3 grade = grade * 3
/= grade /= 3 grade = grade / 3
\= grade \= 3 grade = grade \ 3
^= grade ^= 3 grade = grade ^ 3
&= coursename &=” to vb” coursename = coursename & “ to vb”

While Repetition Statement
The while repetition statement allows the programmer to specify that some action be performed several times as long as a condition remains true. The general structure is:
While <<condition>>
End While

Write a program that outputs numbers from 1 to 500


thanks for reading below are the previous tutorial on this topic

Welcome to introduction to programming Tutorial 3.

Read More