Computers & ProgrammingHTML/XHTMLWeb Development

HTML Form and Input Elements

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 websites 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 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 webserver.

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 accesses 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, text area, 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:

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

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

Password: 
<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
<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
<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.

<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:   

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top