Forum Moderators: not2easy
Take your bog standard Login form:
<form method='post'>
Username:<br>
<input type='text' name='username'><br>
Password:<br>
<input type='password' name='password'><br>
<input type='submit' value='Login'>
</form>
The only formatting in the above being a few <br>'s.
What i'd like to know (if it is an answerable question), is what is the best way to define that form above, using <div>'s, <class>'es and <id>'s where appropriate such that the maximum flexibility is offered to a CSS author who wishes to manipulate the appearance of that form?
Any thoughts?
So, consider this:
<form method='post'>
<p>Username:<br>
<input type='text' name='username'><br>
Password:<br>
<input type='password' name='password'><br>
<input type='submit' value='Login'></p>
</form>
Now, the answer to your question is not as easy as it may sound, and it is indeed a very valid question to ask.
Initially, in the simplest scenario, if the form is all you have on the page, you don't need any additional classes or IDs. You could just do something like this:
form {
margin: 0px;
padding: 0px;
}
p {
font: 1em serif;
}
input {
color: #00c;
}
A paragraph is an excellent element to use to "group" other textual elements. And, come to think of it, that's exactly what a paragraph is supposed to do.
Now, you might have additional text, also in paragraphs, that you want styled differently. Using p would of course affect both paragraphs. Now is a great example of when you would want to use an ID. You have a single occurance of a specific element that should be styled differently than other similar elements.
form {
margin: 0px;
padding: 0px;
}
p {
font: 1em serif;
}
#myform {
color: #fa0;
}
input {
color: #00c;
}
<form method='post'>
<p>Some other text here...</p>
<p id="myform">Username:<br>
<input type='text' name='username'><br>
Password:<br>
<input type='password' name='password'><br>
<input type='submit' value='Login'></p>
</form>
Now, don't repeat all the styles from the p rule. Just add any modifications. The rest will be inherited from the p rule.
So, when do I use classes? When you have several elements that should be styled differently than the other elements of its kind.
form {
margin: 0px;
padding: 0px;
}
p {
font: 1em serif;
}
.myform {
color: #fa0;
}
input {
color: #00c;
}
<form method='post'>
<p>Some other text here...</p>
<p class="myform">First name:<br>
<input type='text' name='firstname'><br>
Last name:<br>
<input type='text' name='lastname'></p>
<p class="myform">Username:<br>
<input type='text' name='username'><br>
Password:<br>
<input type='password' name='password'><br>
<input type='submit' value='Login'></p>
</form>
No unique identifiers or classes are necessary when all elements of a certain kind/group are styled the same way.
Example: p {color: #003;}
Use a unique identifier when there's a single element on the page that needs to be styled differently than all other elements of its kind.
Example: #myelement {color: #003;}
Use a class identifier when several elements are to be styled the same way, but differently than other elements of their kind.
Example: .myseveral {color: #003;}
What if an element falls under both the ID and class category? Well, it's entirely possible to define both an ID and a class.
p {
font: 1em sans-serif;
}
.disclaimer {
font-size: 0.66em;
}
#important {
font-weight: bold;
}
<p>Some text here...</p>
<p>Some text here...</p>
<p class="disclaimer">Disclaimer...</p>
<p class="disclaimer">More text...</p>
<p class="disclaimer" id="important">An important paragraph...</p>
Result:
Some text here...Some text here...
Disclaimer...
More text...
An important paragraph...
I notice that your discussion involves keeping the original <br>'s in place. I guess that allows for graceful degradation of the form in older browsers...
Cheers - plenty for me to think about!
keeping the original <br>'s in placeIt also helps non-visual browsers greatly...
It also helps non-visual browsers greatly...
So would using the <label> tag.
Heres the code I used for a recent form.
<form method="post" action="login.php">
<div>
<label for="luser">Username:</label>
<input name="user" id="luser" type="text" maxlength="20">
</div>
<div>
<label for="lpass">Password:</label>
<input name="pass" id="lpass" type="password" maxlength="20">
</div>
<input type="submit" value="Login">
</form>
The divs break the form up into rows. I use CSS to make the textinputs the same width and I float the labels to the left, but set the text-align:right so you end up with labels on the same line as the input.
Like this..
.........User: [__________]
.....Password: [__________]
For more info read this thread about form layout [webmasterworld.com...]
