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
label for=PostCode1Postcode:/labelinput type=text
class=postcode
id=PostCode1 name=PostCode1 maxlength=4 /label for=PostCode2
class=hidesecond part of postcode:/labelinput class=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: labelPostcodeinput type=text class=postcode id=PostCode1 name=PostCode1 maxlength=4 / /label - labelinput type=text id=PostCode2 name=PostCode2 maxlength=4 / /label drew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[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
label for=PostCode1Postcode:/labelinput type=text class=postcode
id=PostCode1 name=PostCode1 maxlength=4 /label for=PostCode2
class=hidesecond part of postcode:/labelinput class=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]
***
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
label for=PostCode1Postcode:/labelinput type=text
class=postcode
id=PostCode1 name=PostCode1 maxlength=4 /label for=PostCode2
class=hidesecond part of postcode:/labelinput class=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]
***
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 fieldset 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 fieldset legend are as good
as, and as easy to work with as div's. So if your fieldset carries
your id, then you can target your form elements. So to take your
snippet..
fieldset id=postcode
legendPostcode/legend
label for=PostCode1Postcode:/labelinput type=text
id=PostCode1 name=PostCode1 maxlength=4 /label
for=PostCode2
second part of postcode:/labelinput type=text id=PostCode2
name=PostCode2 maxlength=4 /
/fieldset
Then style the font etc of the legend, 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 fieldset then you might use
a Definition List. The term postcode is the dt, then just add input
elements in the dd 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
label for=PostCode1Postcode:/labelinput type=text class=postcode
id=PostCode1 name=PostCode1 maxlength=4 /label for=PostCode2
class=hidesecond part of postcode:/labelinput class=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: 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 fieldset 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:
label for=PostCode1Postcode:/label
input type=text class=postcode id=PostCode1 name=PostCode1
maxlength=4 /
label for=PostCode2 class=hidesecond part of postcode:/label
input class=postcode type=text id=PostCode2 name=PostCode2
maxlength=4 /
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]
***
