Grow your CSS skills. Land your dream job.

Coding a simple form

  • Bob
    # October 10, 2011 at 2:26 pm

    So I have to do this project for school which involves making a website. Now, I’ve done some websites but never done anything really serious like for clients – I always made them just for fun and I like to learn about creating websites but I’m not a professional webdesigner.

    Anyway, I have this login form and I alway have problems aligning the field inputs and labels and so on. I came up with this image in photoshop which I how I’d like to look: http://i.imgur.com/tsbqh.jpg

    Can anyone tell me what would be the best way to start coding this? So far I came up with this:






    Log in!
























    And for the CSS:

    body {
    background: #F3E7C2;
    }

    @font-face {
    font-family: 'Lucida Fax';
    src: url('fonts/LFAXD.ttf') format ('truetype');
    }

    #loginwrap {
    margin: 0 auto;
    width: 580px;
    height: 325px;
    -moz-border-radius: 10px;
    border: 1px solid #FFF;
    background: #72AEE5;
    padding: 10px;
    }

    #title {
    background: #103E69;
    color: #FFF;
    height: 40px;
    -moz-border-radius: 10px;
    font-family: 'Lucida Fax', Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    padding: 2px 2px 2px 10px;
    }

    Which, well.. it looks already pretty much the way I want to look. But I guess I’d like to know how to properly align the labels and inputs and submit buttton etc. Also should I make divs around the label and inputs to create a container for them and give them the blue background or is there a better way to do this? I don’t even know if using
    tags to put the next input field on the next line is good, I don’t think I’ve seen it before..
    Oh, and how would I go about placing this login form somewhere like 40% down from the top? Add a margin-top: 40% or something to the wrapper?

    # October 10, 2011 at 3:28 pm

    The html looks good. Use inline-block on the labels and inputs is the best. BR’s are fine in forms as they are considered more assessable to some because when css is off they are still spaced.

    # October 10, 2011 at 3:56 pm

    I wouldn’t use BR tags in this situation. Especially since you want a background around the label and input. I would use an unordered list and the style the list with the blue color. Don’t forget to have the other vendor prefixes for the border-radius. Also the margin percentage is a percent of it’s parent width.

    # October 10, 2011 at 4:12 pm

    @Adman – Why use webkit or moz prefixes for border-radius?

    # October 10, 2011 at 4:15 pm

    oops you are right border-radius do not need vendor prefixes.

    Bob
    # October 11, 2011 at 8:05 am

    @Eric: what is the advantage of using inline-block on my labels and inputs?

    @Adman, @ChristopherBurton: I thought border-radius should have that because its a CSS3 thing, but I guess it works now without the vendor prefix then.. that’s good to hear!

    I’ll try the unordered list idea, seems better. Because right now, I have it like this, but it was kinda hard to code it correctly with all the css and so on.. especially the part around the submit button and the remember me text looks like it could use some improvements! if you see any things I could improve let me know, thanks so far :)
    HTML:






    Log in!







































    CSS:

    body {
    background: #F3E7C2;
    }

    @font-face {
    font-family: 'Lucida Fax';
    src: url('fonts/LFAXD.ttf') format ('truetype');
    }

    #loginwrap {
    margin: 0 auto;
    width: 580px;
    height: 325px;
    -moz-border-radius: 10px;
    border: 1px solid #FFF;
    background: #72AEE5;
    padding: 10px;
    }

    #title {
    background: #103E69;
    color: #FFF;
    height: 40px;
    -moz-border-radius: 10px;
    font-family: 'Lucida Fax', Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    padding: 2px 2px 2px 10px;
    }

    form {
    color: white;
    font-family: 'Lucida Fax', Helvetica, sans-serif;
    }

    .formcontainer label {
    float: left;
    width: 100px;
    padding-right: 50px;
    }

    input:focus {
    background: #F3E7C2;
    }

    input[type="submit"] {
    background: #103E69;
    -moz-border-radius: 10px;
    border: none;
    color: white;
    font-family: 'Lucida Fax', Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    height: 30px;
    width: 125px;
    }

    span.login {
    font-size: 14px;
    font-family: 'Trebuchet MS';
    }

    span.forgotpw {
    float: right;
    padding-right: 90px;
    margin-top: -30px;
    }

    #fieldwrap {
    width: 400px;
    margin: 0 auto;
    margin-top: 50px;
    }

    #fieldwrap a {
    color: white;
    }

    #fieldwrap a:hover {
    color: #333;
    }

    .formcontainer {
    background: #103E69;
    padding: 5px;
    margin-bottom: 10px;
    -moz-border-radius: 4px;
    width: 300px;
    }
    # October 11, 2011 at 8:56 am

    @Bob – Vendor prefixes are no longer needed in border-radius or box-shadow as browsers now support the non-prefix version.

    Bob
    # October 11, 2011 at 3:54 pm

    Ok, so now I used an unordered list:






    Log in to!




















    Forgot your password?








    CSS:


    body {
    background: #F3E7C2;
    }

    @font-face {
    font-family: 'Lucida Fax';
    src: url('fonts/LFAXD.ttf') format ('truetype');
    }

    #loginwrap {
    margin: 0 auto;
    width: 580px;
    height: 325px;
    border-radius: 10px;
    border: 1px solid #FFF;
    background: #72AEE5;
    padding: 10px;
    }

    #title {
    background: #103E69;
    color: #FFF;
    height: 40px;
    border-radius: 10px;
    font-family: 'Lucida Fax', Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    padding: 2px 2px 2px 10px;
    margin-bottom: 75px;
    }

    form {
    color: white;
    font-family: 'Lucida Fax', Helvetica, sans-serif;
    }

    input[type="submit"] {
    background: #103E69;
    border: none;
    border-radius: 10px;
    color: #FFF;
    font-family: 'Lucida Fax';
    font-size: 16px;
    width: 100px;
    margin-top: 45px;
    }

    #fieldwrap {
    width: 400px;
    margin: 0 auto;
    }

    li {
    background: #103E69;
    border-radius: 4px;
    display: inline-block;
    list-style-type: none;
    margin: 5px;
    padding: 5px;
    width: 350px;
    }

    li input {
    float: right;
    }

    a#forgotpw {
    margin-top: -20px;
    float: right;
    font-size: 14px;
    font-family: 'Trebuchet MS';
    color: #FFF;
    }

    #rememberme {
    font-size: 14px;
    font-family: 'Trebuchet MS';
    }

    Not really sure which is better.. any feedback is welcome! Also, using this method, my submit button isn’t aligned with the list items.. the list items are around 40px more to the right then the submit button. Can’t find where the problem lies though, so hope you can help out! Oh, and it’s also kinda weird that when I apply font-family: ‘Lucida Fax’ to the form element, that font isn’t used on the whole font..

    # October 11, 2011 at 10:10 pm

    @bob

    Code looks good, Semantically putting these in a list is better then wrapping them in div’s.

    Here are a few of my tips:

    • I wouldn’t use a div around the form, just use the styling for the form itself.
    • You could put the “Forgot your password” in a list then do a pseudo-selector, :last-child to remove the background. This way it aligns properly with the form itself. Also get rid of the margin-top: -20px; you are pushing it behind the list.
    • You could put the button in the list also, but not really needed. Just need to align it properly.
    Bob
    # October 13, 2011 at 3:26 pm

    Ok great thanks for the help @Adman and @ChristopherBurton and @Eric. I have removed the div around the form, it was useless indeed and also put the forgot your password in a list item. Thanks again for the help :)

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".