Creating a Simple HTML form

When we create a form tag in HTML, we usually use four properties with the form

id – This property represents a unique ID of the form tag. In a web document, we can have multiple forms, but each with a unique ID

name – The name property contains the name of the form. The id and name of a form should be same

method – The method property indicates what should be the method of sending form values to the server. This property can take two values, “get” and “post”. When the method property is set as get, then this means, the values of form elements will be sent to the server as key/value pairs. For example, if the form has two text fields for storing name and marks, then we will see the following written in URL when the form is submitted: target.html?txtname=osman&txtmarks=45 . To understand what is target.html, read next property.

action – The action property sets the target page where the form is sending data. If the action is left as blank, i.e., action=””, then the form is sending data to the same page where the form is defined, means the page will post data to itself. If the action property is not blank, and has some page name set, e.g., action=”target.html”, then the form is sending data to target.html page. Or we can have action=”www.google.com”, means, data is sent to google.com. The action property is usually set when we have doing server side programming, i.e., we are writing PHP code, etc.

The following is a simple example of a webpage using form.

File name: index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" action="" method="post" name="form1">&nbsp;
<table border="1">
<tbody>
<tr>
<td style="width: 121px;">E-Mail</td>
<td style="width: 253px;"><input id="txtemail" name="txtemail" type="text" /></td>
</tr>
<tr>
<td style="width: 121px;">Description</td>
<td style="width: 253px;"><textarea id="txta_desc" name="txta_desc"></textarea></td>
</tr>
<tr>
<td style="width: 121px;">Select File</td>
<td style="width: 253px;"><input id="fileCV" name="fileCV" type="file" /></td>
</tr>
<tr>
<td style="width: 121px;">Enter Password</td>
<td style="width: 253px;"><input id="txtpasswd" name="txtpasswd" type="password" /></td>
</tr>
<tr>
<td style="width: 121px;"><input id="hidid" name="hidid" type="hidden" value="334" /></td>
<td style="width: 253px;"><button> <img src="http://www.pakproject.com/wp-content/uploads/2017/07/DSC05256.jpg" width="20" />Add </button></td>
</tr>
<tr>
<td style="width: 121px;"><label style="color: #03c;"> Select your city </label></td>
<td style="width: 253px;">
<select id="ddlcity" name="ddlcity">
<option>Karachi</option>
<option>Lahore</option>
<option>Islamabad</option>
</select></td>
</tr>
<tr>
<td style="width: 121px;"><input id="btnimage" name="btnimage" src="images/img4.jpg" type="image" width="20" /></td>
<td style="width: 253px;"><input id="btnsubmit" name="btnsubmit" type="submit" value="Save" /></td>
</tr>
</tbody>
</table>
&nbsp;

</form>
</body>
</html>

Add a Comment

Your email address will not be published. Required fields are marked *