WE'RE WEB DEVELOPERS IN CAPE TOWN, SOUTH AFRICA

From the Blog

May
03

HTML Lesson 3: Forms and Input Fields

Posted by robventer on May 3rd, 2012 at 1:51 pm

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:

<form>
*
input fields
*
</form>

INPUT FIELDS

Most input fields are made using the <input> tag. And then the type of input field is decided using the “type” attribute, like so:

<form>
<input type=”text” /><br />
<input type=”password” />
</form>

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 “/”.

RADIO BUTTONS

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:

<form>
<input type=”radio” name=”food” value=”burger” /> Burger<br />
<input type=”radio” name=”food” value=”pizza” /> Pizza
<form>

And that would look like this:

Burger
Pizza

So the new attribute name=”food” tells the browser to give an option between those two choices, and the answer is their choice of food (the value food should be set to whatever you want the choice to apply to). And the attribute value=”burger” or value=”pizza” decides what the available choices of food are.

CHECKBOXES

Checkboxes are very similar to radio buttons, the only difference in how they work is that, people can choose multiple options instead of just one. This is what the code for a checkbox looks like:

<form>
<input type=”checkbox” name=”food” value=”burger” /> Burger<br />
<input type=”checkbox” name=”food” value=”pizza” /> Pizza
</form>

Which gives you this result:

Burger
Pizza

So as you can see all that changes is the type, and now multiple options can be selected.

SUBMIT BUTTON

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:

<form>
<input type=”text” /><br />
<input type=”submit” value=”Submit!” />
</form>

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.

THE DOWNSIDE

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.

Leave a Reply

  1.  

    |