www.webdeveloper.com
Results 1 to 7 of 7

Thread: Formatting FORMS with CSS

  1. #1
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    21

    Formatting FORMS with CSS

    I did a quick search before I posted this, but couldn't find what I was looking for.

    I am trying to create a login page.

    I was wondering if it were possible to do the following

    1) use CSS and the <DIV> tag to set the location of the form (I can already do this).
    2 Use CSS to set the locations of the Username labels, Username textboxes, Password labels, and Password textboxes
    3) Use CSS to set the locations of the LOGIN button, and RESET button.

    I put this in the HEAD tag

    <STYLE>
    #LBL_USERNAME {position:absolute; TOP:560px; LEFT: 38%;}
    #TXT_USERNAME {position:absolute; TOP:560px; LEFT: 46%;}

    #LBL_PASSWORD {position:absolute; TOP:580px; LEFT: 38%;}
    #TXT_USERNAME {position:absolute; TOP:580px; LEFT: 46%;}

    #BTN_RESET {position:absolute; TOP:600px; LEFT: 38%;}
    #BTN_SUBMIT {position:absolute; TOP:600px; LEFT: 46%;}
    </STYLE>

    I tried using the ID method in the <LABEL> tags, and <INPUT> tags using ID="LBL_USERNAME", ID="TXT_USERNAME", ID="LBL_PASSWORD", ID="TXT_PASSWORD". ID="BTN_SUBMIT", and ID="BTN_RESET"
    I am very careful to match the uppercase letters, but it doesn't work.
    What am I doing wrong?
    Last edited by danam22315; 10-21-2012 at 01:16 PM.

  2. #2
    Join Date
    Oct 2012
    Posts
    78
    Its possible to do everything you wanted within CSS. Depending on the size of your website it can be best to use a separate CSS stylesheet.

    HTML Code:

    Code:
    <input type="submit" value="Submit" id="submitBtn">
    <input type="Reset" value="Reset" id="resetBtn">
    CSS:

    Code:
    .submitBtn{
    // the style you want the submit button
    } 
    
    .resetBtn{
    // The style you want the reset button.
    }
    Its the same for the rest. Also you could just wrap the form in <DIV> tags.
    Last edited by theyoker; 10-21-2012 at 06:11 PM.

  3. #3
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    21

    Thanks for the response

    Thanks for the response.

    However, I think you missed the point of my question. I do want to know how to format the buttons in the style that I want. However, I also want to set the position of the labels, textboxes, and buttons.

    Please help!

    Thanks!

  4. #4
    Join Date
    Oct 2012
    Posts
    78
    The code above works for the positioning of the labels buttons and any other thing within your HTML.

    Try using: Note this only puts a blank space around the element you have selected.
    Code:
    padding-top:25px;
    padding-bottom:25px;
    padding-right:50px;
    padding-left:50px;
    If you don't want to put your HTML code on the internet. Just send it to me in a private message and tell me what you want.
    It hard to give you example of codes that would help when there is no information to work with.

    Goodluck,
    Yoker.

  5. #5
    Join Date
    Oct 2012
    Posts
    55
    Try not to use capitals they make it so hard.

    Dan

  6. #6
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    21

    Capitals

    I only use capitals for html tags. It makes it easier to edit the pages that way.

  7. #7
    Join Date
    Oct 2012
    Posts
    78
    I am assuming you have found an answer for what you was looking for? You should mark this as resolved or post the method you found out to help you. It's good practice not to have everything in uppercase. As some people find it hard to read all capitals and some scripting languages are case sensitive which in the long run can cause you more errors than needed.

Thread Information

Users Browsing this Thread

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

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