HTML5 tutorial - The form element.

The input element

The <input> element is the principal element that collects information entered into a form.

It's been around since the beginning of the web, but in HTML5 <input> has been revamped into a new and greatly improved tool – or at least it will be.

Unfortunately, while W3C has written the new specifications, as of the summer of 2012 the browsers have implemented few of them. Chrome has advanced the most. Go to html5test.com to see how far along in development your browser is.

HTML5 should be finished (what they call a "final recommendation") by 2014 and with any luck all the new input types will be working by then or soon thereafter.

In the form below, except for "email" and "number", all types have been part of HTML for years. Both "email" and "number" work in the latest Chrome.

To see the new types in action open this page in Chrome and fill out the form. Enter whatever you want – you are the only one who will see it. No email is sent to anyone, nor is anything saved. When you click "Submit" the data is displayed below.

Name: required
<input type="text" name="your_name" size="35" value="">
Input type="text" has been the main input "type" used since the beginning and will continue to be so for the foreseeable future.
It has a name attribute, in this case: name="your_name". I will explain the role of the name attribute in more detail below. The tag also has a size attribute and a value attribute, which should be left blank (value="") to display an empty input tag.
The input element does not have a closing tag.
Email: required
<input type="email" name="email" size="35" value="">
Input type="email" is new to HTML5. It's like a "text", but it checks that the content is a valid email address. In Chrome enter something other than an email address, click "Submit" and see what happens.
Age:
<input type="number" name="age" value="">
Input type="number" is also like a "text", but it checks that the content is a valid number.
Gender:

<input type="radio" name="gender" value="Male">
<input type="radio" name="gender" value="Female">
<input type="radio" name="gender" value="Other">
Input type="radio" lets you select one of various option. I include "Other" to show that "radio buttons", as they are often called, can have more than two options. What "Other" constitutes I leave to your imagination.
Notice that all three have the same name and that the "value" attribute is preset.
Games:

<input type="checkbox" name="chess" value="Chess">
<input type="checkbox" name="checkers" value="Checkers">
etc.
With input type="checkbox" you can check multiple boxes. Unlike radio buttons you are not choosing just one of different options.
Again, "value" is preset, however unlike radio buttons, with checkboxes the "name" does change. Take a moment to review the difference between radio buttons and check boxes. As a beginner I found this confusing – but then I am easily confused.
Country:
<select name="country">
    <option value="None selected">Please select below</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    etc.
</select>
While <select name=""> and <option value=""> are different elements, they are related to the input element in that they collect data entered in a form.
Comments:
<textarea name="comments" rows="3" maxlength="200" cols="60"></textarea>
Larger blocks of text are collected by the "textarea" element.
Hidden input
<input type="hidden" name="your_ip" value="">
Input type="hidden" is useful for situations when you might want to gather data not supplied by the person filling out the form. Here I use a hidden input tag to collect your IP address.
<input type="submit" name="submit" value=" Submit ">
Input type="submit" displays as a button with the contents of the "value" attribute written on the button.
Clicking "Submit" triggers the browser to send the information entered in the form back to the server and process the data according to the instructions in file indicated by the action attribute of the opening form tag: <form action="input-element.php" method="post">. This was covered on the form element page.

All elements used to collect data in a form have a "name" attribute (name=""). That is the name of the variable that is assigned the value of the data collected by each input, select or textarea element.

You haven't yet filled out the form and submitted it; therefore the program hasn't run and no changes have been made. Try it and see what happens.

The variables and their corresponding values are sent to my server where they are picked up and processed by the program in input-element.php. The HTML is then reassembled and sent back to your browser with the new changes in place. While this particular form does not, normally there would be instructions in the program to send the website owner an email that included the data entered in the form.

We have covered a lot of ground on this and the previous page. My goal was to give you an overall understanding of the role forms play and general idea of how they work, rather than explicit instructions on how to build a functional form. That will have to wait for a future tutorial. There are a few things you need first – not the least of which is a server.

If you have a server, great; if not, you are getting to the point where you may want to think about getting your own domain and finding a hosting company. Next we will look into doing just that.