How to create gap or control the space between free text and an input box

How to insert space characters in html
1 hour, 3 minutes ago|LINK

<div id=“bodycontent”>
<form action=“” method=“post”>
Title<input type=“text” name=“title”></input>
</form>

    &lt;/div&gt; &lt;!-- end of bodycontent div --&gt;

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?

Kind Regards

Matt

Hi,

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.

e.g.


<!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 }
</style>
</head>

<body>
<div id="bodycontent">
		<form name="form1" method="post" action="">
				<fieldset>
						<legend>Example Form</legend>
						<label for="title">Title:</label>
						<input type="text" name="title" id="title">
				</fieldset>
		</form>
</div>
</body>
</html>


Also note that INPUT are self closing tags. :slight_smile: </input> is not valid code.

  1. it’s good practice to add a space between the INPUT and label/ label text.
  2. 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.

Hi Paul

I’ve never seen the <label for=…> parameter before. What does the for parameter do please? It looks good but cannot find much about it from Google.

cheers
Matt

Hi,

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.

More info here:

Hi Paul

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>

<body>
<div id=“bodycontent”>
<form name=“form1” method=“post” action=“”>
<fieldset>
<legend>Journal Entry</legend>
<label for=“title”>Title:</label>
<br />
<input type=“text” name=“title” id=“title” size=“50”>
<br />
<label for=“notes”>Notes:</label>
<br />
<input type=“text” name=“notes” id=“notes”>
<br />
<label for=“upload”>Upload:</label>
<br />
<input type=“file” name=“upload” id=“upload”>
<br /><br />
<input type=“submit” name=“upload” id=“upload”>

			&lt;/fieldset&gt;
	&lt;/form&gt;

</div>
</body>
</html>

Kind Regards
Matt

Hi,

You have a lot of typos in there :slight_smile:

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.

http://jigsaw.w3.org/css-validator/

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.


<!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-left:10px;display:block }
#bodycontent fieldset { padding-left: 100px }
#bodycontent input{display:block;margin:0 0 5px;}
input#upload2{margin:20px 0 10px}
</style>
</head>

<body>
<div id="bodycontent">
		<form name="form1" method="post" action="">
				<fieldset>
						<legend>Journal Entry</legend>
						<label for="title"> Title</label>
						<input type="text" name="title" id="title" size="50">
						<label for="notes">Notes</label>
						<input type="text" name="notes" id="notes">
						<label for="upload">Upload</label>
						<input type="file" name="upload1" id="uploa1">
						<input type="submit" name="upload2" id="upload2">
				</fieldset>
		</form>
</div>
</body>
</html>


Hi Paul

Thanks for helping me get going - I really appreciate this.

Can you do one last thing and just check why the title label does not turn blue.

I know that it’ll be obvious to you but I’m still learning - I’m trying to get used to where the margin are

Thanks Matt


 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>Untitled Document</title>

 <style type="text/css">

 #bodycontent label { padding-left:10px; margin-top:30px; display:block }
 
 #bodycontent fieldset { padding-left: 150px; margin-left: 100px; padding-bottom: 50px; }

 #bodycontent input{display:block;margin:0 0 5px}

 input#upload{margin:20px 0 10px}
 label#title{border-color:blue}
 
 #bodycontent,  #bodycontent label,  #bodycontent fieldset,  #bodycontent input {border-style:solid;border-color:#ff0000}

 </style>

 </head>



 <body>

 <div id="bodycontent">

                 <form name="form1" method="post" action="">

                                 <fieldset>

                                                 <legend>Journal Entry</legend>

                                                 <label for="title"> Title <em>*</em></label>

                                                 <input type="text" name="title" id="title" size="50">

                                                 <label for="notes">Notes <em>*</em></label>

                                                 <input type="text" name="notes" id="notes">

                                                 <label for="upload">Upload</label>

                                                 <input type="file" name="file1" id="file1">

                                                 <input type="submit" name="upload" id="upload">

                                 </fieldset>

                 </form>

 </div>

 </body>

 </html>

Hi,

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.


<!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-left:10px;
	margin-top:30px;
	display:block
}
#bodycontent fieldset {
	padding-left: 150px;
	margin-left: 100px;
	padding-bottom: 50px;
}
#bodycontent input {
	display:block;
	margin:0 0 5px
}
input#upload { margin:20px 0 10px }
#bodycontent, #bodycontent label, #bodycontent fieldset, #bodycontent input {
	border-style:solid;
	border-color:#ff0000
}
#bodycontent label.title { border-color:blue }
</style>
 </head>

 <body>
	<div id="bodycontent">
			<form name="form1" method="post" action="">
					<fieldset>
							<legend>Journal Entry</legend>
							<label class="title" for="title"> Title <em>*</em></label>
							<input type="text" name="title" id="title" size="50">
							<label for="notes">Notes <em>*</em></label>
							<input type="text" name="notes" id="notes">
							<label for="upload">Upload</label>
							<input type="file" name="file1" id="file1">
							<input type="submit" name="upload" id="upload">
					</fieldset>
			</form>
	</div>
</body>
</html>


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.

Thanks so much.

Wow!!! Its all mega-cool.

I’ve got a long way to go but thanks very much for all your help.

Cheers
Matt