www.webdeveloper.com
Results 1 to 13 of 13

Thread: Help!

  1. #1
    Join Date
    Aug 2004
    Posts
    6

    Help!

    I'm creating a form at http://www.spookybetty.com/order.html and have encountered some problems along the way. After a lot of fiddling about, I'm now using http://www.thesitewizard.com to help me out with the php element, as I know bugger all about php. Its during the html where I've become stuck though.

    I think I've got an error in the code, but I can't figure out how to fix it. I've got boxes for people to enter information in (i.e "name", "address" etc) and then I've got a drop-down menu where people can select the right size. However, although the drop down menu is towards the end of the code, its showing up at the very top of the page. How do I stop it from doing this? Also, radio buttons come up at the very top of the page too!

    This is what I've written -

    <table border="0" cellpadding="8" cellspacing="8" summary="feedback form">
    <tr><td>Name:</td><td><input type="text" name="Name" size="25" /></td></tr>
    <tr><td>Address:</td><td><input type="text" name="Address" size="35" /></td></tr>
    <br>
    <tr><td>Boot Name(s):</td><td><input type="text" name="Boot Name" size="15" /></td></tr>
    <tr><td>Material(s):</td><td><input type="text" name="Material" size="35" /></td></tr>
    <tr><td>Colour(s):</td><td><input type="text" name="Colour" size="15" /></td></tr>
    <tr><td>Email address:</td><td><input type="text" name="email" size="25" /></td></tr><br>
    <tr>
    <td colspan="2">
    Additional Information<br />
    <textarea rows="10" cols="45" name="Additional Information">
    </textarea>
    </td>
    </tr>
    <br>
    Size <SELECT Size="Size" SIZE="1">
    <OPTION SELECTED>3
    <OPTION>4
    <OPTION>5
    <OPTION>6
    <OPTION>7
    <OPTION>8
    <OPTION>9
    <OPTION>10
    <OPTION>11
    <OPTION>12
    <OPTION>13
    </SELECT>
    <br>
    <h4>Please select your payment method.</h4>
    <INPUT TYPE="radio" NAME="PayPal" VALUE="Paypal">Paypal<br>
    <INPUT TYPE="radio" NAME="Cheque" VALUE="Cheque">Cheque<br>
    <INPUT TYPE="radio" NAME="Money Order" VALUE="Money Order">Money Order<br>
    <INPUT TYPE="radio" NAME="Other" VALUE="Other">Other<br>
    Gender<SELECT Size="Size" SIZE="1">
    <OPTION SELECTED>Female
    <OPTION>Male
    </SELECT>(This is needed so the boot is cut to the correct shape.)
    <tr>
    <td align="center" colspan="2">
    <input type="submit" value="Submit" /><br />


    Can somebody help me? Thank you!

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Your table is not complete. The drop-down is not in the table.

  3. #3
    Join Date
    Aug 2004
    Posts
    6
    I put a <tr><td> in front of the select part. Now it isn't at the top of the page, but its at the bottom! How do I get it in the right place?

    What a nerd, replying to my own post

  4. #4
    Join Date
    Aug 2004
    Posts
    6
    Ah I see, thank you! How do I put it into the table? Hmm.

  5. #5
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    1) You're not supposed to use TABLES for layout.

    2) It is important to associate explicitly form controls with their labels.

    3) It is important to group form controls into fieldsets.

    4) You ought not to mix up HTML and XHTML.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  6. #6
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Style-Type" content="text/css">
    <title>Example</title>
    <style type="text/css">
    <!--
    form {padding:1ex; width:30em}
    fieldset {padding:1ex}
    label {display:block; text-align:right}
    form div {text-align:center}
    fieldset#payment div {margin:auto; width:15em}
    fieldset#payment div label {text-align:left}
    -->
    </style>
    </head>
    <body>
    <form action="someScript.pl">
    <fieldset>
    <legend>Who you are</legend>
    <label>Name: <input type="text" name="Name"></label>
    <label>Address: <input type="text" name="Address"></label>
    <label>Email address: <input type="text" name="email"></label>
    </fieldset>
    <fieldset>
    <legend>The boot</legend>
    <label>Boot Name(s): <input type="text" name="Boot Name"></label>
    <label>Material(s): <input type="text" name="Material"></label>
    <label>Colour(s): <input type="text" name="Colour"></label>
    <label>Additional Information <textarea rows="10" cols="45" name="Additional Information">
    </textarea></label>
    <label>Size <select size="Size">
    <option selected>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    </select></label>
    <label>Gender<select size="">
    <option selected>Female</option>
    <option>Male</option>
    </select></label>
    </fieldset>
    <fieldset id="payment">
    <legend>Please select your payment method.</legend>
    <div>
    <label><input type="radio" name="PayPal" value="Paypal">Paypal</label> <label><input type="radio" name="Cheque" value="Cheque">Cheque</label> <label><input type="radio" name="Money Order" value="Money Order">Money Order</label> <label><input type="radio" name="Other" value="Other">Other</label>
    </div>
    </fieldset>
    <div>
    <button type="submit">Submit</button>
    </div>
    </form>
    </body>
    </html>
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  7. #7
    Join Date
    Aug 2004
    Posts
    6
    Wow, thats very impressive looking! Thanks very much for that.

    The only problem is, I was using that table form because thats how I adapted it from the website I got the PHP form from. Basically, I know *nothing* about PHP, and need for people to be able to fill in that form, and for me to recieve the information in my email account. I was told I needed PHP for this, and managed to find a site that produced two codes, one was a form and the other is a PHP file. I don't think I can use the form you've provided me with, because I don't know how to alter the PHP file to work with it. I downloaded a php code, altered the appropriate areas (email address, the url you go onto after you've pressed "submit" - the thankyou.html url, and the error url.) and then uploaded it as feedback.php

    The following is that php file -

    PHP E-mail Receive Form Electronic Content Text


    // Configuration Settings
    $SendFrom = "Form Feedback <Nessa@SpookyBetty.com>";
    $SendTo = "Nessa@SpookyBetty.com";
    $SubjectLine = "Boot Order";
    $ThanksURL = "thankyou.html"; //confirmation page
    $Divider = "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~";

    // Build Message Body from Web Form Input
    $MsgBody = @gethostbyaddr($REMOTE_ADDR) . "\n$Divider\n";
    foreach ($_POST as $Field=>$Value)
    $MsgBody .= "$Field: $Value\n";
    $MsgBody .= $Divider . "\n" . $HTTP_USER_AGENT . "\n";
    $MsgBody = htmlspecialchars($MsgBody); //make content safe

    // Send E-Mail and Direct Browser to Confirmation Page
    mail($SendTo, $SubjectLine, $MsgBody, "From: " . $SendFrom);
    header("Location: $ThanksURL");
    ?>

    Is it possible to alter this to work with your form? I assume I would have to change that php file and also the form you've provided me with, as the crappy html table form I did, had to involve areas relating to the php file.

    Basically, I just need to be able to have the contents of the form emailed to me.

    Also, I have a few more fields added now (see Http://www.spookybetty.com/order.html), how do I add these to your form?

    Sorry about all the detailed questions, only your form is so much more professional looking.

    Many thanks.

  8. #8
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    It should work just fine with your script.

    That's just a rough version to get you started. You are going to want to keep working on that. Remember, HTML is for content and CSS is for layout and presentation. And when you are done, make sure that you page passes the validators: http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  9. #9
    Join Date
    Aug 2004
    Posts
    6
    Thank you. Frustratingly though, its not working with the php script. In my old script, I had <form action="feedback.php" method="post"> and towards the bottom, <input type="submit" value="Submit" /><br /> Don't I need these still, so the feedback.php works?

    I've put your form up at http://www.spookybetty.com/Shop.html and the old form is located at http://www.spookybetty.com/order.html Could you tell me what I should do to your form, so it works with the feedback php file?

    Many thanks!

  10. #10
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Not knowing PHP, I'm not sure exactly what's going on. But a couple of observations:

    1) There is a PHP forum and the folks over there can help you with the PHP side.

    2) <button type="submit">Submit</button> and <input type="submit" value="Submit"> are the same as far as the FORM submission is concerned. I use BUTTON because it makes the CSS a little bit easier.

    3) Those trailing slashes, <br />, are a part of XHTML&trade; and have no place in HTML. Do not use them.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  11. #11
    Join Date
    Jun 2003
    Location
    The United States Site: http://kellyj.t35.com
    Posts
    2,561
    Assuming your PHP script:
    PHP Code:
    <?php

      
    // Configuration Settings
      
    $SendFrom "Form Feedback <Nessa@SpookyBetty.com>";
      
    $SendTo "Nessa@SpookyBetty.com";
      
    $SubjectLine "Boot Order";
      
    $ThanksURL "thankyou.html"//confirmation page
      
    $Divider "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~";

      
    // Build Message Body from Web Form Input
      
    $MsgBody = @gethostbyaddr($REMOTE_ADDR) . "\n$Divider\n";
      foreach (
    $_POST as $Field=>$Value)
        
    $MsgBody .= "$Field$Value\n";

      
    $MsgBody .= $Divider "\n" $HTTP_USER_AGENT "\n";
      
    $MsgBody htmlspecialchars($MsgBody); //make content safe

      // Send E-Mail and Direct Browser to Confirmation Page
      
    mail($SendTo$SubjectLine$MsgBody"From: " $SendFrom);
      
    header("Location: $ThanksURL");

    ?>
    works correctly, the only change that you'd need to make to Charles' script is add method=post to the form tag.

    And btw ... my opinions for using the button tag rather than input tag for a button ... easier on validation when grabbing all the input fields.

    Dr. Script

  12. #12
    Join Date
    Aug 2004
    Posts
    6
    Thanks very much. I entered <form action="feedback.php" method="post"> and now its all working fine.

    Thank you both for your help. Its rather difficult when you have to do this sort of thing, when you know nothing about it.

  13. #13
    Join Date
    Jun 2003
    Location
    The United States Site: http://kellyj.t35.com
    Posts
    2,561
    Glad to pick Charles up and glad to help out

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles