8 replies [Last post]
Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 26 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Hey guys, I'm having an issue trying to change my site from a transitional to strict doctype. The website displays fine, and everything works.. but the form for my client login won't validate. Neither will the forms in my contact pages.

I'm assuming that whatever is wrong with 1 of them, will fix the other..

I'm also getting an error about a line with which I don't understand why it's being flagged as invalid.

The rest of the site validates fine, and the CSS validates.. could you guys take a look, and see what you think?

Here's the website & CSS:
www.bdeanstudio.com
www.bdeanstudio.com/style.css

Here's a link to the validation page with errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bdeanstudio.com%2F&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654

Thanks in advance for any help offered. I have to go to lunch, or I would have searched Google longer before posting.. but figured someone might be able to point me in the right direction while I'm gone.

Tags:
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

form inputs may not be

form inputs may not be direct children of their form parents, you need to make use of all the form elements correctly that means the fieldset element wraps groups of controls and has an associated legend tag to describe the group; also you should really use label elements with your inputs.

The validator does give quite clear reasons for an error if not pointing to the correct element to use.

Also loose the language="javascript" type="text/javascript" will do

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 26 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Thanks for the reply Hugo!

Thanks for the reply Hugo!

I had just added the client login form, and copy and pasted the contact forms from an older site I had.

I see what you're saying now, and will make those changes.

Thanks again! :thumbsup:

UPDATE: Small update.. everything validates 100% now, thanks again!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Could you please put up a

Could you please put up a big sign somewhere that says, nothing on this page with do anything if you don't have JS on? It's a personal opinion, but I hate forms relying on the client to do their jobs-- at the very least, keep the dirty scrips external if possible. Forms should be talking to the server (or if it's calling a new form to come onscreen, have it there already and use JS to hide it until someone clicks on it). The frustration of clicking on a button that does nothing because your user agent doesn't have enough support is so hair-tearing... maybe I can sell it for hair removal?

question?
You have a tab index, in the order of the elements. So, why a tab index at all? Anyone tabbing through that form is already going to go in that order anyway. You can safely lose them. Since starting to set a tabindex often forces you to continue to set them throughout the whole page, they can quickly lead to disaster. They're for when you need a keyboarder to NOT go in source order for whatever reason.
empty legend?
Now, I know everyone says, forms should have fieldsets, and they should, but I don't for search forms, and often not for login forms. If you're going to leave the legend empty, then use some other block for your form- it's kinda cheating to have an empty legend to satisfy the fieldset. Though your form has a pretty long title in the button element-- looks like a perfect legend. I'd add it to the legend and then Fight the Fox to get it off-screen (still available to screen readers/text browsers/css-less browsers).

You could have

<--tells linear browsers what to do
<--tells most visitors what the form does

otherwise

Log in with your username to see your Personalised Page thingie

with fieldset or form as pos-rel and legend as pos-abso, though FF will always still leave a little space behind, not truly taking the thing out of the document (usually I need to use an extra negative margin for the Fox).

A label isn't bad but if the text input and the submit are super obvious, you're adding clutter that people have to wade through (unless you're hiding it, which then means you don't need a title in the input). A title in the text input serves as a label for screen readers who aren't seeing the text of the submit right away. Otherwise, complicated descriptions are going to need a legend.

I'm no expert, but I fake one on teh Internets

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 26 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Haha.. wow, didn't expect to

Haha.. wow, didn't expect to cause so much commotion over this. I might as well try to clear some of this up:

Stomme poes wrote:

Could you please put up a big sign somewhere that says, nothing on this page with do anything if you don't have JS on?

By everything.. do you mean the 1 tiny button on the top of the pages? I had javascript smooth fade in effects on all links, and even an entire section of the page that would slide up to hide before. I'm pretty sure that everything besides that one thing is stripped of any javascript.

Stomme poes wrote:

It's a personal opinion, but I hate forms relying on the client to do their jobs-- at the very least, keep the dirty scrips external if possible. Forms should be talking to the server (or if it's calling a new form to come onscreen, have it there already and use JS to hide it until someone clicks on it). The frustration of clicking on a button that does nothing because your user agent doesn't have enough support is so hair-tearing... maybe I can sell it for hair removal?

This is temporary.. the entire client form section was added the other day, as a bit of an afterthought. I'm honestly not even sure that I'll ever use it for anything. I was playing in photoshop, trying to fill in some of the blank space up there, and ended up with that.

I had been toying with the idea of a personalized page, that shows a sample and/or the progress of a client's website, has the color scheme, images to be used, etc.. so they can see everything laid out, and I can easily make any changes.

This might be a cool idea.. it might not.. either way, I don't want to use javascript to do this. Which is why I'm currently teaching myself PHP/mySQL to make a better login form for this page, or anything that I want to put one on in the future. I know enough programming to be able to figure out and edit PHP code.. but I want to better understand how to write it from scratch.

Stomme poes wrote:

question?
You have a tab index, in the order of the elements. So, why a tab index at all? Anyone tabbing through that form is already going to go in that order anyway. You can safely lose them. Since starting to set a tabindex often forces you to continue to set them throughout the whole page, they can quickly lead to disaster. They're for when you need a keyboarder to NOT go in source order for whatever reason.

This form was copy and pasted from an old site (as were my contact forms which are next on my list for a major overhaul.. both graphically and technically). I just didn't remove them when I threw it together the other day. This site is far from final (hence posting my question here as opposed to the "site check" thread!). Smile

I only get (at most) an hour a day, every other day, to work on my own website. I have a LONG list of changes that I still want to make.. but no time to do it. I work 8-5, have a few websites I'm working on for other people, and like to see my girlfriend and sleep now and then!

Trust me.. I have a long list of stuff to work on still!

Stomme poes wrote:

empty legend?
Now, I know everyone says, forms should have fieldsets, and they should, but I don't for search forms, and often not for login forms. If you're going to leave the legend empty, then use some other block for your form- it's kinda cheating to have an empty legend to satisfy the fieldset. Though your form has a pretty long title in the button element-- looks like a perfect legend. I'd add it to the legend and then Fight the Fox to get it off-screen (still available to screen readers/text browsers/css-less browsers).

You could have

<--tells linear browsers what to do
<--tells most visitors what the form does

otherwise

Log in with your username to see your Personalised Page thingie

with fieldset or form as pos-rel and legend as pos-abso, though FF will always still leave a little space behind, not truly taking the thing out of the document (usually I need to use an extra negative margin for the Fox).

I didn't even know about the and tags until reading Hugo's reply to be perfectly honest with you. After Hugo mentioned that, I had just enough time to do a basic Google search, and redo it as it is now. I haven't had time to look at it again since.

I understand those tags, and the logic behind them, but I don't know enough about it yet to know if there is another way to do this (without the empty legend tags) that validates.

I will definitely be looking into this more, and will incorporate some of your suggestions/statements into my future search!

Stomme poes wrote:

A label isn't bad but if the text input and the submit are super obvious, you're adding clutter that people have to wade through (unless you're hiding it, which then means you don't need a title in the input). A title in the text input serves as a label for screen readers who aren't seeing the text of the submit right away. Otherwise, complicated descriptions are going to need a legend.

So you're basically saying that putting a title on the button is confusing? I should remove it?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

rofl well bet you didn't

rofl well bet you didn't expect all that.

Poes is enthusiastic Smile but essentially I would have to agree on the nature of a login form or form elements that are simple, but it slightly depends on what styling one is attempting as to what elements may prove useful to have at hand.

Poes references were more to using attributes and specifically the title attribute rather than referring to a text title, an input with a title attribute such as title="put yer user name here" with a submit stating 'login' is sufficient and elements such as label are perhaps overkill, it all highly depends though , but then when is anything ever straightforward in this game!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 26 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I hear you there Hugo..

I hear you there Hugo.. "straightforward" is one word which you really don't hear often when discussing this stuff!

I actually got a chance just now to change the login form a bit. I still need to get a non Javascript method put together, but the form itself now uses with a non-empty that I hid via my usual method.

Initially, I got everything validating without those tags by adding a div around the form elements, but it looks much better when viewed with the CSS off with them. Instead of just having 2 boxes floating there, now you actually know what thoes floating boxes are haha.. thanks for the advice Poes.

--------------

While this thread has some attention.. I have a couple other general questions.

1) Is my current method of image replacement (setting the container height to 0, with a hidden overflow, and using top padding to show only the image, while still hiding the text) a valid way of doing this, or would you guys recommend going a different route?

I don't like the horrible large focus box that goes around image links when using the negative text indent method.. and I don't want to remove the focus borders because of validation/accessibility reasons.

2) I had an image to separate the footer from the rest of the content (I still do).. right now I have it set to a tag. For when the CSS is shut off, I have a bunch of "- - - -" in as the text. On a scale of 1-10, how much of a "no no" is that lol?

The reason for this is that, if just using the tag to place it in the html, the page looks kind of strange if you shut the CSS off.. because that image is the only image that shows up on the entire page.

I toyed with doing something like Thank You For Visiting! but I kind of like how the dashes look to be honest. Even without the CSS, it breaks everything up nicely.

What do you guys think about that? What would you do to work that image in down there?

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 29 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:I only get (at most)

Quote:

I only get (at most) an hour a day, every other day, to work on my own website. I have a LONG list of changes that I still want to make.. but no time to do it. I work 8-5, have a few websites I'm working on for other people, and like to see my girlfriend and sleep now and then!

Oh same here. I just have an allergy to OnClick... you are free to ignore it! : )

Yes I meant that title on the text input (where you type a username) makes the most sense, and having it on the button is ok... I don't see titles on buttons often, you can have some extra text there. I would tend to put it earlier in the form, on the text input than on the button, but...
I got the title idea from when I was looking for a way besides making all these extra labels everywhere and hiding them, and found a Juicy Studio page (and tested in my older JAWS, worked like a charm): http://juicystudio.com/article/invisible-form-prompts.php Thus:

and yes, the div solution validates and as I said, when I has a form where it's just too much to use a fieldset (because a fieldset then needs a legend and hiding a legend can be not worth it), then I'll use a div. Mostly in "search" forms and sometimes login forms. Thus, my first example with the

playing the block.

Quote:

1) Is my current method of image replacement (setting the container height to 0, with a hidden overflow, and using top padding to show only the image, while still hiding the text) a valid way of doing this, or would you guys recommend going a different route?

I don't like the horrible large focus box that goes around image links when using the negative text indent method.. and I don't want to remove the focus borders because of validation/accessibility reasons.

I didn't look back again at your page, I know what you mean with this. You could possibly remove the focus outline (and add something else instead to show the user where they're focussed, like chaning the image or something), or you could try a different method of image replacement.
The sole reason I don't use negative text indent is, I've found I turn images off on forums and certain other pages so I can tell what the stupid icon means. Other people are on dial-up (or all their colleagues in the office are busy streaming radio or playing WoW or whatever) so their connection is slow and turn images off for decent surfing speed. And, of course sometimes something may happen to your image or the path and it doesn't show. In these instances the user has CSS on but images off, and a negative text indent means, you have nothing to read, just an area that you can wave your mouse around and try to guess what it does by looking at the url at the bottom of the browser : ) Mystery links, the best.

I'll either use regular images with alt text, or if I need to style that "alt" text (logos usually with goofy fonts I want everyone to see if possible) I'll use Gilder-Levin. http://www.mezzoblue.com/tests/revised-image-replacement/ scroll down, near the bottom, Gilder Levin with Shea Enhancement sometimes.

Quote:

2) I had an image to separate the footer from the rest of the content (I still do).. right now I have it set to a tag. For when the CSS is shut off, I have a bunch of "- - - -" in as the text. On a scale of 1-10, how much of a "no no" is that lol?

Now, is that text a header explaining what the content that follows means? No? Then no headers pls. Imagine you're surfin with JAWS and you're H-ing your way through a page, checking it out, what's it about, what is each chunk about, and then you get to one and you get "dash dash dash dash" or "hyphen hyphen hyphen hyphen" (my JAWS says "dash" but who knows what other readers say). That's not a header, but you want some way for the content itself to say, Hey! This part's ending and this other part's beginning!

You might want an hr instead. Hr is generally considered presentational, but I would use it if I needed something that said "divider" in the code.

If it was only visual and "for looks" I'd have a dashed border at the top of the footer and then give footer a big juicy chunk of padding to keep the footer's stuff far away from it. But it sounds like you want it in the content itself, independent of CSS. So an hr maybe (hr's can have bg images, so, your line could be dashed, but I think it's IE has trouble with that... ) or another otherwise, the image does sound ok if the dash doesn't look too artsy, and your alt text could say "end whatever section" or something.... whatever meaningful reason you have for not using a background image or a border anyway. It's ok if it's the only image to appear... and printers will ignore background images but often they honour HTML images, so it could appear when printed too.

Anyway, those are my opinions. They smell as bad as anyones : )

I'm no expert, but I fake one on teh Internets

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 26 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Thanks for the reply Pose..

Thanks for the reply Pose.. appreciate the input!

I wanted to use a there actually. I use that same image to break between content throughout a few of my pages as well, so I was trying to style the image as the background.

When doing so however, I can't get rid of the border that appears around it. I was looking this up, because I didn't understand what was going on, and found out that it is a problem with the .. you need to nest it inside another div or something to remove the border.. which just seemed silly to me.

I created a

to throw my image in throughout the pages, so I'll just use that down there too.. I was just trying to find a better method!

Thanks again for sharing your opinions.. I like getting other people's take on things. Smile