html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Intermediate

Lesson 7 - Getting To Grips With Forms

Until now we haven't seen how a user can enter information onto the web page. To allow user input we create a form using the <form> tag and its action attribute. There are several other tags and attributes available for use with the <form> tag, some of which are the subject of this tutorial.

The form Tag

The <form> tag and its' closing </form> tag are used to define a form whose input information is sent to the URL specified in the required action attribute.

The input Tag

The <input /> tag is a self closing tag that is used along with its type attribute to define an area of the form for user input. The type of the input element can be a button, checkbox, file, hidden, image, password, radio, reset, submit or text.

The label Tag

The <label> tag and its' closing </label> tag are used to define a label for an <input>, <select> or <textarea> element of a <form>.

The textarea Tag

The <textarea> tag and its' closing </textarea> tag are used to define a multiple line area for text input.

I think that's enough tags to give us a feel for forms and their capabilities.

Open the file with Notepad we created and tested in Lesson: 6 An Introduction To Tables

You saved the file to your computer in the C:\_HTMLIntermediate folder as lesson_6_webpage.html

Copy and paste the following code into the reopened file, overwriting the files contents.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Doctor - HTML Tutorials - Intermediate HTML Lesson 7 - Getting To Grips With Forms
</title>
  <base  href="http://htmldoctor.info/" />
</head>
<!--Getting To Grips With Forms -->
<body>
<h2>Basic Forms</h2>
<p>Please fill in our Pie Survey:</p>
<form action="htmlintermediate/simpleform.html"  method="get">
  <p>Name:<input type="text" name="name" /></p>
  <p>Which pie do you prefer?:</p>
  <p><input type="radio" name="pie" checked="checked" value="Chicken" id="chicken" />
     <label for="chicken">Chicken</label></p>
  <p><input type="radio" name="pie" value="Fish" id="fish" />
     <label for="fish">Fish</label></p>
  <p><input type="radio" name="pie" value="Shepherds" id="shepherds" />
     <label for="shepherds">Shepherds</label></p>
  <p>Other stuff you wanna tell us about pies:</p>
  <p><textarea rows="3" cols="30" name="comments"></textarea></p>
  <p>Submit your information:</p>
  <p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>

Save the file in the C:\_HTMLIntermediate folder as lesson_7_webpage.html and close the Notepad.

notepad

Viewing Our Changed File

From the C:\_HTMLIntermediate folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

notepad

Reviewing Our Changes

The Form

The <form> element encloses the other tags we wish to use in our forms and we used this tag with its' action and method attributes. The action attribute tells the browser which URL to invoke when the user submits the form. The method attribute tells the browser how to submit the form data.

Text Input

We have used the <input> tag along with its type attribute to allow the user to enter their name. We did this by setting the value of the type attribute to text. The name attribute was used to pass the value of the text entered to the server.

Radio Button Input

We also used the <input> tag along with its type attribute to allow the user to select a radio button. We did this by setting the value of the type attribute to radio. The checked attribute was used to set an initial value for the radio buttons. The name attribute was used to pass the value attribute of the radio button selected to the server.

Label Input

We used the <label> tag to give each radio button a name. We also used the for attribute to allow the user to select a radio button by using the mouse to click on the text. The for attribute of the <label> tag must match the id attribute of the <input> tag to bind the two together and allow this usability with the mouse.

Textarea Input

We used the <textarea> tag along with its rows and cols attributes to set up a text area to allow the user to enter some comments. The name attribute was used to pass the value of the text entered to the server.

Entering Data

Use the mouse to click in the name and comments fields and enter some input and maybe click a different radio button. Following is an example:

notepad

Submit the data

Use the mouse to click the submit button and a screen similar to the following will appear. Following is an example:

notepad

Reviewing Our Changes

As you can see the information we entered has been passed across and rendered on the screen.

How the information was passed across is beyond the scope of this tutorial but if your interested in how this can be acheived and for an explanation of HTTP methods I suggest taking a look at my Servlets & JSP Tutor site and in particular the lesson on What is HTTP?.

How we extract the information passed in the URL by the GET command is discussed on my Learn JavaScript & jQuery site.

Lesson 7 Complete

Modify the HTML to create your own forms until you're confident with basic form creation.

Related Tutorials

HTML4 Advanced Tutorials - Lesson 6 - Advanced Forms

What's Next?

We conclude these HTML4 Intermediate Tutorials with a summary of what we have learned in these lessons. We then do a practical utilizing all the tags used in the HTML4 Intermediate Tutorials.



Introduction To Tables  << Prev      Next >>  HTML4 Intermediate Summary

HTML4 Reference

The <form> interactive form tag

The <input> form input control tag

The <label> label tag

The <textarea> multi-line text field tag

go to home page Homepage go to top of page Top

HTML4 Elements

The complete set of HTML elements also known as HTML tags from the latest HTML 4.01 Specification.

Click the links for more information on individual tags and their attributes.

<!--...-->

<!DOCTYPE>

<a>

<abbr>

<acronym>

<address>

<applet>

<area />

<b>

<base />

<basefont />

<bdo>

<big>

<blockquote>

<body>

<br />

<button>

<caption>

<center>

<cite>

<code>

<col />

<colgroup>

<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<fieldset>

<font>

<form>

<frame />

<frameset>

<h1> - <h6>

<head>

<hr />

<html>

<i>

<iframe>

<img />

<input />

<ins>

<isindex />

<kbd>

<label>

<legend>

<li>

<link />

<map>

<menu>

<meta />

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<option>

<p>

<param />

<pre>

<q>

<s>

<samp>

<script>

<select>

<small>

<span>

<strike>

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>

<u>

<ul>

<var>