How to put the form labels on the right?

Forum Moderators: open

Message Too Old, No Replies

How to put the form labels on the right?

Rain_Lover

3:17 pm on Dec 1, 2010 (gmt 0)

Hi,

Please look at the following comment form:
[docs.jquery.com...]

There's a similar one on this page:
[jquery.bassistance.de...]

I'd like to put the labels on the right of text input fields and display the error messages under input fields.
Tried almost anything, but to no avail

Any help is greatly appreciated!
Rain Lover

Fotiman

5:29 pm on Dec 1, 2010 (gmt 0)

This is more of a CSS issue than a JavaScript issue.

I'd approach it like this:

1. Keep the labels before the inputs in the source code for accessibility reasons

2. The error label gets appended to the container of the element that has the error. Giving the error label "display:block" should force it to begin on it's own line.

3. Since we want the input to appear before the label, float it left. We may need to add "clear: left;" to the error label (haven't really played around with it much)

I took the first example you linked to and modified it with these basic changes. It's not exactly right, but I think it's enough to get you started.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; }
label.error { display:block; color: red; padding-left: .5em; vertical-align: top; }
input,textarea { float: left; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 <script>
 $(document).ready(function(){
  $("#commentForm").validate();
 });
 </script>
</head>
<body>
 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>A simple comment form with submit validation and default messages</legend>
  <p>
   <label for="cname">Name</label>
   <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
  </p>
  <p>
   <label for="cemail">E-Mail</label>
   <em>*</em><input id="cemail" name="email" size="25" class="required email" />
  </p>
  <p>
   <label for="curl">URL</label>
   <em> </em><input id="curl" name="url" size="25" class="url" value="" />
  </p>
  <p>
   <label for="ccomment">Your comment</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="Submit"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

Rain_Lover

2:24 pm on Dec 2, 2010 (gmt 0)

Thanks for the answer!
I worked on the code based on your hints and almost did it:
[dl.dropbox.com ]

However, there are two problems I can't resolve:
1. I don't know how to vertically align the labels. I wish I could achieve the final outcome by simply displacing label and input tags.

2.The sample page I created doesn't work in IE6.

Thanks again!