www.webdeveloper.com
Results 1 to 7 of 7

Thread: Complete CSS noob, trying to personalise a form

  1. #1
    Join Date
    Jun 2014
    Posts
    21

    Question Complete CSS noob, trying to personalise a form

    Hi, so I'm following a tutorial:

    http://code.tutsplus.com/tutorials/d...ss-3--net-9542

    And within the HTML document it mentions the <textarea>, however this is creating a textbox. It then goes on to say something like this in the CSS document:

    Code:
    input, textarea {
    	padding: 9px; 
    	border; 1px solid #e5e5e5;
    	outline: 0; 
    	font: normal 13px 100% Verdana, Tahoma, sans-serif; 
    	
    	}
    However it isn't working with only that element, it seems to be affecting the other text boxes within the form. I don't understand why. I was wondering if anyone here knew?

    I tried following along with the tutorial and found out that the above code doesn't appear to have much of an effect on my simple form. Here's the HTML sample:

    Code:
    <p>Log In</p>
    <form id = "form">
    
    
        <input type="text" id="user">
         <label for= "user">Username</label><br>
     
        <input type="password" id="pass">
         <label for= "pass">Password</label>
    
        <p class="submit"> 
          <input type="submit" value="Log In" />
        </p>
    </form>
    <a href = "Page2.html">Create an account...</a>
    Trying to integrate my HTML with the tutorial's CSS, I'm learning a lot and having good fun. Was just wondering as to why the CSS doesn't impact the HTML, I think it could be to do with "input, textarea " on the CSS file as I haven't seen CSS used like that before (but as explicitly expressed I know nothing).

    Teach me oh wise ones

  2. #2
    Join Date
    Jul 2005
    Location
    USA
    Posts
    912
    "input, textarea" says input AND textarea, remove the "input ,"

  3. #3
    Join Date
    Jun 2014
    Posts
    21
    That didn't fix it, but thank you for trying!

  4. #4

    Post

    Well, for starters it might help if you had learned how to build a form in HTML first. You have no fieldset, you have a P as a obvious heading for the form, and a P inside the form around an element (the submit) that is quite obviously not a paragraph of text.

    Of course, that's why I want to pimp-slap whoever wrote that tutorial, as they obviously don't know enough about HTML to be writing a tutorial about it. All those paragraphs? Proof of said statement. P means a grammatical paragraph -- a LABEL and a INPUT are NOT a paragraph. An IMG is NOT a paragraph... Flow text, content -- that's paragraphs. Same goes for a heading; we have numbered heading tags for a REASON, use them.

    So first, let's build a form properly.

    Code:
    <form action="#" method="post" id="login">
    	<h2>Log In</h2>
    	<fieldset>
    		<input type="text" id="loginUser" name="username" />
    		<label for= "loginUser">Username</label>
    		<br/>
    		<input type="password" id="loginPass" name="password">
    		<label for= "loginPass">Password</label>
    	</fieldset>
    	<div class="submitsAndHiddens">
    		<input type="submit" value="Log In" />
    		<a href = "Page2.html">Create an account...</a>
    	</div>
    </form>
    Mind you, HTML 4 will kvetch about omitting a LEGEND for the fieldset, no such worries in XHTML or HTML 5. You'll likely want to adjust the H2 to whatever appropriate level heading that should be in your final document. Remember, h1 is the heading under which everything on the page is a subsection (which is why you should only have one), a h2 indicates the start of a subsection of the h1 before it, a h3 is the start of a subsection of the H2 before it, and so forth, which is why skipping heading numbers is gibberish as is 'pairing' them like the HTML 5-tards would have had you do with the halfwit "HGROUP" tag. (that they thankfully killed off!). Likewise don't forget that HR doesn't mean "draw a line across the screen" as a horizontal rule in professional writing means a change in topic/section where a heading is unwanted/unwarranted.

    I put the input in the fieldset making it easier to target just them and NOT the submit (which you'd likely want styled separately) -- the submit gets a classed DIV (where I'd also put any hidden fields) as they are not user fields, and so don't belong in a fieldset. I also made the classes and ID's a bit more verbose for clarity and to reduce the odds of conflict (should you have some other form input called "user"), and put the NAME attributes and other form bits in place. Before you EVER think about writing CSS for something, give it the COMPLETE FINAL MARKUP -- 1) it's how you build with progressive enhancement, 2) It means that you don't have to deal with any oddities that might crop up when you add them in after. I put the anchor in the form to make it easier to target if need be, since it's unlikely you'd have any other anchors in a FORM.

    Now, Do you REALLY want to target ALL input on the page? What do you mean by a "textbox" -- there's no such thing. You have INPUT[text], or a TEXTAREA. You only have the former.

    In the CSS I'd NEVER declare a 100% line-height (might chop off descenders), you forgot to include a slash between size and line-height, I'd NEVER declare the font size in pixels either since that's accessibility rubbish, and I'd probably make the padding in EM's so it's based on the font, though I am leery of padding since you can guarantee that thanks to Firefox and IE it will NOT be applied the same way across browsers.

    I would target them off the parent ID, in this rewrite that's #login
    Code:
    #login fieldset input {
    	padding: 0.5em; 
    	border; 1px solid #E5E5E5;
    	outline: 0; 
    	font: normal 85%/120% verdana,tahoma,sans-serif; 
    }
    To nab the submit, that would be "#login .submitsAndHiddens input". I use a class just in case you decide to use DIV inside the fieldset for something.

    Hope that helps.
    Last edited by deathshadow; 06-26-2014 at 10:46 PM.

  5. #5
    Join Date
    Jul 2005
    Location
    USA
    Posts
    912
    Ok, I misunderstood, you aren't styling a textarea, just the input boxes. CSS doesn't create elements, just styles them. Your CSS is also invalid:

    border; 1px solid #e5e5e5;

    should be

    border: 1px solid #e5e5e5;

  6. #6
    Ooh, good catch, I didn't even notice the semi-colon in the wrong place.

  7. #7
    Join Date
    Jul 2014
    Posts
    1

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles