</div> <!-- end of bodycontent div -->
Hi
I’m trying to insert some space characters before my “title” input box to leave a gap. Would anyone know how best to do this or would I be better to put the label title and the input box in two seperate div to space them out using css?
You should always use the “label” element when adding labels to form controls and those labels should be explicitly associated with the input using the “for” attribute.
Once you have used the label element then you can simply add some right padding to it as required.
Also note that INPUT are self closing tags. </input> is not valid code.
it’s good practice to add a space between the INPUT and label/ label text.
assuming you wished to wrap the label around the input, some people do this for some reason, <label>Text <input type=‘text’ name=‘texty’></label>, you can use margin-left to add extra distance from the text to the input tags.
The for=“” explicitly associates a label with the form element it refers to and makes it easy for screen readers and assistive technologies to work out what labels apply where. Without it they don’t really have a clue although as Dresden said above you can wrap the label around the text and input but that has some drawbacks for older screen readers and can make styling awkward.
The value of the attribute “for” is the id of the form element to which it refers and creates a unique relationship between the label and the form element to which it refers no matter where they are in the html. Most browsers also will focus the associated element when the label is clicked also (as in check boxes and radio buttons) and makes then easier to click.
Thanks for the reference. I’m going to create forms your way from now on.
Can you do me one last favour. I’m trying to move the labels and input boxes to the right a bit more. Can you quickly say why this does not work please.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Untitled Document</title>
<style type=“text/css”> #bodycontent label { padding-right:20px }; #bodycontent fieldset { padding-left: 100px};
</style>
</head>
You didn’t close the labels properly and you have some stray semi colons in the css. Always run your code through the validator first to check for typos.
If you want the label moved to the right a little then add some left padding. Also if you want the input and labels to start in a new line then set them to display:block. Don’t use 2 breaks in a row to make space but apply a margin on the element instead.
You also used #upload id twice which is not allowed.
You don’t have label with an ID of title and even if you did the blue color would be over-ridden in the very next rule where you set it to red anyway.
Give the label a class or a unique id and move the rule after the red color rule. You need to ensure that elements have a greater specificity to win out when they come before similar rules. If the elements have the same specificity then the latter one in the stylesheet wins out.
Lastly don’t be tempted to test without a doctype as that throw browsers into quirks mode and then all bets are off. Indeed it will make IE forget about anything learned this century and behave much like ie5.