A simplified overview of HTML forms

A form is an element that can be added to an HTML page. It consists of named fields, with each field having a value. Through forms, a user can send information back to a web server.

Suppose we have a simple HTML form on the page alpha.php:

<form action="beta.php" method="post">
    <p>
        Enter your first name:
        <input type="text" name="firstname"/>
    </p>
    <p>
        Enter your last name:
        <input type="text" name="lastname"/>
    </p>
    <p><input type="submit"/></p>
</form>

This is what it looks like:

A simple HTML form

When the user John Smith comes along and submits this form, his web browser issues an HTTP POST request to the page beta.php with the following extra information: firstname = John, lastname = Smith. It should be apparent that the field names “firstname” and “lastname” are taken from the two input elements in the form.

For the technically inclined, the POST request looks like this in the literal Hypertext Transfer Protocol (unimportant details have been abridged):

POST /beta.php HTTP/1.1
Host: www.myserver.com
User-Agent: Mozilla Firefox 3.0
Accept: text/html
Content-Type: application/x-www-form-urlencoded
Content-Length: 29

firstname=John&lastname=Smith

As a preview for the next article, note that on most web server systems, alpha.php and beta.php would be in different files. And each page would be responsible for both handling the potential incoming POST data and generating the outgoing HTML page. But even though beta.php processes data from alpha.php, it does not refer to alpha.php – so it be hard to track down where beta.php is receiving POST data from. Also note that it is legal for a form to post back onto its own URL (in this case, change the form to action="alpha.php").

Advertisements
Explore posts in the same categories: Uncategorized

One Comment on “A simplified overview of HTML forms”


  1. […] A simplified overview of HTML forms.) When the form is submitted over HTTP, all that is sent is a dictionary of key-value pairs. Each […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: