SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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>

    </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?

    Kind Regards

    Matt

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <!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>

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Also note that INPUT are self closing tags. </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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    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:
    http://reference.sitepoint.com/html/label

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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">

    </fieldset>
    </form>
    </div>
    </body>
    </html>

    Kind Regards
    Matt

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have a lot of typos in there

    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://validator.w3.org/
    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.


    Code:
    <!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>

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
     <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>
    Last edited by Paul O'B; Mar 25, 2013 at 08:53. Reason: code tags added

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <!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.

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •