Ric's profileHTML TutorialBlogLists Tools Help

Blog


    12 July

    Forms

    PLEASE NOTE FORMS DO NOT WORK ON MSN SPACES.

    Input Box

    To insert an input box into your website you will need the following <input type="text">. This will produce a box like this:

    There are many ways to customise the text box, firstly you will need a name for the box, so when you send your form off the reciever will know what the value in the box is, e.g. name="first name". You can also edit the size of the box, this is done with the script size="25", changing 25 to whatever you want. Say you want to limit the amount of characters a person can enter into the field, well, you can, with the script maxlength="60", changing the 60 to whatever you want. An example script is <input type="text" size="25" maxlength="60">


    Text Area

    To put a text area into your website just put <textarea></textarea>. This will produce this box:

    As with all items on your forms page, it will need a name e.g. name="comments". You can also change the size of the box by these two scripts, one is rows="5" and cols="30", rows is the height of the box (in lines) and cols is the width of the box. An example script is <textarea name="comments" rows="5" cols="30"></textarea> If you want to put some text into the box as defult just type whatever you want in between the two tags.


    Radio Buttons

    Radio buttons are normally used in two's or more. This is because radio buttons are used for questions with only one answer e.g. Male or Female? To put a radio button on your site use this code, <input type="radio">, this produces this radio button:

    There is 1 thing all radio buttons need, and that is a name, this defines radio buttons into groups, for example, you want to ask if a user is male or female. The name of the button could be gender, the name gender would be assigned to both buttons. Then you would need a value for each radio button, in the gender case one is value="male" and the other is value="female". Other questions will have a different names. If you want to preselect an option the just add checked to one of the radio button. An example is <input type="radio" name="gender" value="male" checked> MALE <br> <input type="radio" name="gender" value="female"> FEMALE, this will produce this:
    MALE
    FEMALE

    Check Boxes

    Check Boxes are for questions with more than one answer, for example, what food do you like? Pizza, Chicken, Chips? To put a checkbox into your website then just use this script <input type="checkbox">. This produces this:

    Editing this checkbox is pretty much the same as other items in a form. There is a name, which is applied to all options for each question, with a different name for each questions options. Value is the value given to each checkbox, in the food question it could be value="pizza", value="chicken" and value="chips". Again if you want any of the options to be pre-selected just add checked to the checkbox. An example is <input type="checkbox" name="food" value="pizza" checked> PIZZA <br> <input type="checkbox" name="food" value="chicken"> CHICKEN <br> <input type="checkbox" name="food" value="chips"> CHIPS, this will produce:
    PIZZA
    CHICKEN
    CHIPS

    Drop Down Boxes

    To add a drop down box to your site just add <select><option>Option 1</select>, this will produce:
    Option 1
    You can give the drop down box a name, as with all items in a form. You can also add multiple options, to do this just add <option>Option # as many times as you require. If you want to have an option pre-selected just add selected to an option tag e.g. <option selected>. An example is <select name="rating"><option>Great<option selected>Good<option>Average<option>Poor<option>Pants</select>, this produces:
    GreatGoodAveragePoorPants

    Submit & Reset Buttons

    To put a submit button onto your website involves a simple script, this is <input type="submit">, this produces:

    You can edit the text that appears in this button (or the Reset button below by adding value="Submit" to the submit tag e.g. <input type="submit" value="Submit">, this produces:
    .
    To add a reset button to your site also involves a simple script, this is <input type="reset">. This produces

    Putting It All Together

    All the items in your form need to be encased in a form tag. This tells your Internet Explorer that everything inbetween the form tags needs to be sent off when Submit is pressed. An example is <form method="post" action="/cgi-bin/mail> </form>. Please note, you cannot just add this script to your site and it works, you need to have a CGI program to handle the form when it is submitted. You can either get a program from CGI Resource Index, check with your web server to see if the have a service that can forward your forms to your e-mail or wherever or produce your own CGI script (this may get covered in my Expert section).

    An example script is:

    <form method="post" action="cgi-bin/mail">
    NAME: <br><input type="text" size="25" maxlength="60"><br><br>
    COMMENTS: <br>
    <textarea name="comments" rows="5" cols="30">Please leave your comments here...</textarea><br><br>
    SEX: <br>
    <input type="radio" name="gender" value="male" checked> MALE<br>
    <input type="radio" name="gender" value="female"> FEMALE<br><br>
    WHAT FOODS DO YOU LIKE?:<br>
    <input type="checkbox" name="food" value="pizza" checked> PIZZA <br>
    <input type="checkbox" name="food" value="chicken"> CHICKEN <br>
    <input type="checkbox" name="food" value="chips"> CHIPS<br><br>
    WHAT DO YOU THINK OF MY SITE?<br>
    <select name="rating">
    <option>Great
    <option selected>Good
    <option>Average
    <option>Poor
    <option>Pants
    </select>
    <br>
    <br>
    <center><input type="submit" value="Submit"><input type="reset"></center>
    </form>

    This produces:

    NAME:


    COMMENTS:
    Please leave your comments here...

    SEX:
    MALE
    FEMALE

    WHAT FOODS DO YOU LIKE?:
    PIZZA
    CHICKEN
    CHIPS

    WHAT DO YOU THINK OF MY SITE?
    GreatGoodAveragePoorPants


    Thats all for now. Have fun!



    TOP OF PAGE MAIN PAGE SIGN GUESTBOOK
    MSN Alerts VIEW WEB PAGE © RIC-KEEPTHECHANGE123

    Comments

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.

    To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in


    Don't have a Windows Live ID? Sign up

    Trackbacks

    The trackback URL for this entry is:
    http://keepthechange123.spaces.live.com/blog/cns!F6A299334D3EAB8D!198.trak
    Weblogs that reference this entry
    • None