For this html lesson, we are going to go over forms and their input fields.
WHAT IS AN HTML WEB FORM
Everytime you log in to a website like Facebook, Twitter, etc. you are entering information into a form (in those examples, your username and password). This information is then processed, and it is decided whether you are allowed to log in or not. Another common use of forms is when you sign up for a newsletter using your email address.
WHAT IS THE FUNDAMENTAL PURPOSE OF AN HTML WEB FORM
A form is used to get information from people visiting your website, and send it to a script file that will process, and react to the information in a predifined way, such as storing it, or allowing someone to log in, etc.
WHERE SHOULD YOU PUT YOUR CODE
You can make a new html file and start fresh (this helps keep things organised) or you can continue adding to your webpage.html, either way is fine so long as you put the code between the <body> tags.
HOW DO FORMS WORK?
Forms can have various ways to gather information, like text fields, checkboxes, radio buttons, password fields, select lists, textareas, etc. All dependant on what kind of information you are looking for.
So all of the form’s fields go inside of your opening <form> and closing </form> tags like so:
Most input fields are made using the <input> tag. And then the type of input field is decided using the “type” attribute, like so:
<input type=”text” /><br />
<input type=”password” />
Which ends up looking like this:
So the type attribute type=”text” tells the web browser what the input field should look like and how it should work. In this case it would make two blocks, one showing the typed text and the other hiding it. Noticed the “/”? Like the <img> tag, <input> is its own closing tag so don’t forget to close it with a “/”.
There are also radio buttons type=”radio” which require some more attributes in order to work. These are the name and value attributes. So if you wanted to give a choice between pizza or a burger it would look like this:
<input type=”radio” name=”food” value=”burger” /> Burger<br />
<input type=”radio” name=”food” value=”pizza” /> Pizza
And that would look like this:
So as you can see all that changes is the type, and now multiple options can be selected.
The submit button is possibly the most important input type and every working form needs one. This button is what people will press when they are done filling in or selecting options from the form, and without it your form has no purpose. So you put the button anywhere you want within your <form> tags, like so:
<input type=”text” /><br />
<input type=”submit” value=”Submit!” />
Which looks like this:
So the type must be equal to submit like this: type=”submit”. And the value you can set to whatever you want people to click on, for example “Send”, “Sign Up”, etc.
Unfortunately even with a submit button your form cannot send any information, anywhere until you have learnt some form of scripting language (such as PHP or ASP). Because generally what happens is you submit the form to a file written in a scripting language (PHP is considerably more easy than most and completely free), and this file will process the information and then act on it. So in the the case of a log in button, once submitted, the file would check if the username and password match, and if they do it would then allow you to access the previously locked webpage(s).
THAT’S ALL FOR FORMS AND INPUT FIELDS!
I know it must suck to be able to make all those interesting input fields, and then not be able to have the form do anything, but the knowledge gained is a necessary part of any form, and in time you’ll be able to make your forms do whatever you feel. Until then you can learn more about forms and many other things besides from www.w3schools.com. Don’t forget to follow us on twitter. And please comment below if you enjoyed this lesson or if you have a question.