What is this?

Forms can be used to get information or post it. A form can be set up to send the information entered to a certain e-mail or the place it in a certain place, like a message board or database. This requires CGI, perl, or PHP. Many free website servers supply their own code for formmail, but if it doesn't or you're working off a domain, you have to find a formmail script on-line. They can be bought or gotten for free, depending on the script. Forms will not work without a formmail script. See my Php Archive for a free formmail script or see my page of useful sites for good sites to get scripts or places to host forms.

Starting your Form | Contents of your Form | Hidden Inputs

Starting your Form

1. Type <form.

2. Type method=#, # being either get or post. When using formmail, post will be used.

3. Type action=script.url>, where script.url is the location of your script (again, you have to find a script, see above).

4. Type your hidden inputs and form's contents.

5. Type </form>.

When completed correctly, this will look like this:

<form method=post action=script.url>
Contents
</form>

Contents of your Form

Text Box | Password Box | Large Text Areas | Radio Buttons
Check Boxes | Menu | Upload Files | Submit Button | Reset Button | Input Styles

Text box:

1. Type the name of the text box, i.e. Name:

2. Type <input type=text.

3. Type Name=title, title being the unique name of the text box to be used by the server.

4. (optional) Type size=#, where # is how wide the text box will be in characters.

5. (optional) Type maxlength=#, where # is the maximum number of characters the text box will allow.

6. Type >.

When completed correctly, this tag will look like this in your code:

Name: <input type=text name=Name size=25 maxlength=30>

When completed correctly, this tag will look like this on your page:

Name:

Password Box:

1. Type the name of the password box, i.e. Password:

2. Type <input type=password.

3. Type Name=title, title being the unique name of the text box to be used by the server.

4. (optional) Type size=#, where # is how wide the text box will be in characters.

5. (optional) Type maxlength=#, where # is the maximum number of characters the text box will allow.

6. Type >.

When completed correctly, this tag will look like this in your code:

Password: <input type=password name=Password size=25 maxlength=30>

When completed correctly, this tag will look like this on your page:

Password:

Large Text Area:

1. Type the name of the text box, i.e. Comments:

2. Type <textarea.

3. Type Name=title, title being the unique name of the text box to be used by the server.

4. (optional) Type rows=#, where # is the height of the text box in characters.

5. (optional) Type cols=#, where # is the width of the text box in characters.

6. (optional) Type wrap so that the characters will automatically be wrapped within the text box. 7. Type >.

8. Type the contents of your text box.

9. Type </textarea>.

When completed correctly, this tag will look like this in your code:

Comments: <textarea name=Comments rows=5 cols=30 wrap>
This is the contents of your text box.
</textarea>

When completed correctly, this tag will look like this on your page:

Comments: This is the contents of your text box.

Radio Buttons:

1. Type the name of the text box, i.e. Select one of the following:

2. Type <input type=radio.

3. Type Name=radioset, radioset being the unique name of the set of radio buttons to be used by the server.

4. Type value=data, where data is the name of that particular radio button.

5. (optional) Type checked, which will check that radio button by default when the page loads. Only do this on one radio button in a set.

6. Type >.

7. Type the name of the radio button.

8. Repeat steps 2-7 for each radio button in the set.

When completed correctly, this tag will look like this in your code:

What is your favorite holiday?
<input type=radio name=Holiday value=Christmas checked> Christmas
<input type=radio name=Holiday value=Easter> Easter
<input type=radio name=Holiday value=Halloween> Halloween
<input type=radio name=Holiday value=Valentine> St. Valentine's Day


When completed correctly, this tag will look like this on your page:

What is your favorite holiday?
Christmas
Easter
Halloween
St. Valentine's Day

Check Boxes:

1. Type the name of the check boxes, i.e. Select one or more of the following:

2. Type <input type=checkbox.

3. Type Name=title, title being the unique name of the set of check boxes to be used by the server.

4. Type value=value, where value is the name of that particular check box.

5. (optional) Type checked, which will check that check box by default when the page loads. Unlike radio buttons, you may do this on more than one check box.

6. Type >.

7. Type the name of the check box.

8. Repeat steps 2-7 for each check box in the set.

When completed correctly, this tag will look like this in your code:

What do you enjoy doing?
<input type=checkbox name=Enjoy value=Sports checked> Sports
<input type=checkbox name=Enjoy value=Music> Music
<input type=checkbox name=Enjoy value=Reading> Reading
<input type=checkbox name=Enjoy value=Sleeping> Sleeping


When completed correctly, this tag will look like this on your page:

What do you enjoy doing?
Sports
Music
Reading
Sleeping

Menu:

1. Type the name of the menu, i.e. How old are you?:

2. Type <select.

3. Type Name=title, title being the unique name of the menu to be used by the server.

4. Type size=#, where # is the number of options visible at one time.

5. (optional) Type multiple, which will allow the user to check more than one option.

6. Type >.

7. Type <option.

8. (optional> Type selected to make that particular option selected by default.

9. Type value=data, where data is the name of that option to sent by the server when selected.

10. Type >.

11. Type the option name as you wish it to appear in the menu.

12. Repeat steps 7-11 for each option on the menu.

13. Type </select>.

When completed correctly, this tag will look like this in your code:

How old are you?
<select name=age size=4 multiple>
<option value=10><10
<option value=10-15>10-15
<option value=16-20>16-20
<option value=21-25>21-25
<option value=26-30>26-30
<option value=31-40>31-40
<option value=40+>40+
</select>


When completed correctly, this tag will look like this on your page:

How old are you?

<10
10-15
16-20
21-25
26-30
31-40
40+

Upload Files:

1. Make sure you have method=post in the form. The upload will not work with the get. 2. Type the name of the upload, i.e. What file do you wish to upload?:

3. Type <input type=file.

4. Type enctype=multipart/form-data,

5. Type name=title, where title identifies to the server the files being uploaded. 6. (optional)Type size=#, where # is the number width of the text box.

7. Type >.

When completed correctly, this tag will look like this in your code:

What file do you wish to upload? <input type=file enctype=multipart/form-data name=files size=25>


When completed correctly, this tag will look like this on your page:

What file do you wish to upload?

Submit button:

1. Type <input type=submit.

2. (optional) Type value=submit, where submit is what the button will read, i.e. Join!.

3. (optional) Type "style=color:color; font-family:font ;font-size:12pt; background-color:color", where color is the color of the text. font-family is the font of the text, font-size is the size of the text, and background color is the background color of the button. Any of these attributes may be removed as long as their is a semi-colon between the remaining. This style attribute can also be used on any input type with a text box, including text boxes, password boxes, and text areas.

4. Type >.

When completed correctly, this tag will look like this in your code:

<input type=submit value=Join! style="color:#c6b5de;font-family: Garamond, Times New Roman, Arial;font-size:12pt;background-color:black">

When completed correctly, this tag will look like this on your page:

Submit button with an image:

1. Type <button name=submit value=submit type=submit.

2. (optional) Type "style=color:color;font-family: font;font-size:12pt;background-color:color", where color is the color of the text. font-family is the font of the text, font-size is the size of the text, and background color is the background color of the button. Any of these attributes may be removed as long as their is a semi-colon between the remaining. This style attribute can also be used on any input type with a text box, including text boxes, password boxes, and text areas.

3. Type >. 4. Type <img src=image.gif>, where image.gif is the location of the image. If you wish, add any of the other image attributes.

5. Type ></button>.

When completed correctly, this tag will look like this in your code:

<button name=submit value=submit type=submit style="color:#c6b5de;font-family: Garamond, Times New Roman, Arial;font-size:12pt;background-color:black">
<img src=images/Join.gif>
</button>

When completed correctly, this tag will look like this on your page:

Reset button:

1. Type <input type=reset.

2. (optional) Type value=reset_message, where reset_message is what the button will read, i.e. Reset Form. If there is a space in the reset message, be sure to surround it in quotes. Single word messages do not require quotes.

3. (optional) Type "style=color:color;font-family: font;font-size:12pt;background-color:color", where color is the color of the text. font-family is the font of the text, font-size is the size of the text, and background color is the background color of the button. Any of these attributes may be removed as long as there is a semi-colon between the remaining. This style attribute can also be used on any input type with a text box, including text boxes, password boxes, and text areas.

4. Type >.

When completed correctly, this tag will look like this in your code:

<input type=reset value="Reset Form" style="color:#c6b5de;font-family: Garamond, Times New Roman, Arial;font-size:12pt;background-color:black">

When completed correctly, this tag will look like this on your page:

Reset button with an image:

1. Type <button name=reset value=reset type=reset.

2. (optional) Type "style=color:color;font-family: font;font-size:12pt;background-color:color", where color is the color of the text. font-family is the font of the text, font-size is the size of the text, and background color is the background color of the button. Any of these attributes may be removed as long as there is a semi-colon between the remaining. This style attribute can also be used on any input type with a text box, including text boxes, password boxes, and text areas.

3. Type >. 4. Type <img src=image.gif>, where image.gif is the location of the image. If you wish, add any of the other image attributes.

5. Type ></button>.

When completed correctly, this tag will look like this in your code:

<button name=reset value=reset type=reset style="color:#c6b5de;font-family: Garamond, Times New Roman, Arial;font-size:12pt;background-color:black">
<img src=images/Reset.gif>
</button>

When completed correctly, this tag will look like this on your page:

Input Styles:
Input styles can be used to make buttons, radio buttons, menus, text boxes, text areas, etc. look more interesting than black and white. Also described under Submit Button and Reset Button, a style attribute can be added to each individual input tag:

1. Place your cursor in the <input> tag after the type attribute.

2. Type "style=color:color;font-family: font;font-size:12pt;background-color:color", where color is the color of the text. font-family is the font of the text, font-size is the size of the text, and background color is the background color of the button. Any of these attributes may be removed as long as there is a semi-colon between the remaining.

When completed, this tag will look like this in your code: (this is with an example of a simple text box, but it can be used with any input or button)

<input type=text value=text style="color:#c6b5de; font-family:Garamond, Times New Roman, Arial; font-size:12pt; background-color:black">

When completed this tag will look like this on your page:

Or attributes can be placed in a Stylesheet that will automatically affect each input or button on every page to which the stylesheet is linked. If a stylesheet is used, the style attribute on the individual inputs and buttons will not apply. See the Stylesheets page.

Hidden Inputs

What is this?

Hidden inputs determine many useful things about a form. They are not visible in the form, that is to say, they are not visible like a text box or a menu. They determine how the form works. In some cgi scripts, these are worked in and they are needed, but otherwise, they are useful. Hidden inputs can be placed anywhere between the formtags, but right after the open form tag is the most convenient place to place them.

End-display:
End-display tells where the browser will go after the "submit" button is pushed.
Type <input type=hidden name=end_display value=page.html>, where page.html is the url of the page you wish it go to, i.e. Thankyou.html.

Required:
Required tells the server which of the inputs are required. If the inputs entered are not filled in, the form will show an error message (depending the cgi or php script you are using).
Type <input type=hidden name=required value=name,email,age>. Be sure that if there are any spaces in the value, to surround the value with quotes.

Order:
Order tells the server in which order to display the inputs when it sends the results to the specified e-mail address.
Type <input type=hidden name=order value=name,email,age>. Be sure that if there are any spaces in the value, to surround the value with quotes.

Email to:
Email to tells the server which e-mail address(es) to send the results of the form to.
Type <input type=hidden name=email_to value=yourname@yourserver.com,othername@otherserver.net>