Form
in [CSS]
|
Prev: CSS3 Transformation Suggestion: Add additional perspective version to 3D transformations
Next: 246335 Information portals for computer and Web technology 44
From: shapper on 21 Mar 2010 13:01 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 21 Mar 2010 14:34 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 21 Mar 2010 14:38 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 23 Mar 2010 10:37 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 27 Mar 2010 14:34
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 |