How to create simple HTML Form?


How to create simple HTML Form?

In this tutorial we are going to teach you to write simple HTML form with some input fields in the form. You will learn How to create simple HTML Form?

In this tutorial we are going to teach you to write simple HTML form with some input fields in the form. You will learn How to create simple HTML Form?

HTML Form Tutorial: How to create simple HTML Form?

In web application input forms are developed using the HTML tags and the form component provided by by HTML. There are many different types of input elements such as text, button, radio button etc.. which can be used to make an user entry form for the web application. In this tutorial you will learn to create simple HTML form for taking user input in any web application.

What is form in HTML?

The html forms are special component of HTML that comes with the capability of sending the data entered by user to the server. For entering the data html components such as text, button, radio button, select box and many others can be used to create input elements for the user. All these input elements are places inside the <form>...</form> tag on the HTML page. The data of the input elements placed inside the <form>...</form> tag is sent to the server when user clicks on the "Submit" button inside the form.

You can check more detail about HTML form at: What is HTML Form?

In simple terms the form component allows the HTML developers to make user data entry component for web application that can take user input in web application and send data on the server. For example you can ask user to enter their email address in a subscription page on the website and when user submits (by clicking on the Submit button) data goes to the server.

Here in this example we will make a form that asks user name, email address and comments for subscribing the newsletter on the website.

How to create simple HTML Form?

Now we will create our simple HTML for for newsletter subscription. You should create valid HTML page and then inside the <form>...</form> add the following components:

Name: <input type="text" name="name">

Organization: <input type="text" name="organization">

Email: <input type="text" name="email">

Subscribe Button: <input type="submit" name="submit" value="Subscribe">

Above code creates Name, Organization, and Email text boxes. On the form "Subscribe" button is also added which is used to submit the form on the server.

Here is the screen shot of the form:

Email Subscription Form

Here is the complete code of HTML Form for Email Subscription:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  <TITLE>Subscription Form</TITLE>
  <form action="subscribe.php" method="post">
	<p>Email Subscription Form:</p>
	<p>Name: <input type="text" name="name"></p>
	<p>Organization: <input type="text" name="organization"></p>
	<p>Email: <input type="text" name="email"></p>
	<p> <input type="submit" name="submit" value="Subscribe"></p>

HTML Form Tag

We have used the <form>...</form> tag and inside this tag input components are added. The form tag of HTML is used to collect the input data entered by user and sent on the server on the form submit event. The form submit event is called when clicks on the submit button (in our case Subscribe button). HTML form component uses HTTP protocol to interact with the server and send the form data. Here are the various properties of HTML form tag:

name: The name attribute of form is the name given to the form and this is use used to identify the form in HTML DOM tree.

action: This attribute is used to specify the url of the server where form data will be sent by web browser once user clicks on the Submit button.

method: This attribute is used to specify the HTTP method used for sending the data to the server. The default value of this attribute is post.

target: It allows the HTML designer to specify the location where data returned is display. By default values is the by replacing the current page. The possible values for this variable are _blank, _self, _parent and _top.

enctype: There are pre-defined encoding for sending the data on the server. So, this property is used to specify the encoding for encoding the data when form data is submitted to the server.

Check the demo page at: Simple HTML form example.

In this tutorial we have learned to create a simple HTML form in HTML. You can check following related tutorials: