Forms
Through the use of forms, visitors can send information to you from within your webpage. Forms are similar to the dialog boxes in BestAddress and other programs where you enter information and click a button which results in a task being performed based upon the information you specified.
A form can be described as a webpage equivalent of a dialog box. There are a variety of controls that can be placed on a form including buttons, text boxes, check boxes, option boxes, list selections and drop down lists.
Among other uses, forms are commonly used in webpages for guest books where visitors can provide comments, and send in details about themselves.
Creating a Form Field
You can easily add form fields and controls to your webpage by choosing an option from the Insert menu. In this tutorial, you will be introduced to the code that makes your forms work.
A form field contains all the controls (such as text boxes and buttons) and can be inserted anywhere within the body of a webpage. To define a form field, use the <form> and </form> elements.
So that the web browser knows where the information typed into a form is to be sent, you will need to use the action= and method= attributes. For example:
<form action="URL" method=post>
</form>
The action= attribute specifies a URL to a program on your website's server to which the form's data can be sent for processing.
The method= attribute tells the browser how the form's data is to be sent to the URL specified in the action= attribute. There are two possibilities: post and get. You will need to use the most suitable value based upon the program you are using, but typically you will use the post method.
The Submit Button
Most dialog boxes have a button which the user clicks for a task to be performed. In forms these are called submit buttons.
The submit button is specified using the following code, and is placed anywhere between the <form> and </form> elements: <input type=submit>
When added to a form, the button's caption is automatically set to Submit. If you what to change it to something else, you can use the value= attribute, for example:
<input type=submit value="Click Here to Continue">
The following example demonstrates the use of a simple form containing only a submit button:
<html>
<head>
<title>Simple Form Example</title>
</head>
<body>
<p>Here is an example form with a submit button:</p>
<form action="http://www.anywebsite.com/cgi-bin/submit-data" method=post>
<input type=submit value="Click Here">
</form>
</body>
</html>
The sample above won't do anything because you need to specify a valid URL for the action= attribute and the form needs to contain data to submit. If, however, you preview the page, it will look something like this:
The Reset Button
You can add a reset button to your forms that when clicked, causes the form to be cleared and reset to the default values just like when the webpage first loaded. A typical reset button's code may look as follows:
<input type=reset value="Start Again">
Text Boxes
If you want visitors to your site to provide you with simple text entries, such as their name or email address, use text boxes. The basic format of a text box is:
<input type=text name="name for control">
The name= attribute allows you to specify a unique name for the text box. This is useful when your form's data is submitted to you as it enables you to tell the information they provide apart. For example, if you wanted to provide a text box for visitors to enter their email address, you could use the following code:
<input type=text name="email">
To add a label before the start of the text box so that the visitor knows what to enter, simply write it before the text box:
Enter your email address: <input type=text name="email">
The following example demonstrates the use of a simple form containing three text boxes, a submit button and a reset button:
<html>
<head>
<title>Text Box Example</title>
</head>
<body>
<p>Please enter your details:</p>
<form action="http://www.anywebsite.com/cgi-bin/submit-data" method=post>
<p>First name: <input type=text name="First"></p>
<p>Last name: <input type=text name="Last"></p>
<p>Email address: <input type=text name="Email"></p>
<p><input type=submit value="OK"> <input type=reset value="Reset the Form"></p>
</form>
</body>
</html>
When displayed in a Web browser, the example above would look something like this:
- Default values: Text boxes can have a default value that appears when the webpage first displays and before the visitor types anything by using the value= attribute. For example, if you wanted them to type in their website's address, and you wanted to save them having to type http://, you would use the following code: <input type=text name="Website" value="http://"> Setting the size: If you want your visitors to enter a long string of text such as a website address, or a short amount of text such as their postal code, you can size the text box appropriately using the size= attribute. The value of the attribute is the number of characters that should be displayed. For example, the following code produces a text box that's 4 characters long: <input type=text name="Postcode" size=4>
- Limiting the length of text: Sometimes you might like to limit the maximum number of characters a visitor can type. To do this, use the maxlength= attribute: <input type=text name="Age" maxlength=3>
Text Areas
If you want visitors to be able to type large amounts of text, a standard text box is not sufficient since they only support a single line. In this case, you would use the <textarea> and </textarea> elements.
You can specify the size of the text area box based upon the number of lines using the rows= attribute and the number of columns using the columns= attribute.
Don't forget to specify the end element ( </textarea> ). Any text between the start and end elements becomes the default text.
|
