SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Denmark
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The most semantic way to handle a <form>

    Hey all,

    Im wondering if someone could give me their opinion on how to setup a <form> with different input types.

    My setup looks like the following:

    <form action="#" method="post">
    Text: <input type="text" name="name" />
    Text: <input type="text" name="name" />
    Text: <input type="text" name="name" />
    Text:
    <textarea></textarea>
    </form>

    As the three first inputs show, I have my text to the left with a bit of a margin to the input.
    My last input will have some text and display a textarea underneath it.

    It's pretty simple. Would I just use a <span> to wrap my text or what would u suggest?

  2. #2
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Cameron Adams wrote an article on SitePoint about this: http://articles.sitepoint.com/articl...orm-design-css

    Have a read through that as I'm sure it'll answer your questions better than I could here.
    TAKE A WALK OUTSIDE YOUR MIND.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Use a "label" to wrap the text. And use the "for" attribute to associate the label with it's corisponding input.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Yes, something like this:

    Code:
    <!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=utf-8">
    <title>Form</title>
    	
    <style type="text/css" media="all">
      .section, .section1 {padding-bottom: 15px;}
      .section label, .section input {display: inline;}
      .section1 label, .section1 input, .section1 textarea {display: block;}
      .section label {padding-right: 10px;}
    </style>
    	
    </head>
    
    
    <body>
    <form action="#" method="post">
    
    <div class="section">
    <label for="name">Text</label><input type="text" name="name" id="name" />
    </div>
    
    <div class="section">
    <label for="email">Text</label><input type="text" name="email" id="email" />
    </div>
    
    <div class="section">
    <label for="something">Text</label><input type="text" name="something" id="something" />
    </div>
    
    <div class="section1">
    <label for="comments">Text</label>
    <textarea name="comments" id="comments"></textarea>
    </div>
    
    <div class="section1">
    <input type="submit" name="submitted" value="Send">
    </div>
    
    </form>
    
    </body>
    </html>

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Denmark
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm that's weird, I didnt get any notice about activity in this thread, oh well. Thanks a lot for the answers

    I just got a question in regards of using the "for" / "id" controller.

    I just want to make sure im understanding the usage correct..

    The only usage and reason why I have id="firstname" is because of the connection to the label?? I really dont use the id for anything else, right?

    MY input would like this: <input type="text" name="name" id="labelname" class="inputNormal" /> - so im styling everything in my inputNormal. I'm not sure why, but my first thought was, - that "id" is just extra unnecessary mark-up - but I can see that the label controller won't work without the id - so guess it's pretty essentiel

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mrsam View Post
    The only usage and reason why I have id="firstname" is because of the connection to the label?? I really dont use the id for anything else, right?
    Yes, it links the input to the label. As for using it for anything else, I don't see why not, though I'm not 100% sure about that. I would think that an id is an id like any other.

    Linking the label and the input has lots of advantages, such as providing a clear relationship to people browsing with assistive devices, and for those who find it hard to click on small targets. (Click anywhere beside the label and the input will be highlighted.)

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally, I wouldn't bind presentation to a form control ID.

    Here is another example of a semantic form:
    Code HTML4Strict:
    <form action="registration.php" method="post" accept-charset="utf-8">
    	<fieldset>
    		<legend>Registration</legend>
     
    		<label for="name">Name</label>
    		<input id="name" type="text" name="name"><br>
     
    		<label for="company">Company</label>
    		<input id="company" type="text" name="company"><br>
    	</fieldset>
    </form>

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    Personally, I wouldn't bind presentation to a form control ID.
    Nor would I. I was really just saying that in theory it should be possible... but probably never necessary or recommended.


Bookmarks

Posting Permissions

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