Forms...
Forms allow you to add interactivity to your web documents by way of the <FORM> tag. With the form tag you can add to your web pages a guestbook, order forms, surveys, get feedback or whatever.
The basic construction of a html form is this...
<FORM> begin a form
<INPUT> ask for information in one of several different ways...
<INPUT> ...there can be as many input areas as you wish
</FORM> end a form
The <INPUT> tag provides the user with various ways of inputting information. There are several different <INPUT> tags.
Form Input...
Text
The most common TYPE of form <INPUT> is TEXT.
<INPUT TYPE=TEXT>
Every input needs a NAME.
<INPUT TYPE=TEXT NAME="ADDRESS">
When the user types in his address (for example 1313 Mockingbird Lane), it will become the input's value and be paired with ADDRESS so the end result after running it through Mailto Formatter will be ADDRESS=1313 Mockingbird Lane.
We can if we want, type in a VALUE.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St">
This will automatically pair the value 44 Cherry St with the name ADDRESS, unless the user changes it. Note- be sure to use quotes where I've specified.
We can specify the size of the text input box.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30>
The default value is 20.
If we want, we can specify how many characters a user can input.
Go ahead and try to input more than 10 characters in the text box below:
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>
Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the same, except it dispays *** instead of the actual input. The browser will send you the input, it just won't display it.
<INPUT TYPE=PASSWORD>
Remember that each <INPUT> must have a NAME.
<INPUT TYPE=PASSWORD NAME="USER PASSWORD">
SIZE, VALUE, and MAXLENGTH modifiers/attributes work here also. By the way, a <TAG> tells the browser to do something.
Radio Buttons and Check Boxes
Radio buttons allow the user to choose one of several options. Check Boxes allow the user to choose one or more or all of the options.
First let's build some Radio Buttons.
<INPUT TYPE=RADIO NAME="POSITION">
Now add 2 more.
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">
Hmmm... I suppose we should put a line break after each one.
<INPUT TYPE=RADIO NAME="POSITION"><BR>
<INPUT TYPE=RADIO NAME="POSITION"><BR>
<INPUT TYPE=RADIO NAME="POSITION"><P>
Note that each input has the same name. The reason will become apparent very shortly.
Each of the Radio Buttons must be assigned a VALUE.
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB"><BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"><BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"><P>
Now label each button.
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB"> Powerbuilder Developer<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"> Database Administrator<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"> None of the above<P>
You can also modify these labels with other html tags if you wish.
Essentially your Radio Buttons are done. You can tidy things up by adding a statement above the buttons, and if you want, choose a default selection (optional).
What is your position within the company?<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB" CHECKED> Powerbuilder Developer<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"> Database Administrator<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"> None of the above<P>
The user of course can only choose 1 option. Their choice will be returned to you as the name/value pair POSITION=PB (or whichever they pick).
Building Check Boxes is pretty much the same thing. Start with this.
<INPUT TYPE=CHECKBOX NAME="PB">
Add 3 more, but this time give each one a different NAME. (Also add in line breaks if you want)
<INPUT TYPE=CHECKBOX NAME="PB"><BR>
<INPUT TYPE=CHECKBOX NAME="DBA"><BR>
<INPUT TYPE=CHECKBOX NAME="NOTA"><BR>
Each Check Box gets the same VALUE.
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"><BR>
Note- For Check Boxes the NAME changes and the VALUE stays the same and with Radio Buttons, the VALUE changes but the NAME stays the same. Don't feel bad, my simple mind still gets confused.
OK, let's label each box.
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES"> Powerbuilder Developer<BR>
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES"> Database Administrator<BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"> None of the above<BR>
And lastly, you may want to add a little something above your check boxes and maybe pick a couple defaults.
What positions do you occupy within the company?<BR>
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES" CHECKED> Powerbuilder Developer<BR>
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES" CHECKED> Database Administrator<BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"> None of the above<BR>
The user can choose 1, 2, none or all of the options. Their choices will be returned to you as the name/value pairs... PB=YES
DBA=YES
(or what ever they choose... if they choose nothing, nothing will be returned to you)
Your own HTML page...
We will now construct the feedback page we created in Chapter 11. Open the blank page "feedback.htm" in Notepad, and add the following (the blue text is what to add).
<html>
<body background="bgnd.gif" bgcolor=#FFFFFF>
<center><h1>Feedback Form</h1></center>
<br>
<form>
<b>My name is: </b><input type=text name="name">
<p>
<b>I work as a:</b><br>
<input type=radio name="position" value="Developer" checked>Developer<br>
<input type=radio name="position" value="ProjMan">Project Manager<br>
<input type=radio name="position" value="TechMan">Technical Manager<br>
<input type=radio name="position" value="NOTA">None of the above
</p>
<p>
<b>When it comes to web browsers:</b><br>
<input type=checkbox name="Netscape" checked>I use Netscape Navigator<br>
<input type=radio name="NetscapeVer" value="2.0">version 2.0<br>
<input type=radio name="NetscapeVer" value="3.0" checked>version 3.0<br>
<input type=checkbox name="IExplorer">I use Microsoft Internet Explorer<br>
<input type=radio name="IEVer" value="2.0">version 2.0<br>
<input type=radio name="IEVer" value="3.0">version 3.0<br>
</p>
</body>
</html>
Forms Continued
Pull Down and Scrolling Lists
The next type of input is a Pull Down List. With this type you use <SELECT> instead of <INPUT> and it has a closing tag.
<SELECT>
</SELECT>
Don't forget to give it a name.
<SELECT NAME="POSITION">
</SELECT>
Next add a few options.
<SELECT NAME="POSITION">
<OPTION>Powerbuilder Developer
<OPTION>Database Administrator
<OPTION>None of the above
</SELECT>
And give each <OPTION> a VALUE.
<SELECT NAME="POSITION">
<OPTION VALUE="PB">Powerbuilder Developer
<OPTION VALUE="DBA">Database Administrator
<OPTION VALUE="NOTA">None of the above
</SELECT>
The default option is the one that is listed first.
We can specify a default other than the first option in the list.
<SELECT NAME="POSITION">
<OPTION VALUE="PB">Powerbuilder Developer
<OPTION VALUE="DBA" SELECTED>Database Administrator
<OPTION VALUE="NOTA">None of the above
</SELECT>
A Scrolling List is very similar in construction to a Pull Down List. We'll add a few more options first. Then, all we do to turn it into a Scrolling List is add a SIZE attribute to the <SELECT> tag.
<SELECT NAME="POSITION" SIZE=4>
<OPTION VALUE="PB">Powerbuilder Developer
<OPTION VALUE="DBA">Database Administrator
<OPTION VALUE="VB">Visual Basic Developer
<OPTION VALUE="ADMIN">Administration staff
<OPTION VALUE="JANITOR">Janitor
<OPTION VALUE="NOTA">None of the above
</SELECT>
The SIZE is simply how many options show in the window.
Again, the default value is the first <OPTION>, and again we can change that by selecting one.
<SELECT NAME="POSITION" SIZE=4>
<OPTION VALUE="PB">Powerbuilder Developer
<OPTION VALUE="DBA" SELECTED>Database Administrator
<OPTION VALUE="VB">Visual Basic Developer
<OPTION VALUE="ADMIN">Administration staff
<OPTION VALUE="JANITOR">Janitor
<OPTION VALUE="NOTA">None of the above
</SELECT>
Textarea
A very useful type of input is <TEXTAREA>.
<TEXTAREA NAME="COMMENTS">
</TEXTAREA>
You control the size of the box like so...
<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50>
</TEXTAREA>
ROWS is the height, COLS is the width.
A good attribute to include in <TEXTAREA> is WRAP. Some browsers do not understand it, but if that's the case, they will just ignore it.
Go ahead and type in the boxes...
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=VIRTUAL>
</TEXTAREA>
WRAP=VIRTUAL means that the text in the box wraps, but it is sent as one long continuous string.
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=PHYSICAL>
</TEXTAREA>
WRAP=PHYSICAL means that the text in the box wraps, and it is sent that way too.
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=OFF>
</TEXTAREA>
This is the default.
WRAP=OFF means that the text in the box does not wrap, but it is sent exactly the way it was typed in (like the little man a few textareas back).
Your own HTML page...
Open the page "feedback.htm" in Notepad, and add the following (the blue text is what to add).
<html>
<body background="bgnd.gif">
<center><h1>Feedback Form</h1></center>
<br>
<form>
<b>My name is: </b><input type=text name="name">
<p>
<b>I work as a:</b><br>
.
.
</p>
<p>
<b>When it comes to web browsers:</b><br>
.
.
</p>
<b>I rate your site as:</b><br>
<select name="Rating">
<option value="Wow">Wow! How did you do it?
<option value="good">Really good
<option value="interesting">Interesting
<option value="hmmm">Hmmm - seen better
<option value="tryagain">Try again bud!
</select>
</p>
<p>
<b>Comments:</b><br>
<textarea name="comments" rows="6" cols="50" wrap="physical">
</textarea>
</p>
</body>
</html>
Save the file.
Forms Continued
Hidden fields
Yet another type of input is HIDDEN input.
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Company Position Form 1">
A HIDDEN input is a name/value pair that is returned to you but does not show up anywhere on the web page. The hidden input above is needed for use with Mailto Formatter.
Let's suppose you were a company trying to generate leads for a new product. You have a standard form for gathering information... name, company, phone, products interested in, etc. The only problem is there are 6 slightly different versions of the form in 6 slightly different places. You need to know what's coming from where. What to do?
You could add a HIDDEN input to your forms like so...
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 1"> ...for the first version
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 2"> ...for the second version
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 3"> ...for the third version
And so on and so forth.
By the way, it doesn't matter what the name/value pair in the hidden input is (or any input for that matter). I have just been using "FORMNAME" because it saved me some typing. This would be a perfectly legitimate HIDDEN input...
<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ...You would get back E=Mc^2
HIDDEN inputs are also useful for cgi scripts. For example, many Internet Service Providers have a script you can have your forms sent to. It then spits the form back to you all nice and neat and ready for human consumption. The hidden input tells the cgi script who you are, where to send the parsed data, etc.
Submit and Reset Buttons
Last on the list are the SUBMIT and RESET buttons.
They really are very simple...
<INPUT TYPE=SUBMIT>
SUBMIT of course, sends the data...
...and RESET, clears the form.
<INPUT TYPE=RESET>
We can easily change what the buttons say.
<INPUT TYPE=SUBMIT VALUE="Send it away Ray!"><BR>
<INPUT TYPE=RESET VALUE="Clear the form Norm!"><P>
If necessary, the SUBMIT button can also have a NAME. You would need this if, for whatever reason, you had more than one SUBMIT button.
Next we must tell the browser where to send the data we gather and how to send it. There are two basic things you can do:
1) you can send the data to a cgi script for processing, or
2) you can have the data emailed to you.
As for the first, whoever wrote the script can tell you how the data should be sent.
The second, or mailto form should have the following attributes in the <FORM> tag.
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx" ENCTYPE="application/x-www-form-urlencoded">
This line is very important. The only thing you have to do is plug in your email address after mailto: The rest must be written exactly as shown. The words FORM, METHOD, POST & ACTION do not have to be capitalized but there must be a space between each attribute.. between FORM & METHOD, between POST & ACTION, and between .com" & ENCTYPE.
Unfortunately the data will be sent to you in this 'only useful to a computer' format...
FORMNAME=New+Entrant&NAME=R.U.+Havinfun&ADDRESS=1313+Mockingbird+Lane
&CITY=Beverly+Hills&STATE=CA
What you'll need is a program to turn it into 'useful to a human' format...
FORMNAME=New Entrant
NAME=R.U. Havinfun
ADDRESS=1313 Mockingbird Lane
CITY=Beverly Hills
STATE=CA
Mailto Formatter (1.3MB, Win 95) is an excellent little freeware utility that does this job quite nicely.
You can change this by editing what's in the <FORM> tag as follows...
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx?subject=Company feedback form" ENCTYPE="application/x-www-form-urlencoded">
Your own HTML page...
Open the page "feedback.htm" in Notepad, and add the following (the blue text is what to add).
<html>
<body background="bgnd.gif">
<center><h1>Feedback Form</h1></center>
<br>
<form method=post action="mailto:YOUREMAILADDRESS?subject=Feedback" enctype="text/plain">
<b>My name is: </b><input type=text name="name">
<p>
<b>I work as a:</b><br>
.
.
</p>
<p>
<b>When it comes to web browsers:</b><br>
.
.
</p>
<b>I rate your site as:</b><br>
.
.
</p>
<p>
<b>Comments:</b><br>
.
.
</p>
<p>
<input type="submit" value="Send it!"><br>
<input type="reset" value="Clear it!">
</p>
</body>
</html>
Save the file.
Forms allow you to add interactivity to your web documents by way of the <FORM> tag. With the form tag you can add to your web pages a guestbook, order forms, surveys, get feedback or whatever.
The basic construction of a html form is this...
<FORM> begin a form
<INPUT> ask for information in one of several different ways...
<INPUT> ...there can be as many input areas as you wish
</FORM> end a form
The <INPUT> tag provides the user with various ways of inputting information. There are several different <INPUT> tags.
Form Input...
Text
The most common TYPE of form <INPUT> is TEXT.
<INPUT TYPE=TEXT>
Every input needs a NAME.
<INPUT TYPE=TEXT NAME="ADDRESS">
When the user types in his address (for example 1313 Mockingbird Lane), it will become the input's value and be paired with ADDRESS so the end result after running it through Mailto Formatter will be ADDRESS=1313 Mockingbird Lane.
We can if we want, type in a VALUE.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St">
This will automatically pair the value 44 Cherry St with the name ADDRESS, unless the user changes it. Note- be sure to use quotes where I've specified.
We can specify the size of the text input box.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30>
The default value is 20.
If we want, we can specify how many characters a user can input.
Go ahead and try to input more than 10 characters in the text box below:
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>
Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the same, except it dispays *** instead of the actual input. The browser will send you the input, it just won't display it.
<INPUT TYPE=PASSWORD>
Remember that each <INPUT> must have a NAME.
<INPUT TYPE=PASSWORD NAME="USER PASSWORD">
SIZE, VALUE, and MAXLENGTH modifiers/attributes work here also. By the way, a <TAG> tells the browser to do something.
Radio Buttons and Check Boxes
Radio buttons allow the user to choose one of several options. Check Boxes allow the user to choose one or more or all of the options.
First let's build some Radio Buttons.
<INPUT TYPE=RADIO NAME="POSITION">
Now add 2 more.
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">
Hmmm... I suppose we should put a line break after each one.
<INPUT TYPE=RADIO NAME="POSITION"><BR>
<INPUT TYPE=RADIO NAME="POSITION"><BR>
<INPUT TYPE=RADIO NAME="POSITION"><P>
Note that each input has the same name. The reason will become apparent very shortly.
Each of the Radio Buttons must be assigned a VALUE.
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB"><BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"><BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"><P>
Now label each button.
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB"> Powerbuilder Developer<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"> Database Administrator<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"> None of the above<P>
You can also modify these labels with other html tags if you wish.
Essentially your Radio Buttons are done. You can tidy things up by adding a statement above the buttons, and if you want, choose a default selection (optional).
What is your position within the company?<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="PB" CHECKED> Powerbuilder Developer<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="DBA"> Database Administrator<BR>
<INPUT TYPE=RADIO NAME="POSITION" VALUE="NOTA"> None of the above<P>
The user of course can only choose 1 option. Their choice will be returned to you as the name/value pair POSITION=PB (or whichever they pick).
Building Check Boxes is pretty much the same thing. Start with this.
<INPUT TYPE=CHECKBOX NAME="PB">
Add 3 more, but this time give each one a different NAME. (Also add in line breaks if you want)
<INPUT TYPE=CHECKBOX NAME="PB"><BR>
<INPUT TYPE=CHECKBOX NAME="DBA"><BR>
<INPUT TYPE=CHECKBOX NAME="NOTA"><BR>
Each Check Box gets the same VALUE.
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES"><BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"><BR>
Note- For Check Boxes the NAME changes and the VALUE stays the same and with Radio Buttons, the VALUE changes but the NAME stays the same. Don't feel bad, my simple mind still gets confused.
OK, let's label each box.
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES"> Powerbuilder Developer<BR>
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES"> Database Administrator<BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"> None of the above<BR>
And lastly, you may want to add a little something above your check boxes and maybe pick a couple defaults.
What positions do you occupy within the company?<BR>
<INPUT TYPE=CHECKBOX NAME="PB" VALUE="YES" CHECKED> Powerbuilder Developer<BR>
<INPUT TYPE=CHECKBOX NAME="DBA" VALUE="YES" CHECKED> Database Administrator<BR>
<INPUT TYPE=CHECKBOX NAME="NOTA" VALUE="YES"> None of the above<BR>
The user can choose 1, 2, none or all of the options. Their choices will be returned to you as the name/value pairs... PB=YES
DBA=YES
(or what ever they choose... if they choose nothing, nothing will be returned to you)
Your own HTML page...
We will now construct the feedback page we created in Chapter 11. Open the blank page "feedback.htm" in Notepad, and add the following (the blue text is what to add).
<html>
<body background="bgnd.gif" bgcolor=#FFFFFF>
<center><h1>Feedback Form</h1></center>
<br>
<form>
<b>My name is: </b><input type=text name="name">
<p>
<b>I work as a:</b><br>
<input type=radio name="position" value="Developer" checked>Developer<br>
<input type=radio name="position" value="ProjMan">Project Manager<br>
<input type=radio name="position" value="TechMan">Technical Manager<br>
<input type=radio name="position" value="NOTA">None of the above
</p>
<p>
<b>When it comes to web browsers:</b><br>
<input type=checkbox name="Netscape" checked>I use Netscape Navigator<br>
<input type=radio name="NetscapeVer" value="2.0">version 2.0<br>
<input type=radio name="NetscapeVer" value="3.0" checked>version 3.0<br>
<input type=checkbox name="IExplorer">I use Microsoft Internet Explorer<br>
<input type=radio name="IEVer" value="2.0">version 2.0<br>
<input type=radio name="IEVer" value="3.0">version 3.0<br>
</p>
</body>
</html>
Forms Continued
Pull Down and Scrolling Lists
The next type of input is a Pull Down List. With this type you use <SELECT> instead of <INPUT> and it has a closing tag.
<SELECT>
</SELECT>
Don't forget to give it a name.
<SELECT NAME="POSITION">
</SELECT>
Next add a few options.
<SELECT NAME="POSITION">
<OPTION>Powerbuilder Developer
<OPTION>Database Administrator
<OPTION>None of the above
</SELECT>
And give each <OPTION> a VALUE.
<SELECT NAME="POSITION">
<OPTION VALUE="PB">Powerbuilder Developer
<OPTION VALUE="DBA">Database Administrator
<OPTION VALUE="NOTA">None of the above
</SELECT>
The default option is the one that is listed first.
We can specify a default other than the first option in the list.
<SELECT NAME="POSITION">
<OPTION VALUE="PB">Powerbuilder Developer
<OPTION VALUE="DBA" SELECTED>Database Administrator
<OPTION VALUE="NOTA">None of the above
</SELECT>
A Scrolling List is very similar in construction to a Pull Down List. We'll add a few more options first. Then, all we do to turn it into a Scrolling List is add a SIZE attribute to the <SELECT> tag.
<SELECT NAME="POSITION" SIZE=4>
<OPTION VALUE="PB">Powerbuilder Developer
<OPTION VALUE="DBA">Database Administrator
<OPTION VALUE="VB">Visual Basic Developer
<OPTION VALUE="ADMIN">Administration staff
<OPTION VALUE="JANITOR">Janitor
<OPTION VALUE="NOTA">None of the above
</SELECT>
The SIZE is simply how many options show in the window.
Again, the default value is the first <OPTION>, and again we can change that by selecting one.
<SELECT NAME="POSITION" SIZE=4>
<OPTION VALUE="PB">Powerbuilder Developer
<OPTION VALUE="DBA" SELECTED>Database Administrator
<OPTION VALUE="VB">Visual Basic Developer
<OPTION VALUE="ADMIN">Administration staff
<OPTION VALUE="JANITOR">Janitor
<OPTION VALUE="NOTA">None of the above
</SELECT>
Textarea
A very useful type of input is <TEXTAREA>.
<TEXTAREA NAME="COMMENTS">
</TEXTAREA>
You control the size of the box like so...
<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50>
</TEXTAREA>
ROWS is the height, COLS is the width.
A good attribute to include in <TEXTAREA> is WRAP. Some browsers do not understand it, but if that's the case, they will just ignore it.
Go ahead and type in the boxes...
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=VIRTUAL>
</TEXTAREA>
WRAP=VIRTUAL means that the text in the box wraps, but it is sent as one long continuous string.
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=PHYSICAL>
</TEXTAREA>
WRAP=PHYSICAL means that the text in the box wraps, and it is sent that way too.
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=OFF>
</TEXTAREA>
This is the default.
WRAP=OFF means that the text in the box does not wrap, but it is sent exactly the way it was typed in (like the little man a few textareas back).
Your own HTML page...
Open the page "feedback.htm" in Notepad, and add the following (the blue text is what to add).
<html>
<body background="bgnd.gif">
<center><h1>Feedback Form</h1></center>
<br>
<form>
<b>My name is: </b><input type=text name="name">
<p>
<b>I work as a:</b><br>
.
.
</p>
<p>
<b>When it comes to web browsers:</b><br>
.
.
</p>
<b>I rate your site as:</b><br>
<select name="Rating">
<option value="Wow">Wow! How did you do it?
<option value="good">Really good
<option value="interesting">Interesting
<option value="hmmm">Hmmm - seen better
<option value="tryagain">Try again bud!
</select>
</p>
<p>
<b>Comments:</b><br>
<textarea name="comments" rows="6" cols="50" wrap="physical">
</textarea>
</p>
</body>
</html>
Save the file.
Forms Continued
Hidden fields
Yet another type of input is HIDDEN input.
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Company Position Form 1">
A HIDDEN input is a name/value pair that is returned to you but does not show up anywhere on the web page. The hidden input above is needed for use with Mailto Formatter.
Let's suppose you were a company trying to generate leads for a new product. You have a standard form for gathering information... name, company, phone, products interested in, etc. The only problem is there are 6 slightly different versions of the form in 6 slightly different places. You need to know what's coming from where. What to do?
You could add a HIDDEN input to your forms like so...
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 1"> ...for the first version
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 2"> ...for the second version
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 3"> ...for the third version
And so on and so forth.
By the way, it doesn't matter what the name/value pair in the hidden input is (or any input for that matter). I have just been using "FORMNAME" because it saved me some typing. This would be a perfectly legitimate HIDDEN input...
<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> ...You would get back E=Mc^2
HIDDEN inputs are also useful for cgi scripts. For example, many Internet Service Providers have a script you can have your forms sent to. It then spits the form back to you all nice and neat and ready for human consumption. The hidden input tells the cgi script who you are, where to send the parsed data, etc.
Submit and Reset Buttons
Last on the list are the SUBMIT and RESET buttons.
They really are very simple...
<INPUT TYPE=SUBMIT>
SUBMIT of course, sends the data...
...and RESET, clears the form.
<INPUT TYPE=RESET>
We can easily change what the buttons say.
<INPUT TYPE=SUBMIT VALUE="Send it away Ray!"><BR>
<INPUT TYPE=RESET VALUE="Clear the form Norm!"><P>
If necessary, the SUBMIT button can also have a NAME. You would need this if, for whatever reason, you had more than one SUBMIT button.
Next we must tell the browser where to send the data we gather and how to send it. There are two basic things you can do:
1) you can send the data to a cgi script for processing, or
2) you can have the data emailed to you.
As for the first, whoever wrote the script can tell you how the data should be sent.
The second, or mailto form should have the following attributes in the <FORM> tag.
Note- Microsoft's Internet Explorer 3.0 does not support mailto forms. When you try to submit the information, the new mail message window pops up. Explorer does however support forms sent to a CGI script.
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx" ENCTYPE="application/x-www-form-urlencoded">
This line is very important. The only thing you have to do is plug in your email address after mailto: The rest must be written exactly as shown. The words FORM, METHOD, POST & ACTION do not have to be capitalized but there must be a space between each attribute.. between FORM & METHOD, between POST & ACTION, and between .com" & ENCTYPE.
Unfortunately the data will be sent to you in this 'only useful to a computer' format...
FORMNAME=New+Entrant&NAME=R.U.+Havinfun&ADDRESS=1313+Mockingbird+Lane
&CITY=Beverly+Hills&STATE=CA
What you'll need is a program to turn it into 'useful to a human' format...
FORMNAME=New Entrant
NAME=R.U. Havinfun
ADDRESS=1313 Mockingbird Lane
CITY=Beverly Hills
STATE=CA
Mailto Formatter (1.3MB, Win 95) is an excellent little freeware utility that does this job quite nicely.
|
You can change this by editing what's in the <FORM> tag as follows...
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx?subject=Company feedback form" ENCTYPE="application/x-www-form-urlencoded">
Your own HTML page...
Open the page "feedback.htm" in Notepad, and add the following (the blue text is what to add).
<html>
<body background="bgnd.gif">
<center><h1>Feedback Form</h1></center>
<br>
<form method=post action="mailto:YOUREMAILADDRESS?subject=Feedback" enctype="text/plain">
<b>My name is: </b><input type=text name="name">
<p>
<b>I work as a:</b><br>
.
.
</p>
<p>
<b>When it comes to web browsers:</b><br>
.
.
</p>
<b>I rate your site as:</b><br>
.
.
</p>
<p>
<b>Comments:</b><br>
.
.
</p>
<p>
<input type="submit" value="Send it!"><br>
<input type="reset" value="Clear it!">
</p>
</body>
</html>
Save the file.
No comments:
Post a Comment