Need help styling Log-In page

HTML & CSS
1

I could use some help styling my Log-In page.

It should look like this…

[COLOR=“Blue”]***********************************************
Please log-in to comment on the article:
[INDENT]“How to Incorporate Your Small Business”[/INDENT]
E-mail:

Password:

Log In button

[/COLOR]

Currently I am using a List…


<form id="login" action="" method="post">
	<fieldset>
	<legend>Log-In</legend>
		<ol>
			<li>
				Please log-in to comment on the article:
			</li>
			<li>
				<?php echo $_SESSION['pageTitle']; ?>
			</li>

			<!-- Email -->
			<li>
				<label for="email">E-mail:</label>
				<input id="email" name="email" class="text" type="text" maxlength="40" />
			</li>

			<!-- Password -->
			<li>
				<label for="pass">Password:</label>
				<input id="pass" name="pass" class="text" type="text" maxlength="40" />
			</li>

			<!-- Submit Form -->
			<li>
				<input id="login" name="login" type="submit" value="Log-In"/>
				<input id="" name="submitted" type="hidden" value="true" />
			</li>
		</ol>
	</fieldset>
</form>

Questions:

1.) Is it okay to use <LI> like I have been?

2.) Should…

Please log-in to comment on the article:
“How to Incorporate Your Small Business”

…be ONE <LI> with a <P> in there, or TWO <LI>'s like I have now?

3.) For the Article Title, can I create a specific style like this…


#login p.indent{
	margin: -0.2em 0 0 0;
	padding: 0 2em 0.5em 2em;
	line-height: 1.4em;
	font-size: 1em;
	font-style: italic;
	font-weight: bold;
}

Thanks,

Debbie

P.S. If you would create a different looking Log-In screen, feel free to say so! I decided to add the “Article Title” because I want to prompt users along the way that they are just a “click” away from getting to the “good stuff” (i.e. being able to add a comment to my article!!)

2

I wouldn’t use a list as that makes it too complicated.

I’d do it like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.log strong {
	display:block;
	font-style:italic;
	text-indent:25px;
	padding:10px 0 20px;
}
form, fieldset, legend, p {
	margin:0;
	padding:0
}
#loginForm fieldset {
	border:none;
	border-top:4px double #000;
	border-bottom:4px double #000;
	padding:20px 10px;
}
#loginForm legend span {
	position:absolute;
	left:-999em;
	top:-999em
}
#loginForm label, #loginForm input {
	display:inline-block;
	vertical-align:middle;
}
#loginForm label {
	width:100px;
	text-align:right;
	padding:0 10px 0 0;
	margin:0 0 10px
}
#login {margin:10px 0 0 112px;}
</style>
</head>
<body>
<form id="loginForm" action="" method="post">
	<fieldset>
	<legend><span>Log-In</span></legend>
	<p class="log">Please log-in to comment on the article:<strong><?php echo $_SESSION['pageTitle']; ?> Page Title output here</strong></p>
	<div>
		<label for="email">E-mail:</label>
		<input id="email" name="email" class="text" type="text" maxlength="40" />
		<br />
		<label for="pass">Password:</label>
		<input id="pass" name="pass" class="text" type="text" maxlength="40" />
		<br />
		<input id="login" name="login" type="submit" value="Log-In"/>
		<input id="submitted" name="submitted" type="hidden" value="true" />
	</div>
	</fieldset>
</form>
</body>
</html>

Simple and straight forward and less code.:slight_smile:

3

Paul,

1.) Is it okay to put put text inside of <li>'s with using <p>'s?

2.) Is it okay to wrap text in <p>'s and then place that inside <li>'s?

Debbie

4
  1. That would infer that its not a list any more and therefore not semantically correct. Unless it was a list of paragraphs I suppose.

It’s valid either way but if its a single line of text that is in a list format then you don’t need the p element around it as well.

  1. Seems to be the same question as number 1. Unless in question 1 you meant to say “without using <p>'s”. I think I’ve answered that anyway.

I don’t like lists being used in forms and certainly not an ordered list because the order is unimportant as it would still make sense if password and email fields were reversed. An ordered list means that the order is important and cannot be changed.

List also add bloat compared to the simple example I created above and if CSS is off then you get a very weird form when using an ol with numbering for the text elements.

Not everything is a list although some people would have you believe that.:slight_smile:

5

Seems like I learned to build forms - especially with top labels - using lists here at SitePoint from an article. :wink:

I agree my lists should be UNordered, though.

Will have to chew on your comments.

I’m pretty sure I’m doing things this way because there is some mega article/resource here at SitePoint discussing how to make “pretty forms” or something, so I’m somewhat torn…

Thanks,

Debbie

6

Yes there are plenty of people that advocate using lists for forms but I don’t like them as they just get in the way.:slight_smile:

However make your own mind up and if they suit you and the way that you work then that’s fine also.

7

Well, I always hate to question the “master”, but in most cases I prefer using <UL> for forms.

However for this form - since there is only one true form field - your way may be better.

Since my form looks good as-is, I’ll leave it for now and revisit things after my “Add a Comment” module is working!

Thanks,

Debbie