In the last part, you learned how to create a basic form in HTML, which included a simple textbox. HTML forms allow you to have a huge number of different form elements, though, and some of these will be covered in the following page.
Larger Text Inputs
Although textboxes offer a useful way of getting textual input from a user, it is quite limiting as the user can only enter one line, and this is limited in length. If you want to get more than just a few words of text from a user, you are better off using the far more flexible textarea. The basic code for a textarea (or multiline text box) is:
As with any form element, you must specify a name (in this case comments). You may have noticed that, unlike the standard text box and button, this form element has a closing tag. This is because, as well as allowing the user to enter more text than other elements, it is also designed to allow the webmaster to set more initial text. Anything between the closingand opening tags will be placed inside the textbox and, unlike with standard HTML, new lines taken in your code between these tags will be shown as new lines on the page. If I wanted to, for example, ask a user for comments, I could create the following textbox:
using this code:
<textarea name="comments">Thank you for visiting the site. We would appreciate it if you would leave some comments in this box to help us improve.</textarea>
One of the useful features of textboxes is that they will wrap text for you, and also provide scrollbars if the text cannot all fit in the box. If you expect users to enter very large pieces of data, though, you will want to have a larger box than the default. Luckily HTML has allowed for this with the cols and rows attributes. These allow you to set the number of columns in your textbox (i.e. the number of characters wide it is) and the number of rows which appear. For example, you could have used the following code for your comments form:
<textarea name="comments" rows="6" cols="25">Thank you for visiting the site. We would appreciate it if you would leave some comments in this box to help us improve.</textarea>
Radio buttons are a form element usually used for choices, such as voting. They are defined in groups where only one button at a time can be selected, for example:
As with most other form elements, radio buttons use the standard <input> tag, with the type set to 'radio'. Unlike other elements, radio buttons must be named based on their groupings, not individually. For example, with text boxes you might have one called 'name' and one called 'password' but for radio buttons to work correctly (deselecting one when another is chosen) all the buttons in a group must have the same name. When submitted, the form will give the name of the group, followed by the value set for the selected button, as its output. If you want multiple radio button sets in one form all you need to do is to give the othetr set a different name. It is worth noting that the location on the page has no relation to how radio buttons are grouped, as long as buttons have the same name and are in the same fo
rm, they will be grouped.
Unlike radio buttons, checkboxes are either on or off. They are not grouped and as many or as few of them can be selected as the user wants. Again, a checkbox is inserted using the standard <input> tag, using both name and value:
<input type="checkbox" name="agree" value="yes">
When a form containing a checkbox is submitted, the browser will only send the textbox name and value if it is selected. If not it will ignore the checkbox.
It may be useful in some cases to have the checkbox pre-selected. IN order to do this, you must simply add a checked attribute to the <input> tag:
The user will still have full control over the checkbox, and can check and uncheck its value, even if you preset the box as checked, but it is more likely that the user will leave it checked.
Selection boxes allow you to provide a list of options on your website from which you can choose one. This can be very useful for entry such as country, where you don't want the user to be able to freely enter text, for example:
The basic code for setting up a selection box is:
As with any other form tag, you can add the name attribute, so that you can access the form data later. In between the <select> tags you can add each option you want to appear. These should be in the order you want them in the list. There is no limit to the number of items you can add as the browser will adjust the box accordingly.
<option value="1st">Item 1</option>
You can put in any value you want, it does not need to be sequential or bear any relation to the use of the option (as with a text box, for example). Between the <option> and </option> tags you enter the text you want to appear in the selection list. This can be as long as you want (within reason), as the select box will automatically resize to cope with the longest item.
In a select box, by default, the first option is displayed when no selection is made. In many cases this is acceptable (most people will put 'Please Make Your Selection' here and will assign it a value which they can later detect is an invalid input, but sometimes, for example in country-select boxes, you will want to make another option the default. To do this, you simiply need to add the 'selected' attribute:
The final element which you can add to your form is one which, at first, appears to be useless. It is a hidden field, which will simply send a name and value with the form data. Nothing will appear on screen and the user is not given the chance to change the value. It will show nothing on the HTML page (although it will be in the source code, so it shouldn't be used for storing the information which the user shouldn't see). The hidden field is extremely useful in some server-side systems, where HTML is generated on-the-fly. For example, in many ordering systems there will be multiple pages where the user inputs data. Often this data is put temporarily into a database, and the key for accessing it placed into a hidden field on the page for the next stage, so that the backend system can identify which user is submitting the data from the second page.
There are no extra attributes for the hidden field, as there are no appearance settings which can be changed for it. You can have as many hidden fields in your form as you want, as long as they all have different names and they can be placed anywhere inside the <form> tag.
In the last two parts you have learned how to place a form on an HTML page, and how to add a number of advanced elements to it. In part 5 I will cover the div tag and image maps.
Note: This tutorial is currently being developed and further parts will be posted shortly.