HTML5 tutorial - The form element.

The form element

In general when building a site:

You first want to get people to the site.
Traffic can come from word of mouth, social media, advertising, search engines, etc.
Then you want to keep them on the site.
You don't want them to bounce – to visit one page, not find what they are looking for and go somewhere else.
Finally you want them to do something.
You want them to buy a product, make a reservation, register for something, etc. This is called a conversion.

Getting conversions often entails the use of forms.

No doubt at one time or another you have filled out an online form something like the following:

Name:

Your email:

*

Comments: 

+

=

This is so I know a human is filling out the form. *

This form sends you an email. Go ahead and try it.

Below is the opening tag of the form above.

<form action="form-element.php" method="post">

The action attribute tells the browser what to do when the "Submit" button is clicked.

  1. First it sends a message back to the server with the data that was entered into the form.
  2. The server then finds the file indicated in the action attribute – this page/file: "form-element.php".**
  3. It takes the data and does what the instructions in the file tell it to do.
  4. Finally it sends the page back to the client and the browser reloads it.

You will notice that this page has a ".php" extension, rather than ".htm" like most of the rest of the pages on this site. This page contains both HTML and PHP and therefore has a ".php" extension.*** I include PHP code because HTML only displays content. The PHP makes forms function. The instructions mentioned in the list above are written in PHP.

In computer science terms HTML is a markup language, not a programming language**** such as Javascript or in this case, PHP. The browser knows to display the HTML just as it would with an ".htm" extension.

HTML can't multiply two numbers. For that you need a programming language such as PHP. However, you can't display content with PHP. That is HTML's function – with the help of CSS.

x = 0

Let's go through the three steps above to see how this form works.

  1. When you click "Multiply" the browser takes the contents of the two boxes and sends it to the server.
  2. The server then finds the file in the action attribute – again, this page/file: form-element.php.
  3. Then, following a set of instructions I wrote in PHP, the server does the math and saves the answer.
  4. Lastly it sends the data back to the client and the page reloads with the answer displayed in the box.
To generate the answer box above the server sent:
<span class="answerbox">0</span>
But what I actually wrote is:
<span class="answerbox"><?php print $answer; ?></span>

Now is not the time to learn PHP, but it is important to have a general idea of how HTML, CSS and programming languages work together. There are all kinds of programming languages, and I highly recommend learning at least one, but you should know HTML to use those languages to their fullest potential.

The form element has a second attribute: method="..". The method tells the browser how to send the content of the form back to the server. The post method, used in the previous two forms, hides the data. The get method appends the data to the end of the URL.

<form action="form-element.php" method="get">

To see a get in action fill in your first name and click "Submit".

Your name:

Hello ,

Notice that the URL of this page is now:
http://www.html-5-tutorial.com/form-element.php
You can send that URL in an email or use it in a link on a web page.
http://www.html-5-tutorial.com/form-element.php.

While it's good to know what a get is, unless there are overriding reasons not to, I recommend using the post method. The get method is like that weird screwdriver you hardly ever need, but when you do, it's the only tool for the job.

Unlike TV or print, on the net communication is not a one way street. Visitors can send information back to you via your server. Forms are the principal mechanism web designers use to get clients to do just that. Unfortunately, this opens all kinds of security issues for both visitors and designers.

While many of you filled out the second and third forms, I imagine most of you were hesitant to fill out the first. For all you know I could be some spammer soon to be sending you emails concerning the estate of my late uncle, the ex Nigerian Minister of Finance. I am not a spammer and my uncle sold tractors for a living – but the nature of the net is such that you never know.

Trust is everything. No one with any sense is going to fill out a form without having a reasonable degree of confidence that what they send won't be misused, nor should they. The ongoing – indeed unrelenting efforts of the dead minister's extended family speaks to the fact that there are plenty of idiots out there, but vast majority of us know better.

Web designers have to be careful too. Forms can be vulnerable. I do everything I can to prevent the use of these form for anything other than their intended purpose. Unfortunately, hackers are every bit as unrelenting as the minister's family – and much smarter.

That said, there are ways to protect both your clients and your forms from hackers. Some are low tech. In the first form, as long as I don't save any email addresses (and I don't), no one can hack into the server and steal them. Some are high tech – and beyond my skills to write, however there are free programs you can download and use to process your forms.

The use of one of the three forms above would not be considered a conversion. In fact, this site is unusual in that I am not trying to get visitors to fill out a form; however the ultimate goal of most sites is to build email lists, to request donations, to sell something – to get conversions.

All too often web designers spend too much time on bells and whistles and forget that the point of the exercise is to get people to do something. As a rule it's a simple form on a simple page that brings home the bacon.

PHP

PHP is a general-purpose server-side scripting language originally designed for Web development to produce dynamic Web pages.
wikipedia · php.net/faq

Markup Language

A markup language is a language that annotates text so that the computer can manipulate the text.
about.com · wikipedia

Programming Language

A programming language is an artificial language designed to communicate instructions to a computer.
wikipedia

Javascript

A scripting programming language most commonly used to add interactive features to webpages.
wiktionary.org · wikipedia

* Required – I do not save any email addresses that are entered into this form. Privacy Policy.

** The action attribute can call a file other than the one the form is in. I have the PHP code that processes the forms saved in this file but the PHP can be in a separate file if you prefer.

*** If you look at the source code you won't see the PHP. It's in the file I saved on the server, but that code is executed on the server and only the HTML – often having been modified by the PHP – is sent to the client.

**** Most programming languages used on the net, such as PHP, are called "scripting languages". For most beginners it is a distinction without a difference, but if you are or plan to become a programmer you should know this. To learn more go to: http://en.wikipedia.org/wiki/Scripting_language