Lets begin by separating our form inputs out into 5 different classes
First we have the textboxes
Then the buttons
Then the checkboxes like radiobuttons YES NO
Next the pulldown menus
And finally hidden fields !!!
Let's look at each in turn
TEXTBOXES
Okay you've seen the basic coding for textboxes already
<input type="text" name="email" value="enter your email">
For example
You can leave out the value... to give an empty box
<input type="text" name="name">
Now you can pre-set the width of the box using the size attribute. This gives a size in terms of characters
e.g. <input type="text" name="name" size=15>
e.g. <input type="text" name="name" size=50>
You can limit the amount of text you can type in with the maxlength attribute (again value in characters)
e.g. <input type="text" name="name" size=50 maxlength=5>
You can create a password blinded textbox entry (where the info appears as asterixes e.g. ******) by using the password input type
e.g. <input type="password" name="secret">
You can also create a multiline textbox too like this one
Now this has it's own special tag, the <textarea> tag. It needs to be closed (e.g. </textarea>) but is used like any other input
e.g. <textarea name="text" cols="20" rows="3"></textarea>
As before the name attribute defines a data name for the data entered. The cols attribute determines how many characters you can have on each line (i.e. columns) before warping around to the next line. The rows attribute determines how many rows you can see on the screen without scrolling.
With newer browsers you can add the warp attribute to the <textarea> tag. This determines the word warping within the box. With warp=off, warping is turned off and you must manually hit return when you reach the end of the available space on each row. In the case of warp=virtual (or warp=soft) the warp appears on the form but when data is sent from the form the line endings are not shown (so the data just appears as a continuous line). With warp=physical (or warp=hard) the line endings are shown both on screen and on data sent on
BUTTONS
Okay you've actually seen almost all there is to know about simple buttons
The type attribute now has a value of image. The name and value attributes are the same as before. You must define the URL of your image by the srcattribute.
You can add in all the usual image attributes that you've used before too (e.g. width, height, alt, align etc.)
There is another tag (<button>) used for buttons but we'll discuss that later
CHECKBOXES
Checkboxes are great where you want the user to make a (or numerous choices) from a list of values. They fall into 2 types radio buttons and check boxes
We've seen radio buttons already
e.g. YES NO YES <input type="radio" name="answer" value="yes"> NO <input type="radio" name="answer" value="no">
You can only select one value within a group of radio button (defined by the same name attribute)
Check boxes allow you to select numerous values
e.g. cat dog fish
cat <input type="checkbox" name="animal" value="cat"> dog <input type="checkbox" name="animal" value="dog"> fish <input type="checkbox" name="animal" value="fish">
In both radio buttons & check boxes by adding the checked attribute causes a box to be preselected
e.g. YES NO YES <input type="radio" name="answer" value="yes" checked> NO <input type="radio" name="answer" value="no">
PULLDOWN MENUS
Our second to last type of form input is the pulldown menu
e.g.
As you can see the coding is somewhat different
<select name="pulldown"> <option value="no">no</option> <option value="yes">yes</option> <option value="maybe">maybe</option> <option value="perhaps">perhaps</option> <option value="do not know">do not know</option> </select>
As you can see there are 2 tags used.
The first defines the name of the menu and ends the menu (the <select> and </select> tags). Just like the input tags you define a name for the data selected.
Each available option is defined by the <option> tag. The value attribute sets the data value of each option selected. The name displayed is placed between each <option> and </option> tags.
By adding the size attribute to the <select> tag you can convert a pulldown menu into a scrolling one
width attribute. Determines width of object in pixels
HIDDEN FIELDS
Viewers of your forms can't see hidden fields.
At this point you're probably going what??? & Why bother!!
They are used to give additional info to the form data. We use a hidden field in our comment form example because it lets us know which forms tutorial you've sent it (there are identical ones for our Frontpage express and HTML tutorials- all are only different by by hidden fields value attributes)