Formatting FORMS with CSS

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

danam22315

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?

theyoker

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:

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

CSS:

.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.

danam22315

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!

theyoker

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.

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.

drunken_dev

Try not to use capitals they make it so hard.

Dan

danam22315

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

theyoker

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.