AN INTRODUCTION TO FORMS

Forms are very handy tools to a web developer, they allow you to give the user of the website, some interactivity. Below are some examples of the types of "controls" that may be created on a webpage.

What is a form?

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the <form> tag. If you dont include the form tag, then you will not be able to do anything with the "controls" that you put on your page. In effect the form controls would be there for decoration, and would not serve any useful purpose.

The Controls

This is a text box, useful for inserting names, email adresses and other short peices of information.

<input type="text" name="textbox">

This is the code required to enter a text box, in the tag you will notice a field called name, this is not so important at this stage, however when we move onto capturing data, this is important as it gives the form some identification, making it easier to use the form and identify each control.

 

This is a text field, this is useful for large amounts of text data.

<textarea name="textarea2" cols="75" rows="4" >default content </textarea>

As you can see, with this field it is possible to enter default information into the field, which is overrideable by the user of the form. To change the width of the box, you use the cols= attribute. changing this figure will allow you to determine how many charcaters wide the box is. In the same way, the height is determined by the rows attribute.

 

This is a very useful tool, it is the button control. Useful for allowing a user to submit their data in the form.

<input type="submit" name="button" value="Submit">

For this control, the value attribute contains the information that will appear on the button. In this case it says submit, however you may enter anything.

 

 

This is a check box, ideal for getting a user to answer pre defined answers, or for acknowledging they have read a statement.Many companies use this function to check that the user has read the terms and conditions of their service.

<label><input type="checkbox" name="checkbox2" value="checkbox">Checkbox</label>

The check box may be given a label, from the code above you can see this is done by adding a label tag right at the start, and then closing the label tah right at the end, with the label contents just before the close, but after the check box itself. This is a good idea to use when writting questionaires as a way to keep your questions closely assosiateed with the check box.

 

A radio button is almost identical to a check box, however the button is round, and so may be prefered depending on the look and design of the webpage.

<label><input name="radiobutton" type="radio" value="radiobutton">Radio Button</label>

 

A list / menu is a good way to present the user with a pre defined list of options to choose.from. Play with the list below, as you can see there are differant options to choose from.

<select name="select2">
<option>Topazgale</option>
<option>Onyshaddow</option>
<option>Rubyblaze</option>
<option>Emeraldpeak</option>
<option>Sapphirelake</option>
</select>

for each differant answer you want to appear on the list, you add an exra <option> tag and close it straight after your answer.

 

To see how to make a form "active", see the next lesson.