Hide form labels with text-indent

[Jeep Stone]

I've got a very simple form:

Code:

<label for="name">Name:</label>
<input class="inputbox" type="text" value="Your Name" size="13" name="name"/>
<label for="email">Email:</label>
<input class="inputbox" type="text" value="Email Address" size="13" name="email"/>

What's the best way to hide the form labels? I've tried using text-indent: -5000px to push it off the page but it won't budge. Is display: none bad practice in this instance?

[Chris H]

These seem to work.

http://www.stuffandnonsense.co.uk/archives/trimming_form_fields.html

http://www.webaim.org/techniques/css/invisiblecontent/

[Jeep Stone]

Nice one. Thanks Chris. I did this:

Code:

position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;

and applied the class to the required labels.

[vee]

Just out of interest why do you want to hide them?

[Jeep Stone]

This is on a homepage module where  someone can enter their name/email address to signup for a newsletter. Due to the design, there isn't room to put the labels in as well so I prepopulate the form field with the label value but wanted to keep it there for semantics

[Mr Anderson]

This help? http://www.alistapart.com/articles/makingcompactformsmoreaccessible

[Jeep Stone]

Yeah. That's a nice way of doing it. I've got a solution but might rework it like that if I get chance.

Thanks.