Did you find this useful?
Socialize it today.


HTML Form and Input Elements

Thursday, February 23, 2012

While most other HTML elements are used to present information on your page, an HTML form is used to gather information from your users. Most modern web sites, will interact with their users through forms. For example, you will need to have a form to allow users to place orders, send you a message, or to track their orders.

How does a form work?

The form itself, does not process the input. It only gathers input from the user and sends the information back to the web server. To process information from a form, you will need to use server side programming such as CGI, Perl, ASP, PHP.  For ASP.NET, HTML forms can be used, but there are better options to interact with users (ASP.NET topics are covered in their own series of tutorials). The following interactive process takes place when a user access a page that contains a form.

  1. The visitor fills in the form and submits
  2. The browser sends the submitted form data to the web server
  3. A form processor is running on the web server processes the form data
  4. A response page is sent back in HTML to the browser

Form Element

A form can contain input elements of type such as text boxes, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. A starting and ending <form> tag is used to create a form.



<form>

 ... input elements ...

</form>

There are several attributes that you can assign to the form element. However, the only required attribute is "action". The "action" attribute points to the server side script that handles the form submission. Another optional attribute that is commonly used is "method". You assign the "method" attribute to either GET or POST. If you use GET method, the form submission values are passed as part of the URL (QueryString). If it is POST, the information is sent to the server as part of the data body and will not be visible in the URL box in the user’s browser. If you don’t specify the method, GET is used by default. Here is an example.



<form action="cgi-bin/form.pl" method="post">

 ... input elements ...

</form>


Now that you have your form, you need to add input elements. As discussed earlier, input elements include text boxes, checkboxes, radio, and buttons.

Input Element

The <input /> element is used to gather information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text, checkbox, password, radio, reset, and submit. Here are some examples.



Text Field


<form action="formaction.asp" method="post">
 textbox1: <input type="text" name="textbox1"/><br />
 textbox2: <input type="text" name="textbox2" />
</form>

textbox1:
textbox2:

Password Field


<form action="formaction.asp" method="post">
 Password: <input type="password" name="pwd1"/><br />
</form>

Password:

Radio Buttons


<form action="formaction.asp" method="post">
 <input type="radio" name="answer" value="yes" />Yes<br />
 <input type="radio" name="answer" value="no" />No
</form>

Yes
No

Check Boxes


<form action="formaction.asp" method="post">
 <input type="checkbox" name="color" value="a" />A<br />
 <input type="checkbox" name="color" value="b" />B<br />
 <input type="checkbox" name="color" value="c" />C
</form>

A
B
C

Submit Button


<form action="formaction.asp" method="post">
 Name: <input type="text" name="textbox1"/> <input type="submit" value="Submit" /> </form>

Name:

A submit button is used to send form data to the web server. The data is sent to the page specified in the form's action attribute. The action page will run the code against the data and return the results back to the user.

Reset Button


<form action="formaction.asp" method="post">
 Name: <input type="text" name="textbox1" value="Type your name" />
 <input type="submit" value="Submit" /> <input type="reset" value="Reset" />
</form>

Name:

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS: The Complete Reference HTML CSS and JavaScript Editor Creating Web Pages Simplified