From: shapper on
Hello,

I am working on a form:
http://www.flyondreams.net/flyonpages/

And I have a few questions:

1. The error messages, in red, are not top aligned after a textarea.
How can I make it top aligned in all browsers?

2. Is it possible to change the text of the browse button?
I want to make it look like the one on bottom.

If the "Horizontal" class is removed from the form it will display as
a vertical form.

Everything seems fine in both versions and in all browsers that I
tested.

If someone has any suggestion to improve it, either CSS or HTML,
please let me know.

Thank You,
Miguel
From: Thomas 'PointedEars' Lahn on
shapper wrote:

> I am working on a form:
> http://www.flyondreams.net/flyonpages/
>
> And I have a few questions:
>
> 1. The error messages, in red, are not top aligned after a textarea.
> How can I make it top aligned in all browsers?

See below.

> 2. Is it possible to change the text of the browse button?

No. That would have been a question for the HTML newsgroup anyway.

> I want to make it look like the one on bottom.
>
> If the "Horizontal" class is removed from the form it will display as
> a vertical form.
>
> Everything seems fine in both versions and in all browsers that I
> tested.

Which are?

> If someone has any suggestion to improve it, either CSS or HTML,
> please let me know.

Your mostly DIV-powered document might be appealing to some CSS-addicts,
but it is semantically unsound, including the form, and (therefore) not
accessible. (Disable all stylesheets, e.g. with the Web Developer extension
for Firefox, and you see what I mean.)

You could declare

div.Text span.Error {
float: right;
}

but first you should make it a `table' in a `form', with `th's with the
`label's and `td'. Then you can decide whether you use the approach above
(changed), or format the new `tr' element

vertical-align: top;

And use HTML 4.01 instead. (At least make your XHTML markup HTML-
compatible as described in XHTML Media Types. jQuery can't deal with an
XHTML DOM to begin with. You should not be using XHTML or jQuery for this
and a lot of other good reasons.)

Finally, avoid using `Name' or other names of properties of form objects
for control IDs or names. ("submit" for name/ID is particularly disastrous
if you intend to call the form object's submit() method.)


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
From: Jukka K. Korpela on
shapper wrote:

> http://www.flyondreams.net/flyonpages/
>
> And I have a few questions:
>
> 1. The error messages, in red, are not top aligned after a textarea.
> How can I make it top aligned in all browsers?

_All_ browsers? How do you top align in speech?

You can suggest vertical alignment using the vertical-align property, i.e.

..Editor * { vertical-align: top; }

> 2. Is it possible to change the text of the browse button?

No.

> I want to make it look like the one on bottom.

What makes you think it doesn't? This depends on the browser. It's actually
bad if it looks the same as a submit button, since it _isn't_ a submit
button, but don't worry about it woo much.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: David Stone on
In article <Xns9D42CEDE9F417arbpenyahoocom(a)85.214.113.135>,
Adrienne Boswell <arbpen(a)yahoo.com> wrote:

> Gazing into my crystal ball I observed shapper <mdmoura(a)gmail.com>
> writing in news:5005b934-a929-4f3c-a1a8-faa8bae0d228
> @g11g2000yqe.googlegroups.com:
>
> > Hello,
> >
> > I am working on a form:
> > http://www.flyondreams.net/flyonpages/
> >
> > And I have a few questions:
> >
> > 1. The error messages, in red, are not top aligned after a textarea.
> > How can I make it top aligned in all browsers?
[snip]
> I don't know if this is something you want to try, but the way I do it
> is I have an asterick after the label, or sometimes bold font, and the
> legend element says something like "fields followed by * are required"
> or something to that effect.
>
> Now, when the client comes back to the server, and something is missing,
> I send back the page with the label element in red on yellow, the inside
> of the form control in black on pink. There is also a div above the
> fieldset showing which fields are missing, not filled in properly, etc.
>
> Personally, having your form say Field is required next to the field,
> before I have filled out the form seems confusing. Since you do not
> have any server side or client side checks in place, I do not know
> whether you change the state (CSS) of these fields if they are missing
> or not filled in properly. If you do not change the state of those
> fields on error, then I am not going to know right away if something is
> wrong, since everything will still look the same.

Changing the state of the field is a very good idea. I don't know how
many times I've spent a while searching a form for the one field that
hadn't been filled in to the script's liking. (Something that seems to
happen much more frequently on very long forms that require a couple of
page down's before you get to the bottom!)

>
> Just a suggestion, YMMV.
From: Albert Ross on
On Tue, 23 Mar 2010 10:37:26 -0400, David Stone
<no.email(a)domain.invalid> wrote:

>In article <Xns9D42CEDE9F417arbpenyahoocom(a)85.214.113.135>,
> Adrienne Boswell <arbpen(a)yahoo.com> wrote:
>

>> I don't know if this is something you want to try, but the way I do it
>> is I have an asterick after the label, or sometimes bold font, and the
>> legend element says something like "fields followed by * are required"
>> or something to that effect.
>>
>> Now, when the client comes back to the server, and something is missing,
>> I send back the page with the label element in red on yellow, the inside
>> of the form control in black on pink. There is also a div above the
>> fieldset showing which fields are missing, not filled in properly, etc.
>>
>> Personally, having your form say Field is required next to the field,
>> before I have filled out the form seems confusing. Since you do not
>> have any server side or client side checks in place, I do not know
>> whether you change the state (CSS) of these fields if they are missing
>> or not filled in properly. If you do not change the state of those
>> fields on error, then I am not going to know right away if something is
>> wrong, since everything will still look the same.
>
>Changing the state of the field is a very good idea. I don't know how
>many times I've spent a while searching a form for the one field that
>hadn't been filled in to the script's liking. (Something that seems to
>happen much more frequently on very long forms that require a couple of
>page down's before you get to the bottom!)

The absolute worst is when you get an error and are then returned a
completely blank form to fill in all over again.

Especially when they don't tell you that the error was actually
something like using non-alphanumeric characters in your password

Grrrrr