Haha, form-ation ^_^. Sometimes I crack myself up with the puns in the titles. Anywho, this chapter will show you how to put forms into your web-pages.
Forms have many uses, mainly they are used for getting feedback from visitors. You might have a "contact me" page on your website that allows visitors to send you comments/queries etc.
The Form Element
The form element, <form>, has a couple of required attributes. The first is the action attribute. The action attribute usually points to a program on your web-server that will take the information that the user entered into the form, process it and then email the processed, tidier version to you. Pretty much all hosts, including free ones will give you instructions on what to put into the action attribute, and it is different for each host. If you don't have access to such resources, for example if you are simply building your website on your computer at the moment, you can have the form submit the information using the visitors email application. When you want to do this, you put action="mailto:youraddress@wherever.com". When the visitor submits the form it will open up their default email program and the information that they entered into the form will be copied into a new email ready to be sent to the specified address. This is generally a bad practice however, because unfortunately there are programs that search the Internet for email addresses like this so that the addresses collected can be added to junk mailing lists. If you must do this, create a throwaway email address specifically for the purpose of collecting feedback from your website.
The second attribute is the method attribute. For this attribute you can put ether method="post" or method="get". Your web host will again tell you which one to use. If you're using the mailto trick I just taught you it really doesn't matter which of the two you pick - it will still function the same way. If using the mailto trick I'd personally go for post as it just sounds better... post an email, post a mail!
So, after all that waffle, creating the form element will look like this:
<form action="mailto:youraddress@wherever.com" method="post">
</form>
Basic Textbox
You'll most likely want to have the user tell you some basic information about themselves. Their name, their Email address, their website url perhaps? Using the text input type is best for the job here. You put it inside the form element. A text input looks like this:
<input type="text" name="fieldname">
The name attribute, the name of the field, can be whatever you like. For the above examples, using the field names "name", "email", and "url" would be perfectly reasonable. Optionally, with a text input you can also specify a size attribute, which will set the width of the textbox in characters. You can also set a maxlength attribute to limit how many characters the user can enter. For the visitor's name you may want to limit to say, 30 characters. As such, the code for collecting our visitor's name looks like this:
Please enter your name:
<input type="text" name="name" size="10" maxlength="30">
Which would output
If the visitor put their name in as Scott, and submitted the form, you would receive something like the following:
name: Scott
Radio Buttons
A radio button allows you to select one of several options. Here is the code for a poll about the visitor's favourite website.
Please select your favourite of the following websites:<br>
<input type="radio" name="favsite" value="scotts"> Scott's Excellent 'Web' Site<br>
<input type="radio" name="favsite" value="yahoo"> Yahoo's crappy excuse for a website<br>
<input type="radio" name="favsite" value="google"> Google's futile attempt at indexing the web
Which would output:
Please select your favourite of the following websites:
Scott's Excellent 'Web' Site
Yahoo's crappy excuse for a website
Google's futile attempt at indexing the web
The name attribute for a radio button input is used for grouping together those that are part of the same collection. The value attribute will give each of the individual options on the poll their uniqueness, and if the user selected google as their option on the above poll, and submitted the form you would receive something like the following:
favsite: google
To clarify, this would mean if you wanted two different polls on the same web-page, you would need to do something like the following:
<p>
Please select your favourite of the following websites:<br>
<input type="radio" name="favsite" value="scotts"> Scott's Excellent 'Web' Site<br>
<input type="radio" name="favsite" value="yahoo"> Yahoo's crappy excuse for a website<br>
<input type="radio" name="favsite" value="google"> Google's futile attempt at indexing the web
</p>
<p>
...and please select your favourite of the following colours!<br>
<input type="radio" name="favcolour" value="red"> Red /<br>
<input type="radio" name="favcolour" value="green"> Green /<br>
<input type="radio" name="favcolour" value="blue"> Blue
</p>
Please select your favourite of the following websites:
Scott's Excellent 'Web' Site
Yahoo's crappy excuse for a website
Google's futile attempt at indexing the web
...and please select your favourite of the following colours!
Red
Green
Blue
See how the name attribute is used to differentiate one poll from the other!
Checkboxes
Checkboxes are excellent for confirming a user has read something, or for getting a user to select multiple options. Working with the above examples, you might want to get a user to tell you which websites they like of a few ready made options. The code for this would be:
Please select which of the following websites you like:<br>
<input type="checkbox" name="scotts"> Scott's Excellent 'Web' Site<br>
<input type="checkbox" name="yahoo"> Yahoo's crappy excuse for a website<br>
<input type="checkbox" name="google"> Google's futile attempt at indexing the web
Which would output:
Please select which of the following websites you like:
Scott's Excellent 'Web' Site
Yahoo's crappy excuse for a website
Google's futile attempt at indexing the web
Checkboxes are not grouped, and so you name them individually. If the visitor selects both scotts and google from the above options and submits the form, you will receive something like the following:
scotts: true
yahoo: false
google: true
Due to the fact it the value comes back as ether true or false, it might be better to name the checkboxes more appropriately. Inserting "likes" into each of the name attributes in the above examples would mean that the feedback as you receive it would read more clearly, like so:
likesscotts: true
likesyahoo: false
likesgoogle: true
Combo Boxes, or, as the rest of us know them, drop-down menus
Drop-down menus are another method of allowing the visitor to select a single option from a list of possible options. The benefit of drop-down menus however is that they don't use up very much space on the web-page. For this reason they are much better when you have a larger number of items to choose from, though for the purposes of this tutorial we'll stick with the same example!
Please choose your favourite website:<br>
<select name="favsite">
<option value="scotts">Scott's Excellent 'Web' Site</option>
<option value="yahoo">Yahoo's crappy excuse for a website</option>
<option value="google">Google's futile attempt at indexing the web</option>
</select>
Produces:
Please choose your favourite website:
If the user selected "scotts" here, the feedback as you would receive it would be the same as the radio button equivalent:
favsite: scotts
You can have as many combo boxes on your web-page as you like, just remember to give each one a unique name attribute!
Multi-line Textboxes
A multi-line textbox, or textarea is arguably one of the most useful types of input because it allows your visitor to send you a more complete type of feedback. The textarea is made using the <textarea> tag, and requires three attributes: the name attribute, the rows attribute and the cols attribute. The rows attribute determines the height of the textarea in lines of text, and the cols attribute determines the width of the textarea in characters. The visitor can enter as much information as they want into the textarea. You can also have the text area contain some text already by putting text before the closing tag. If you do not wish to do this you will still need to close the textarea... so just leave that bit blank!
<textarea name="comments" rows="5" cols="50">Enter your comments here</textarea>
Outputs:
Submit Buttons!
The visitor, after taking the time filling out all that information is going to need some way of sending it on to you, otherwise they're frankly going to get quite annoyed! Fortunately, for this purpose we have the submit button. The submit button doesn't need the name attribute though you can include it if you wish. The only attributes the submit button needs is the type, which we set to submit, and the value, which determines the text which is shown on top of the submit button itself.
And click the button below to send your feedback!<br>
<input type="submit" value="Send!">
Outputs:
And click the button below to send your feedback!
The submit button, and all of the other input types we have looked at all need to be inside that <form> element to work properly!
Whew!
This has most certainly been the most extensive chapter so far! To make sure you've got everything, why not see all of the different types of input in action? And on completion, grab your pencil case, sit down at the single-person desk in silence, ONE at a time, and take the end of chapter quiz.