Creating a Simple HTML contact form

This article shows how to create a simple contact form in HTML. The beginners in HTML can learn how to create HTML forms in this article.

Step1

Create a new form in the page. In the document body section, type the following code:

<form action="save-data.asp" method="post" name="contactForm">
 </form>

NOTE: In this code, form element has three attributes: action, method and name. These three are the basic attributes in an HTML form.
Action: this specifies the page into which the form data is submitted.
Method: This attribute specifies the method of form submission [values: get/post]
Name: this attributes specifies the form name for the element reference in the document.

Step2:

Create form contents: Inside the above form element, place the form elements like, textinput, select, textarea, buttons etc. Remember to give unique names for each of the elements. The elements can be wrapped with lable tags.
Following is a sample textinput code for “First Name” in the contact form:

<label>First Name
 <input name="FirstName" type="text" id="FirstName" />
 </label>

Following is a sample textinput code for “Last Name” in the contact form:

<label>Last Name
 <input name="LastName" type="text" id="LastName" />
 </label>

NOTE: label tags are optional tags. The above input tags have three attributes; name, type and id.
Name & id: Refers the element in the document.
Type: this specifies which type of input field it is. E.g. Text, hidden, password, submit etc.
Step3
Create a Submit button:  To submit an HTML form, a submit button is mandatory. Inset the following code inside the form tag.

<input type="submit" name="Submit" value="Submit" />

NOTE: Submit button is also an input element, but the type should be “submit”. Optionally, you can create a form reset button by just changing the type into “reset”.
The HTML form is ready. Click here to download the sample form.