Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    345
    Thanks
    54
    Thanked 0 Times in 0 Posts

    Help Cleaning HTML Mislabeling

    Downloaded a great contact form with location map (can't remember where from), however when I try to validate the page I'm getting back a lot of errors and need help cleaning them up if anyone would be so kind.

    Many of the errors I have cleaned up, and the rest MIGHT be minor, however I didn't want to take a chance with breaking anything without asking people more knowledgeable than myself.

    The majority of the errors are "The for attribute of the label element must refer to a form control."

    The form, as it stands currently, has the for attributes as follows...
    [located on http://www.rutholsonphoto.com/contact.php]

    Code:
    <form id="contact" method="post" action="">
    <fieldset>	
    
    <label for="name">Name</label>
    <input type="text" name="name" placeholder="Full Name" title="Enter your name" class="required">
    
    <label for="email">E-mail</label>
    <input type="email" name="email" placeholder="yourname@domain.com" title="Enter your e-mail address" class="required email">
    
    <label for="phone">Phone</label>
    <input type="tel" name="phone" placeholder="ex. (555) 555-5555">
    
    <label for="website">Website</label>
    <input type="url" name="url" placeholder="http://">
    
    <label for="message">Question/Comment</label>
    <textarea name="message"></textarea>
    
    <input type="submit" name="submit" class="button" id="submit" value="Send Message" />
    
    </fieldset>
    </form>
    Now I COULD possibly go in and change these to more HTMl correct names, but I want to make sure it's not going to interfere with our processing code which is...

    PHP Code:
    <?php
    // Get Data    
    $name strip_tags($_POST['name']);
    $email strip_tags($_POST['email']);
    $phone strip_tags($_POST['phone']);
    $url strip_tags($_POST['url']);
    $message strip_tags($_POST['message']);

    // who is getting this email ...
    $to="email@email.com";

    // subject
    $subject="Website Mail";

    $msg "
    Website Mail
    ---------------------------------------------------
    Name:  $name
    Phone:  $phone
    Email: $email
    URL: $url
    ---------------------------------------------------
    $message
    ---------------------------------------------------
    "
    ;

    $extraheaders "From: $email\r\nReply-To: $email\r\n";

    if (! 
    mail($to$subject$msg$extraheaders))
      echo 
    "Mail did not send for some reason.";

    // where to go after the email is sent ...
    header("Location: ./index.php");

    ?>
    Do you guys think the processing form is using the *or or the *name attribute for it's feeding values???

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    The for attribute value should match the id of the associated input element. You should be able to sort you errors by adding appropriate and matching ids.

  • #3
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    345
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    The for attribute value should match the id of the associated input element. You should be able to sort you errors by adding appropriate and matching ids.
    Could you clarify this by displaying some sample code?

    What I got from this is for me to add an id tag in each *label element that displays the same *name as the *for element and this should solve the problem, however that isn't the case. Which means that I either did something wrong, or misunderstood what you were suggesting I do.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    SB65 is correct that adding an ID to each input element (not the label elements, as you appear to have done) that matches the respective label's "for" attribute will fix the validation of those "for" attribute errors.

    If you like, you can instead skip the "for" attribute by placing the input elements inside of the label element itself.

    That is called "implicit" labeling. It is not as fool-proof as explicit labeling, but it's there if you want to drop the "for" attributes.

    Anyway, move those ID's you added over to the input elements and you should be set for fixing this error.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Psionicsin (08-06-2011)

  • #5
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    345
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    SB65 is correct that adding an ID to each input element (not the label elements, as you appear to have done) that matches the respective label's "for" attribute will fix the validation of those "for" attribute errors.

    If you like, you can instead skip the "for" attribute by placing the input elements inside of the label element itself.

    That is called "implicit" labeling. It is not as fool-proof as explicit labeling, but it's there if you want to drop the "for" attributes.

    Anyway, move those ID's you added over to the input elements and you should be set for fixing this error.
    Thanks for that.

  • #6
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    345
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Any idea about these? Been looking, but can't find an exact solution.
    Attached Thumbnails Attached Thumbnails Help Cleaning HTML Mislabeling-errors.jpg  


  •  

    Posting Permissions

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