Re: [WSG] Re: Form (layout/accessibiity)
Incidentally, the second part of the postcode should have maxlength="3"
(it is always three characters long).
On Wed, July 9, 2008 9:49 am, [EMAIL PROTECTED] wrote:
> I have created a form which acts as a interface to a system outside of my
> control. This takes UK postcode in two parts (postcode1 - the initial part
> e.g. ng1 and postcode2 the later part e.g.7sw)
>
> Is it appropriate that I have one label for two inputs or does anyone
> know of a surefire way to hide second label I have tried this but it does
> not
> seem cross browser
>
> html snippet
> Postcode: class="postcode"
> id="PostCode1" name="PostCode1" maxlength="4" /> class="hide">second part of postcode: type="text" id="PostCode2" name="PostCode2" maxlength="4" />
>
>
> css selectors relating to this
> #su_housing input.postcode
> {
> width:2em;
> }
>
> #su_housing label.hide
> {
> position:absolute;
> left:;
> font-size:0;
> color:#fff;
>
> }
>
> Would appreciate anyones thoughts help
>
> Many Thanks
> Shaun
>
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>
>
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Re: Form (layout/accessibiity)
On 7/9/08, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > Is it appropriate that I have one label for two inputs or does anyone > know of a surefire way to hide second label I have tried this but it does not > seem cross browser > Only one input per label according to the fine manual "The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control." http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL One alternative is to use the implicit association format which would allow you to have the two necessary labels and use an expected separator between them. A dash? A blank space? In the States it would be Zip 5+4 with two input boxes and a space between them. Something like this: Postcode - drew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Re: Form (layout/accessibiity)
-Original Message-
From: John Unsworth
Sent: 09 July 2008 14:37
> It's a bit late of night, but if I read this right, if this section
> (as it is a form, right?) is wrapped in a you can then hide
> both labels and use legend to identify that's it's postcode
That's certainly an idea, but legends are notoriously difficult to style
reliably across browsers. I'd go with something similar to Thierry's solution:
HTML:
Postcode:
second part of postcode:
CSS:
.hide { left: :-em; overflow: hidden; }
Chris
This message has been scanned for malware by SurfControl plc.
www.surfcontrol.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Re: Form (layout/accessibiity)
Shaun,
Somewhat new subscriber to the list, first time respondent...
It's a bit late of night, but if I read this right, if this section
(as it is a form, right?) is wrapped in a you can then hide
both labels and use legend to identify that's it's postcode. I'm
relatively new in this web malarky, but have been working on a lot of
form pages for a web app, and think are as good
as, and as easy to work with as 's. So if your carries
your id, then you can target your form elements. So to take your
snippet..
Postcode
Postcode:second part of postcode:name="PostCode2" maxlength="4" />
Then style the font etc of the , and hide the label the same
as your CSS, and size the input likewise.
Example - #postcode input { width: 2em;} #postcode label { position:
absolute; left: -px;}
Alternatively, if you can't or won't use then you might use
a Definition List. The term postcode is the , then just add input
elements in the and use title to explain the input use for screen
readers.
To all the more experienced members, please step forward to clarify or
correct my advice.
Your faithfully,
I've got no signature set up,
John Unsworth,
New Web Designing Bloke.
On Wed, Jul 9, 2008 at 6:49 PM, <[EMAIL PROTECTED]> wrote:
> I have created a form which acts as a interface to a system outside of my
> control. This takes UK postcode in two parts (postcode1 - the initial part
> e.g. ng1 and postcode2 the later part e.g.7sw)
>
> Is it appropriate that I have one label for two inputs or does anyone
> know of a surefire way to hide second label I have tried this but it does not
> seem cross browser
>
> html snippet
> Postcode: id="PostCode1" name="PostCode1" maxlength="4" /> class="hide">second part of postcode: type="text" id="PostCode2" name="PostCode2" maxlength="4" />
>
>
> css selectors relating to this
> #su_housing input.postcode
>{
>width:2em;
>}
>
> #su_housing label.hide
>{
>position:absolute;
>left:;
>font-size:0;
>color:#fff;
>
>}
>
> Would appreciate anyones thoughts help
>
> Many Thanks
> Shaun
>
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>
>
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Re: Form (layout/accessibiity)
> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
> Behalf Of [EMAIL PROTECTED]
> Sent: Wednesday, July 09, 2008 1:50 AM
> To: wsg@webstandardsgroup.org
> Subject: [WSG] Re: Form (layout/accessibiity)
>
> I have created a form which acts as a interface to a system outside of my
> control. This takes UK postcode in two parts (postcode1 - the initial part
> e.g. ng1 and postcode2 the later part e.g.7sw)
>
> Is it appropriate that I have one label for two inputs or does anyone
> know of a surefire way to hide second label I have tried this but it does
not
> seem cross browser
>
> html snippet
> Postcode: id="PostCode1" name="PostCode1" maxlength="4" /> class="hide">second part of postcode: type="text" id="PostCode2" name="PostCode2" maxlength="4" />
>
>
> css selectors relating to this
> #su_housing input.postcode
> {
> width:2em;
> }
>
> #su_housing label.hide
> {
> position:absolute;
> left:;
> font-size:0;
> color:#fff;
>
> }
>
> Would appreciate anyones thoughts help
Try:
left:-em; /* it can't be unitless */
As a side note, if you hide it off-screen, there is no need for font-size
and color in that rule
--
Regards,
Thierry | http://www.TJKDesign.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
