Rank: Member
Joined: 7/15/2004(UTC)
Posts: 368
|
Just a question to see if I'm missing something on the login page. If you look at the code you will see 4 div's. Code:<div class="wrapone"> <div class="wraptwo"> <div class="wrapthree"> <div class="wrapfour"> I'm curious to see what the thought was here, is there something more that this page can or was meant to do? Why so many div's? It's not typical of the rest of the site. |
|
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
I imagine it's there so you can use four background images to create rounded corners, or something like that. |
|
|
|
|
|
|
Rank: Member
Joined: 4/4/2004(UTC)
Posts: 670
|
Cliff, The validator doesn't seem to accept a lot of email addresses on that login page either. GRRRRRRR.... <fieldset> <legend> <td> <div> GRRRRRRR...... Scott Mech
|
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
I'd imagine the validation expression needs to be revisited. Andy posted an interesting article on email validation the other day: http://haacked.com/archive/2007...ail-address-until-i.aspxThe fieldset and legend tags are semantic and should be there, but all those tables and DIVs should not. There are much better ways to lay out a form than with tables. I prefer definition lists, which are much more flexible and make more sense when viewing a page without styles or via a mobile device. |
|
|
|
|
|
|
Rank: Member
Joined: 11/5/2003(UTC)
Posts: 2,136
Was thanked: 1 time(s) in 1 post(s)
|
Originally Posted by: "Cliff" 
I prefer definition lists, which are much more flexible and make more sense when viewing a page without styles or via a mobile device.
Like this? Marking the labels with a <label> tag would be even better. For example, Code:
<dl>
<dt><label for="name">Name:</label></dt>
<dd><input type="text" name="name" id="name" size="40" /></dd>
<dt><label for="email">Email:</label></dt>
<dd><input type="text" name="email" id="email" size="40" /></dd>
<dt><label for="website">Website:</label></dt>
<dd><input type="text" name="website" id="website" size="40" /></dd>
</dl>
I'll have to experiment with <dl> more. Although <dl> formatting options are more flexible, if I want a horizontal relationship between label and field, a table has some nice default formatting features such as easy-to-use vertical alignment choices and common-sense breaks across printed pages or small screens. I'm a little concerned that the label and field can be separated if they are both floats and have very different content (so that one is formatted with much more vertical space). |
|
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
Yeah, exactly. This page ( http://www.kingofthelist.com/account/login) is how I generally lay them out. If you view it without styles, it still makes sense, and is lightweight. The <label> tag is important, both for accessibility and usability, since clicking a label puts focus on the associated input. I struggled with this during the BVC5 beta, but found that if you add something like AssociatedControlID="UsernameField" to the asp:Label, it converts it from a <span> to a <label>. BVC5 now uses this in the login page, but not many other places. You're absolutely right, it takes a bit of extra work to make sure the form is bulletproof when using <dl>. I still have some experimenting to do, especially for cases where the user has increased the browser's font size significantly. |
|
|
|
|
|
|
Rank: Member
Joined: 4/4/2004(UTC)
Posts: 670
|
I have fiddled and fiddled with similar....
Today, I render something like:
<fieldset>
<legend>Sample Information</legend>
<label for="NameField" id="lblName">Your Name</label><br class="nobr" />
<input name="NameField" type="text" id="NameField" class="textfield" />
<br />
<label for="EmailField" id="lblEmail">Your Email Address</label><br class="nobr" />
<input name="EmailField" type="text" id="EmailField" class="textfield" />
<br />
<label for="PhoneNumberField" id="lblPhone">Your Phone Number</label><br class="nobr" />
<input name="PhoneNumberField" type="text" id="PhoneNumberField" class="textfield" />
<br />
</fieldset>
I went this route after having issues with text resizing. Can you guys show me how it will blow up?
Scott Mech
|
|
|
|
|
|
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.