[Tutorial] Forms

[krishon]

To make a fully working form, there are several things that u need to plan out. First u can make forms that requires the user to input text into a text box. The other form u can make is by clicking on a selection.

First of all, like all html tags, u need to start the form off with <form>.
Inside the form tag u can put different attributes, look at the example below:

code:

<form method="post" action="http://metallicsurge.com/cgi-sys/FormMail.cgi"> <input type="hidden" name="recipient" value="quotes@metallicsurge.com"> <INPUT TYPE="hidden" NAME="redirect" VALUE="http://www.metallicsurge.com/thankyou.html">

As u can see there's a method attribute. It can be either post or get in those quotes, but post is the best for forms. The action there is used to run cgi script that processes the information from the form and sends an email. There are two hidden input types, with the names of recipient and redirect. The recipient one is used to send the processed info to quotes@metallicsurge.com, while the other one makes a news page appear.

Now we get into the actual form making. I will explain the text boxes first.

code:

<tr>     <td>Company / Organization</td>     <td> <input name="company" type="text" size="25">     </td> </tr>

[/code]

Company / Organization

In this example, i put the text box inside a table, so the overall form is nice and neat. As you can remember, there's an input name, which is a unique name that u can put in to tell urself wut the info in the box is aobut. In this case, it is company, which tells us the name of the company (no duh, lol). The next type is text which is used to make a text box appear. The size will change the width of the textbox.

code:

<input name="AreaCode" type="text" size="6" maxlength="3">

<form>
phone
</form>
This one is about the same except that there is a maxlength attribute. It is used to limit the number of characters in the textbox. When you ask a user to put in a telepholne number, this works very well.

code:

<textarea name="CommentsQuestions" cols="50" rows="6"></textarea>

<form>
Put comments<textarea name="CommentsQuestions" cols="50" rows="6"></textarea>
<form>
This is used for larger inputs from the user. In this case, it is used to get comments from the user. This is much like the message body in this forum, where u type ur message. The size can be changed by altering the cols and rows number.

K, the text stuff seems ez enough dusn't it? well now lets go on to a bit more difficult stuff.

The first thing is the pulldown selection. Here's a small example:

code:

<tr>     <td><p> </p>       <p>How would you like your request responded to?</p>       <p> </p></td>     <td>         <select name="Respondtype">           <option selected>Telephone           <option>Email         </select>       </td>   </tr>

As you can see u have the question, but make sure u have the form tags in there too. Select name is just like the input name from the text area, where u name the textarea. Now there are the option tags. U do not need to put a close tag on them, just like a list item <LI> in lists. the selected attribute just makes that option the default.

Ez enough? Now for the check boxes:

code:

<input type="hidden" name="hiddenvalue" value="hiddenstuff"><br>    <input type="Checkbox" name="check1" value="yup" checked>    <b>Checkbox 1 here</b><br><input type="Checkbox" name="check2" value="yup">    <b>Checkbox 2 here</b><br>

<form>





Checkbox 1 here


Checkbox 2 here

</form

The checkbox in quotes is needed to make the checkbox appear. Name is again a way to "label" the option. The checkbox 1 here and checkbox 2 here are the names that appear on the page beside the checkbox. The value will be a name which will appear at the top of the address when u hit the submit button.

Now for radio buttons, we're almost there:

code:

<input type="radio" name="radios" value="radio1" checked><b>This is radio button 1</b><br>    <input type="radio" name="radios" value="radio2"><b>This is radio button 2</b><br>    <input type="radio" name="radios" value="radio3"><b>This is radio button 3</b><br>

<form>
This is radio button 1


This is radio button 2


This is radio button 3

</form>

Everything is pretty much the same, except that the input type is radio instead of checkbox.

For every good form, u need a submit and reset button. Here is the code for the submit button:

code:

<input type="Submit" value="Take a Look" align="MIDDLE">

<form>

</form>

The input type this time is submit. The value will be the words that appear inside the submit button, just like the submit button in our forum. The align attribute just tells the button, in this case, to line up in the middle.

Now finally, for a reset button, here is the code:

code:

<input type=reset value="Reset" align="MIDDLE>

<form>
http://hotwired.lycos.com/webmonkey/99/30/index4a.html?tw=authoring[/url]

Hope this helps u ppl out there, lates

[JSBN]

Good. Maybe some more examples would be nice, also Visuals would also have been good.
You have been Awarded: The R +40 Award
+10 for any future Tutorials

[krishon]

nice, thx. now to finish my ocmputers exams, i'll put as many tutorials as i can. i'll put the visuals now, let me just edit the post.

[.blade2]

who is this hon guy? he's talkin shit bout every1's tutorials, he should be banned! and look- and about his form tutorial doesn't he know about cgi? you can't just copy and paste that stuff and expect it to work. you have to set up the server and all to make it work. i can't believe he got awarded those bitz for that. i mean somebody who knows what they are talkin about should make one and delete his. And is Metallic surge his site nyways? Cuz it says ted livington or somethin like that on the home page. I mean he just copied the code! Is that even legal?

Whatever. there will always be dumbasses and frauds like him in the world.

blade2

P.S. And how does he expect to make more tutorials when he doesn't even know what he is talkin about? or is there gonna be some other place he is gonna steal that from???

[krishon]

wtf r u talkin bout, i never said nething, i just added small comments, nothing negative bout other ppl's tutorial and ted and i made that web page. dun't say nething if u have no clue wuts goin on. and i know u need cgi code to process the stuff, i just didn't put it in the tutorial. maybe ur the idiot who should be banned

[Linux]

"<form method="post" action="http://metallicsurge.com/cgi-sys/FormMail.cgi">
<input type="hidden" name="recipient" value="quotes@metallicsurge.com">
<INPUT TYPE="hidden" NAME="redirect" VALUE="http://www.metallicsurge.com/thankyou.html">

ok so would i need to make a cgi file to tell the forum what to do? could i see an example of a cgi file and how to make one? i would like to make a forum that would email me when it is done

[wtd]

Linux wrote:

"<form method="post" action="http://metallicsurge.com/cgi-sys/FormMail.cgi">
<input type="hidden" name="recipient" value="quotes@metallicsurge.com">
<INPUT TYPE="hidden" NAME="redirect" VALUE="http://www.metallicsurge.com/thankyou.html">

ok so would i need to make a cgi file to tell the forum what to do? could i see an example of a cgi file and how to make one? i would like to make a forum that would email me when it is done

A simple Perl CGI script. It takes input from a form like so:

code:

<html> <head>    <title>Your name?</title> </head> <body>    <form method="POST" action="say_hello.pl">       <input type="text" id="username"/>       <input type="submit" id="submitbutton" value="Submit"/>    </form> </body> </html>

code:

#!/usr/bin/perl use strict; use CGI qw(:standard); print header; my $name = param('username'); print <<END_OF_HTML <html> <head>    <title>Hello, $name</title> </head> <body>    <h1>$name</h1> </body> </html> END_OF_HTML

[Linux]

no how would i make it email my address, would it be something like an amailer??? i have no clue

like his FormMail.cgi, would it just be a program that takes the info from the form and then automails it to him?

[r.m_spy]

Your missing 1 very important field.

code:

<p> PASSWORD: <input type="password" name="password" size="30" maxlenght="25" /></p>

a password makes those bullets when you type in the field, therefor not giving away thier password to anyone nearby.