USING FORMS

A form is as it sounds: a page where a user can provide information about a various topic or person. There is much to forms, and I will break each control down so that you may learn all the controls. Then we will create a very simple e-mail form, that doesn't send any information, but it will go to a "Sent" page just for your learning experience.


     
You must first know the basic format of forms, and the format below is what we'll be using. We will replace information when necessary to get our forms to work.

<form name="formname" method="how information is sent" action="action after form is submitted">
CONTROLS
</form>
     

Controls allow users to interact with the form's given information, whether it is a question, a thought, etc. What you put in the VALUE attribute would be sent to you, following what the user inputed. My quizzes uses a control, called a radio control. These are used when the user is required to provide only one answer, and cannot be undone unless more radio controls are provided, or a Reset button is provided, which will will learn about. A dot fills in this control.

<form name="formname" method="how information is sent" action="action after form is submitted">
<input type="radio" name="radio" value="Radio">Radio
</form>
Radio
     
It's opposite control, which will allow you to choose multiple selections, or undo a selection without needing multiple controls, is a checkbox control. A checkmark fills in this control.
<form name="formname" method="how information is sent" action="action after form is submitted">
<input type="checkbox" name="checkbox" value="Checkbox">Checkbox
</form>
Checkbox
     
The next control allows a user to type in information in a rectangle. This control, which only is a one row control, is called a textfield control If you want to provide the user with security, you can mask the text they type in. This means that instead of seeing their text as they type it, they will see asteriks instead. Just replace "text" with "password".
<form name="formname" method="how information is sent" action="action after form is submitted">
<input type="text" name="textfield" value="textfield">
</form>
     The field below gives you an example of masking text.
     When your users need a bigger field to fill out information, a text area control is needed.
<form name="formname" method="how information is sent" action="action after form is submitted">
<textarea>Textarea</textarea>
</form>
     

NOTE: You should not fill in textfields or text areas. Allow the user to do this him/herself.
     
The final control is the most important. It is simply an input button control. Input buttons are responsible for sending the information to you. The Submit button sends the form, while the Reset button clears every field in case the user made a mistake and wishs to correct it. Both buttons are demonstrated below, although they will not carry out their functions. You'll have to wait until the e-mail form to see this in effect.

<form name="formname" method="how information is sent" action="action after form is submitted">
<input type="submit" name="submit" value=" Submit ">
</form>
<form name="formname" method="how information is sent" action="action after form is submitted">
<input type="reset" name="reset" value=" Reset ">
</form>
       
     

There isn't anything new in the form except a few attributes, which are pretty self-explainatory. Before creating this e-mail form, you should create another web document and include "Your message has been sent." in the body. Name this file email2.htm as it will be used to return a confirmation telling the user their e-mail has been sent.

<div style="text-align: justify;"></div><span style="background-color: white;"><div style="text-align: justify;">&lt;form data-blogger-escaped-action="email2.htm" method="post" name="email"&gt;&lt;center&gt;E-mail Form</div><div style="text-align: justify;">&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;If you want a response, you must complete every field of this e-mail </div>message. All fields required are marked by "*." Full Name: <div style="text-align: justify;">&lt;br /&gt;E-mail Address: &lt;input maxlength="40" name="E-Mail Address:" size="40" type="text" /&gt; *</div>&lt;input maxlength="20" name="Full Name:" size="20" type="text" /&gt; * Type your comment, suggestion, etc. here. <div style="text-align: justify;">&lt;input name="Reset" type="reset" value=" Reset " /&gt;</div>&lt;textarea cols="60" name="Message:" rows="5"&gt;&lt;/textarea&gt; * &lt;input name="Submit" type="submit" value=" Submit " /&gt;&amp;nbsp;&amp;nbsp; <div style="text-align: justify;">&lt;/center&gt;&lt;/form&gt;</div></span>

Share this

Related Posts

Previous
Next Post »