xhtml form validation error

Discussion in 'Web Design and Development' started by andyjamesnelson, Feb 11, 2009.

  1. andyjamesnelson macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #1
    Hey I'm making a form:

    HTML:
    <form method="post" enctype="text/plain" action="">
    
    <p><textarea class="message" name="contact" cols="60" rows="11">
    </textarea></p>
    
    <p><input class="submit" type="submit" value="Send"></input></p>
    
    </form>
    Without the <p> tags around the textarea and the input so that the html would not validate?

    Still this seems a little crazy, not to mention inheriting CSS from <p> with no need for classes.

    Andy
     
  2. r.j.s Moderator emeritus

    r.j.s

    Joined:
    Mar 7, 2007
    Location:
    Texas
    #2
    I'm not sure what you're getting at with the <p> tags, but shouldn't your method be POST, not post?

    Are you saying it wouldn't validate without the <p> tags around the form elements?
     
  3. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #3
    Yes it won't validate without the <p> tags!

    Sorry my 1st post wasn't very clear.

    It won't validate like this:

    HTML:
    <form method="post" enctype="text/plain" action="">
    
    <textarea class="message" name="contact" cols="60" rows="11"></textarea>
    
    <input class="submit" type="submit" value="Send"></input>
    
    </form>
    But if I add <p> tags around the textarea and the input it will?

    Also I think with xhtml strict its post and not POST?

    Andy
     
  4. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
  5. r.j.s Moderator emeritus

    r.j.s

    Joined:
    Mar 7, 2007
    Location:
    Texas
    #5
    I guess you are right, my bad.
     
  6. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #6
    Ok cool yes that works. One to remember for sure!

    I am wondering if there is a way of removing the outline that happens on a submit button in Firefox?

    Thanks for the tip.
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Tags like input and textarea are kind of like a span or strong tag. They're inline and need a block parent. With forms you have a few different options. I often go with a fieldset since they are designed for this kind of job. You can also use other block tags like p, div, ol, ul, etc.

    You also miss wrote the input tag. It'a a self closing tag,

    HTML:
    <input ... />
     
  8. r.j.s Moderator emeritus

    r.j.s

    Joined:
    Mar 7, 2007
    Location:
    Texas
    #8
    So the OP could put the entire form in a <p> or <div> tag, instead of each element?
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    No, the p would have to be inside the form tag, otherwise that wouldn't validate. Form is a block element.
     
  10. Melrose Suspended

    Melrose

    Joined:
    Dec 12, 2007
    #10
    Beat me to it.

    P is a block-level element as well but meant for handling the copy text itself, not larger elements on the page like forms.
     
  11. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #11
    Any suggestions on loosing the outline in Firefox when the button is pressed?
     
  12. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #12
    I'm not completely convinced I know what outline you're talking about, but here are some things to try.

    Code:
    input:active, input:focus {
     outline: none;
    }
     
  13. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #13
    Hey I created a test page to illustrate the problem:

    http://andyjamesnelson.co.uk/hiptest/

    click the send button and you will see the outline

    also if you see the page in Safari there seems to be a 2px gap between the button and the textarea?
     
  14. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #14
    OK, I tracked it down. The answer I gave before is something that works for the border that shows up on links, but apparently doesn't apply to input buttons. Digging through Firefox I found their styling properties for it.

    Disclaimer: I'll give the solution, but consider the consequences as well. The highlighting border is an accessibility feature for people using the keyboard to navigate the outline shows them what is currently selected. Applying this solution will result in a less accessible site. /disclaimer.

    Code:
    input[type="submit"]::-moz-focus-inner {
     border: 0px dotted #0f0;
    }
     
  15. memco macrumors 6502

    Joined:
    May 1, 2008
    #15

Share This Page