What this session is about

On this page you should (hopefully)...

• Forms forms forms
• Types of element
• More (advanced) elements

Forms forms forms

You've almost certainly seen a form before, they're often filled with controls like the ones to the right.

Each of the objects within that dotted box to the right are called "Elements" or sometimes "Controls". They all allow you to enter information into the form, when you click the "Submit" button the information is then sent away to some magical place where it returns with something you want.

Okay, so I lied about the magical place bit, it just goes to the computer that's running the website where it thinks about it, does what it's told and you get the result. Sadly, looking at how to make your website think is very much outside of the scope of this page, to do that you need to learn something called "PHP" (Though you can also use Perl, CGI, ASP and any number of other cool acronyms). The purpose of this page is to teach you how to create a form, not how to process what comes off it.

A form itself is actually a tag and used like so... All Elements go in the place of the comment (helpfully coloured in green), if they go outside of it then it will not work. The form itself has 3 attributes which I will now explain.

• action="targetPage.php"
  This tells the form which page to send the information to. In this example it's a fictional page called targetPage.php. This is a link just like the href from an <a> tag and you can use all that you learnt from the linking tutorial.
  
  
• method="post"
  This must be either "post" or "get". Sometimes web designers place them in uppercase as "POST" or "GET", it makes no actual difference. Post means that the information sent is hidden, Get means that the information sent is stuck into the URL of the page you are going to. The advantage of Get is that you can allow the user to alter the data really easily, Post allows you to send more data and also make it harder to edit.
  
  
• accept-charset="utf-8"
  This one, you really don't need to know about so feel free to skip it. Usually it'll not make any difference at all, it just tells the browser what character set you can use. If you're using this site to learn HTML then I'm going to go out on a limb and assume you 1) don't know what a character set is, 2) really don't care what a character set is and 3) really hope it's not important to know what a character set is. Good news, it's not important and you can probably get away with not including this.

You type stuff here

Lets look at putting in some basic elements for our forms.

Text Fields

Lets look at some elements shall we? First of all we'll look at the text box as shown to the right. It's very simple, it allows you to type stuff into it. That's it, that is the sum total of what this box will do. If you don't believe me, there's one to the right for you to have a go with. To create one of these, simply plagiarise the following code. The type is what tells your browser that it's a text field (notice that the tag is called input not textField), if you change it I can't be held responsible for whatever results you may experience. The name is very simply the name of the element, it bears little to no importance for you right now, if you were trying to do something with the information it would but currently you're not.

Finally the value, this is of use to you. The value determines the initial value of the field when you open the page, if it said value="Type here" then the text field would start with the words "Type here" in it when the page is opened.

If you are feeling adventurous you can add the size attribute. This alters the width of the box used, useful if you don't want it to be too big or too small. The one to the right of the paragraph above has a size of 15, it can fit 15 letters into it (approximately).

Submit Buttons

These are really really easy to do. They're also rather important, without them the form won't send it's information. To create a submit button, simply duplicate the following set of code. Again, the type tells your browser what type of element it is. The name is once again of almost no importance to you (just try not to call two different things the same name) and the value once again chooses what appears in the button when the page is opened. That's it, that is all there is to know about the submit button at this point. If you want to create a button to reset all the form fields, simply use the following.

Checkboxes

Checkboxes are also very easy to add, simply copy and paste the code below and then edit it. As per usual, the type is what tells the browser what type of element it is, the name makes little to no difference to you. In this case the value also makes little to no difference to you. If you want the checkbox to start the page checked simply add the following; checked="checked". There's not a lot you can do with checkboxes at this stage. So lets look at the much cooler radio buttons!

Radio Buttons

They're like checkboxes except you can only select one at a time (sort of). I'm going to assume that you fond all the stuff above this line interesting enough that I don't need to repeat my self and explain that type is to be left alone and name isn't important. Well, ha, I got you this time! In this case name defines the set that the radio button belongs to, only one radio button per set can be checked or filled in at a time, clicking a different one will move the "checkedness" from one button to the other. The value this time has little to no impact on you. As with the Checkbox, to make a radiobutton start the page selected, use the following line of code inside the tag; checked="checked".

More (advanced) elements

The following two elements are slightly more advanced that the previous ones so I put them at the end, it just seemed the logical thing to do.

Select Menus

A select element is a drop-down menu as shown to the right. To apply it use the following code example. The <select> element contains within it a set of <option> tags. It is very similar to the <ul> tag containing <li> tags. Each option has a value and in a surprise move for form elements it has a closing tag. Again, the name and value are of little to no importance to you. To cause an <option> to be pre-selected, simply write it like so.

Textareas

Text areas are used to manage large chunks of text, if you use online forums then they will likely be familiar to you but they are also used by sites such as facebook and indeed, any site where you enter more than a single line of text at once. Despite being in the "advanced" third of the page it is a relatively simple element to add. It does however have 2 attributes you need to pay attention to yet are quite easy to use. The first is rows, this simply defines the height of the box on rows of text, if you set this to 4 then it will be 4 rows of text high. cols is quite similar and defines the width of the box in columns of text.

You might have noticed that the <textarea> has a closing tag. Anything within the opening and closing tags is the default value for the text field.

Congratulations, you can now make forms!