Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Learning about forms in HTML

Friday, September 27th, 2013 by Servage

It didn’t take long for the web to shift from a network of pages to read to a place where you went to get things done—making purchases, booking plane tickets, signing petitions, searching a site, posting a tweet…the list goes on! All of these interactions are handled by forms.

In fact, in response to this shift from page to application, HTML5 introduced a bonanza of new form controls and attributes that make it easier for users to fill out forms and for developers to create them. Tasks that have traditionally relied on JavaScript may be handled by mark-up and native browser behaviour alone.

How Forms Work

There are two parts to a working form. The first part is the form that you see on the page itself that is created using HTML mark-up. Forms are made up of buttons, input fields, and drop-down menus (collectively known as form controls) used to collect information from the user. Forms may also contain text and other elements.

The other component of a web form is an application or script on the server that processes the information collected by the form and returns an appropriate response. It’s what makes the form work. In other words, posting an HTML document with form elements isn’t enough.
The form Element
<form>…</form>

Interactive form

Forms are added to web pages using the form element. The form element is a container for all the content of the form, including some number of form controls, such as text entry fields and buttons. It may also contain block elements (h1, p, and lists, for example). However, it may not contain another form element.

This sample source document containing a form element is shown below.

<!DOCTYPE html>
<html>
<head>
<title>Mailing List Signup</title>
<meta charset="utf-8">
</head>
<body>
<h1>Mailing List Signup</h1>
<form action="/mailinglist.php" method="post">
<fieldset>
<legend>Join our email list</legend>
<p>Get news about the band such as tour dates and special MP3
releases sent to your own in-box.</p>
<ol>
<li><label for="firstlast">Name:</label>
<input type="text" name="username" id="firstlast"></li>
<li><label for="email">Email:</label>
<input type="text" name="email" id="email"></li>
</ol>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>

The action attribute

The action attribute provides the location (URL) of the application or script (sometimes called the action page) that will be used to process the form. The action attribute in this example sends the data to a script called mailinglist.php.

<form action=”/mailinglist.php” method=”post”>…</form>
The method attribute
The method attribute specifies how the information should be sent to the server. Let’s use this data gathered from the sample form as an example.

username = Sally Strongarm

email = strongarm@example.com

When the browser encodes that information for its trip to the server, it looks like this:

username=Sally%20Strongarm&email=strongarm%40example.com

All form control elements must include a name attribute so the form-processing application can sort the information. You may include a name attribute for submit and reset button elements, but they are not required, because they have special functions (submitting or resetting the form) not related to data collection.
Resources for Further Reading

W3 Organisation

W3 Schools

Learning about forms in HTML, 4.3 out of 5 based on 4 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.