Adding Form Elements

 

In the last part you saw how to add a text box and a textarea to a form. We'll continue adding form elements in this lesson.

 

Option Buttons

Option buttons are sometimes called Radio Buttons, and they force the user into choosing only one item in a list. In the form1.html sample form, Option Buttons were used to limit your choice of Operating Systems. A popular use of Options Buttons is the Male/Female option.

With the Form Dialogue box still open in your HTML Editor, tick the box next to "Radio Buttons". You'll see this:

Again, it's a simple matter of specifying how many radio buttons you want. We added 5 of them for the Operating Systems, so delete the 2 and type in a 5.

If you were to just have Radio Buttons selected, and you clicked OK, the code would be this for the minimum 2 radio buttons needed:

<INPUT TYPE = Radio Name = R1 Value = "Radio1" Checked>Windows 95

<INPUT TYPE = Radio Name = R1 Value = "Radio2">Windows 98

After typing the INPUT tag, the word TYPE comes next. For option buttons, the type is "Radio". The NAME is definitely needed here, and note that the NAME for both is "R1". You use the same name for each group of option buttons you are adding to your form. So if you wanted Male/Female option buttons, the code might be this:

<INPUT TYPE = Radio Name = R2 Value = "Radio1" >Male

<INPUT TYPE = Radio Name = R2 Value = "Radio2">Female

This time, each radio button has the name "R2". The reason you keep the same name for each group of option buttons is simply to distinguish one group of option buttons from another.

The VALUE attribute is quite useful. The Editor puts in a default value of Radio1, Radio2, Radio3, etc. But you should set the value to the same text as the user sees. So the Values in the codes above should be "Windows 98" and "Windows 95", and not "Radio1" and "Radio2". When the user submits the form to you using the Submit button, these VALUES are going to be returned. If you've just got Radio1 and Radio2, you won't know (or won't remember, more likely) which option the user has selected. Manipulating values with scripts is also a lot easier if the Value is the same as the text the user sees.

If you want to have a default option button selected, use the word "Checked".

To complete the tag, type the right angle bracket ( > ). After the right bracket, you then type the text that the user will see. In our case, the name of an Operating System: Windows 95, Windows 98, Windows ME, Windows XP, Other.

 

Check Boxes

Check boxes are used to give your users the opportunity to select more than one option from a range of options. With the Radio Buttons, you could only select one item; with check boxes, you can select them all. So on your Form dialogue box, tick the box next to "Add Checkboxes". You'll see this:

Again, you are being asked how many of the element do you want. The default is 2. We need 6 check boxes. So delete the 2 and enter a 6. If you were to click the OK button with only the Checkbox option ticked, the code would be this for the default 2 boxes:

<INPUT TYPE = Checkbox Name = CheckOne Value = "Check1">Printer

<INPUT TYPE = Checkbox Name = CheckOne Value = "Check2">DVD

Check boxes and Radio buttons work in a similar way, and the HTML code is similar, too. The same points made about Radio buttons apply to check boxes. Note the TYPE used, though: Checkbox.

 

Submit and Reset buttons

If you want your form to be sent somewhere, a Submit button is needed (though you can write code for your own submit button - the browser's own Submit button is not required to send data somewhere.) When the Submit button is clicked, the browser will check the ACTION attribute of the FORM tag to see where you want the data sent. It then checks the METHOD attribute to see what method you want to use, Post or Get. The browser will then try to send the form's data for you.

The code for a Submit button is this:

<INPUT TYPE = Submit Value = "Submit">

This time, the TYPE is set to "Submit". The VALUE attribute is the text that will appear on the button itself. The width of the button is determined by the width of the text for the VALUE attribute. If you wanted a really wide button, you can use this old trick:

Value = " Submit ">

Here, spaces are added to the left and right of the text. The browser will see the spaces as text and adapt the width accordingly.

 

Reset

The Reset button returns the form to the state it was originally in when it was loaded. Any default values you added will be retained. The code for a rest button is this:

<INPUT TYPE = Reset Value = "Clear">

Note the TYPE is now "Reset". The value attribute works in the same way that the Submit button does - it's the text that will appear on the button. So you could have this, and your Reset button will still work:

<INPUT TYPE = Reset Value = "Oh no - What a mess!">

By now, you should have all 5 boxes on the Form dialogue box ticked. Your dialogue box will then look like this:

When your dialogue box looks like the one above, click OK. The code will be added to your document.

If you save your work right now, and then load the page into a browser by clicking View > View Web Page or by clicking the glasses on the toolbar, your form will look quite a mess on the page.

 

In the next part, we'll see how to tidy up our form.

 

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses