<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.
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.