Creating forms

Understanding the Web

How to create a website

Parts of an HTML page

Structure of an HTML Document

Creating and viewing a WEB PAGE

Text formatting in HTML

Organising information using lists

Structure content with tables

Data collection with forms

Navigation with links

Displaying images

HTML forms can present information to users, using text and images. But it can also offer various types of other methods of presenting information, including the following:

Text input fields, including in-line, single line, or multiple lines
Data selection tools, such as radio buttons (which let you pick one option from a group)
Pick lists, which let you fill in a value from a predefined set of options
Check boxes, which enable you to pick zero, one, or more values from a predefined set of inputs

All in all, HTML form markup tags and attributes help you:

Define the overall form structure.
Tell the web browser how to handle form data.
Create input objects, such as text fields and drop-down lists.

Every form has the same basic structure. Also, which input elements you use depends upon the data you’re presenting and collecting.

Structure of form

The <form> element is a content and input container: It works much like the paragraph (<p>) element, which contains paragraph text, or like the division (<div>) element, which contains various types of sub-elements in a logical document section. Thus, all input elements associated with a single form are

Contained within a <form> element.
Processed by the same form handler.

A form handler is a program on the web server (or a simple mailto: URL) that manages the data a user sends to you through the form. A web browser can only gather information through forms; it doesn’t know what to do with the information after it has grabbed it. You must provide another mechanism to actually do something useful with data you collect in any form.

Form element Attributes

You always use these two key attributes with the <form> tag:

action: The URL for the form handler
method: How you want form data to be sent to the form handler

Your form handler dictates which of the following values to use for ‘method’:

• get sends the form data to the form handler on the URL.

• post sends the form data in the HyperText Transfer Protocol (HTTP) header.

Markup

The markup in following code creates a form that uses the post method to send user-entered information to a form handler (guestbook.php) to be processed on the web server.

<html>
  <head>
    <title>Forms</title>
  </head>
  <body>
    <form action='bin/guestbook.php' method='post'>
    <!-- form input elements go here -->
    </form>
  </body>
</html>

The value of the action attribute is a URL, so you can use absolute or relative URLs to point to a form handler on your server.