Basics of HTML Form
×
Home Courses Community Support
Basics of HTML Form

To add a form to HTML page, we use the tag <form>. Do create a simple HTML form using below code-

<!docty html>
<html>
<head>
	<style>
	.space{
	margin-left:50px;
	margin-bottom:20px;
	}
	.msq{
	margin-left:35px;
	}	
	.btn{
	margin-left:95px;
	margin-top:35px;
	}
	.error{
	color:#FF0000;
	}
	</style>
</head>
<body>

<h2>Contact Us</h2>
<form>
<label>Name</label> <input  class="space" name="userName" type="text" ><br>
<label>Phone</label> <input  class="space" name="userPhone" type="text" ><br>
<label>Email</label> <input  class="space" name="userEmail" type="text" ><br>
<label>Message</label> <textarea  class="msq" rows="5" cols="40" name="userMsg"> </textarea><br>
<input class="btn" type="submit" name="submit">
</form>

</body>
</html>

 

Above code will display a HTML form as given in below image-


Below are some important points to know about form-

Submit button: This button is used to submit the form data. By clicking on this button form data sent using the method given in <form> tag.

Method: To submit a form we have two methods get and post. Both have their own properties. Generally we use post method because it is more secure and can transfer more data.

Action: This attribute used to take action on the form. It is used to tell where to send form data on form submission.

Input: To get input from user, we use textarea or input. Input is most common form element. We can use it for various purpose with the help of its attribute type.
See below examples-

  • <input type=submit> will create a submit button.
  • <input type=radio> will create a radio button.
  • <input type=checkbox> will create a checkbox
  • In same way we can use <input> for text, file upload, image, password etc

Textarea: Text area is used to take long text input from user i.e. enquiry form message etc.

 

← Preview

Integrate YouTube video using Iframe

Next →

Using an Image for Submit Button in Form

NOTES

Our mission is to provide highly effective and quality education via innovative solutions. Geeksdemy look forward to bridge the gap between in-demand technology and academics in order to deliver innovative, easy, interesting and affordable learning across the Globe.

Courses

  • Python
  • Game Development with Unity 3D
  • Arduino
  • PCB & Circuit Designing
  • Robotics and Embedded C
  • 8051/8052 Embedded Systems
  • QuadCopter & UAV
  • MATLAB with Robotics
  • Raspberry Pi
Learn On the Go!
Get the Android App
Get the iOS App