Header Ads Widget

Ticker

6/random

How To Create a Form In HTML?

Muhammad Tahir December 08, 2017

Image result for html

HTML FORM

HTML form is a section of a document containing normal content, markup, special elements like check box ,button,text box,drop down etc.

Syntax

Simply <form> tag is used to create form
Other Elemnts Like
Text Box :<input type="text" name="first name">
Check Box:<imput type="checkbox" >
Radio Button:<input type="radio" name="abc" value="">
Drop Down List:
<select name="country">
<option>Select Your Country</option>
<option>USA </option>
<option>Canada</option>
<option>UK</option>
</select>
Calender:<input type="date" >
Time:<input type="date" >
Year:<input type="date" >
Comment Box: 
<textarea cols="25" rows="5">
</textarea>
Submit Button:<input type="submit"  >
Reset Button:<input type="reset" >
Browse File <input type="file" >

Attribute Of <form> Tag

accept-charset Specifies the charset used in the submitted form (default: the page charset).
action Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete Specifies if the browser should autocomplete the form (default: on).
enctype Specifies the encoding of the submitted data (default: is url-encoded).
method Specifies the HTTP method used when submitting the form (default: GET).
name Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate Specifies that the browser should not validate the form.
target Specifies the target of the address in the action attribute (default: _self).

What is Difference Between Get and Post Method?

The default method to submit form is a Get Method and in get method the submitted information shows on the address bar field of Browser So not use Get method when to submit personal information or sensitive information.
Where as in Post Method Data that we submit through form not display on address bar field of browser so it is useful when to submit personal or sensitive information.
Disable Attribute
<input type="text" name="firstname" value="Alex" disabled>

Simple Form Example

<form action="/target_page.php" autocomplete="on">

  First name:<input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  E-mail: <input type="email" name="email" autocomplete="off"><br>

Date Of Birth:<input type="text" name="DOB">

I Accept<input type="checkbox" name="Agree">
<a href="termsconditon.html">terms & condition .</a>
  <input type="submit">
</form>


How To Create Perfect Form In Table

Output Form
Below This Form Code 


<html>
<head>
<style>
body{
background:#F5FAF9;
}
</style>
</head>
<body >
<form>
<table border="0" height="0" width="0" bgcolor="#F5FAF9" align="center" cellspacing="5" >
<tr>
<td colspan="4"><p style="font-family:ger">
<h3 align="center"><span style="color:#55917A;">Register-Create Account</span></h3></p>
</td>
</tr>

 <tr>
<td colspan="4" border="1"  bgcolor="#E0F0E8">Feild marked with<span style="color:red;">*</span>are compulsory feild
</td>
</tr>

 <tr>
<td align="right" bgcolor="#E0F0E8"><span style="color:red;">*</span>Your Name</td>
<td  colspan="3"  >
<p style="font-size:10px; margin-bottom:0px;">Your Name</p>
<input  type="text " name="Your Name" placeholder="your name">
</td>
</tr>
<tr>
<td align="right" bgcolor="#E0F0E8"><span style="color:red;">*</span>E-Mail ID</td>
<td colspan="3"><input style="width:175px;" type="text" name="E-Mail ID" placeholder="E-Mail"></td>
</tr>
<tr>
<td align="right" bgcolor="#E0F0E8">Gender</td>
<td><input type="radio" name="Gender">Male<input type="radio" name="Gender">Female</td>
</tr>

 <tr>
<td align="right" bgcolor="#E0F0E8">DOB</td>
<td><input type="date" Name="DOB">
</td>
</tr>

 <tr>
<td align="right" bgcolor="#E0F0E8"><span style="color:red;">*</span>Alternate E-Mail ID</td>
<td colspan="3"><input type="text" name="E-Mail ID" placeholder=""></td>
</tr>
<tr>
<td align="right" bgcolor="#E0F0E8">Your Phone</td>
<td>
<input type="text" name="Your Phone" >

</td>

</tr>
<tr>
<td align="right" bgcolor="#E0F0E8">Mobile Phone</td>
<td colspan="3"><input type="text" name="Mobile Phone" placeholder=""></td>
</tr>

                               <tr>
<td align="right" bgcolor="#E0F0E8"><span style="color:red;">*</span>Your Postal Address</td>
<td colspan="3"><input type="text" name="Your Postal Address" placeholder="Address"></td>
</tr>

 <tr>
<td align="right" bgcolor="#E0F0E8"><span style="color:red;">*</span>Country</td>
<td>
<select>
<option>---Select One---</option>
<option>Pakistan</option>
<option>UAE</option>
<option>Saudi Arabia</option>
<option>Canada</option>
<option>Iran</option>
<option>UK</option>
<option>France</option>
<option>Germany</option>
<option>India</option>
</select>

 </td>
</tr>
<tr>
<td align="right" bgcolor="#E0F0E8"><span style="color:red;">*</span>Password</td>
<td colspan="3"><input type="Password" name="Password" placeholder=""></td>
</tr>
<tr>
<td align="right" bgcolor="#E0F0E8"><span style="color:red;">*</span>Re-Enter Password</td>
<td colspan="3"><input type="password" name="Re-Enter Password" placeholder="password"></td>
</tr>

 <tr>
<td align="right" bgcolor="#E0F0E8">Comment</td>
<td><textarea rows="5" cols="20"></textarea></td>
</tr>

 <tr>
<td></td>
<td  colspan="2"><input type="checkbox">I accept the<a href="#">Terms of Use</a></td>
</tr>

 <tr>
<td colspan="4" bgcolor="skyblue">

 <input  type="submit" name="Button"  value="Continue>>">
<input  type="reset" name="Button" value="Reset">
<button type="button">Click Me!</button>
</td>
</tr>

</form>
</table>
</body>

</html>
Tags:

Post a Comment

0 Comments