Forum Moderators: not2easy
All the tutorials I have seen on styling forms with CSS leave the form items a set width. The problem is that this is not very flexible.
A text input field for example may need to be short in one usage for entry of things like 6 digit numbers or long for example a URL.
A text area might be used for something small like a comment or for editing a large HTML.
Can you give me a idea on how you make sure that the "Text input" and "text area" elements of your forms match the length of the data the user needs to input?
How do you manage it?
Before CSS, all we had was the values for size and columns (in textarea) to set our form widths. This indeed answers the question - being fixed-width system default fonts, these always insured the width was appropriate for the input:
<input type="text" name="email" size="65" maxlength="65" value="">
Unfortunately, this renders differently in different browsers, so the end result looks like some climbing step on Devil's Peak. Additionally it's affected by the end user's font settings.
------
-------
----
---------
---
with CSS, we can do neat(er) and better formatted forms by controlling the size, independent of the size attribute:
<input type="text" class="wide_field" name="email" size="65" maxlength="65" value="">
<style type="text/css">
.wide_field { width: 500px; }
</style>
So with a little nudging and tweaking, our forms now at least align properly and look (almost) the same in all browsers:
---------
---------
---------
---------
Tweaked a little more, using floats, semantic HTML elements, and "row divs," we can also eliminate tables as a method to control the layout of the forms.
The largest problem with my solution: there's a great deal of argument by CSS purists against pixel or other absolute sizing for any elements at all. The preferred method is to use em's or percentages and allow the end user's settings to take over. At a target resolution and text size setting this works equally as well, but when resized, things reflow or overlap, bringing us back to Picasso-like abstract constructs!
------
--------
------
--- ----
Although pixel sizing is not respected uniformly by all browsers, it seems to be the less of all evils.
What do you all think?
What do you all think?
What do you all think?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {font-size:100%; font-family:Arial, Helvetica, sans-serif}
label{}
#firstname, #lastname, #street {display:block;width:14em;}
#postcode {display:block;width:8em;}
</style>
</head><body>
<form action="" method="get" name="davetheform">
<fieldset><legend>Your Details</legend>
<label for="firstname">First Name:</label>
<input class="input" type="text" title="Enter your first name" maxlength="" size="" name="firstname" id="firstname" value=""><label for="lastname">Last Name:</label>
<input class="input" type="text" title="Enter your Last name" maxlength="" size="" name="lastname" id="lastname" value=""><label for="street">Street Name:</label>
<input class="input" type="text" title="Enter your street name" maxlength="" size="" name="street" id="street" value="">
<label for="street">Post Code:</label>
<input class="input" type="text" title="Enter your postcode" maxlength="" size="" name="postcode" id="postcode" value="">
</fieldset>
</form>
</body>
</html>
I'm confused, why does "em" make it go wrong?
Well, this is why I asked. :-) In a layout with multiple form inputs on one line, I'm using pixel sizing to gain a little more control over that line reflowing or hanging out of containing "rows" when text is resized.
If you remove display:block from your sample, you will see what I mean. em and percent size text relatively, correct? Based on the user's text settings?
If the form fields are styled with a pixel width, they'll stay a set pixel width, so one only has to make allowances for resizing of the labels. (Sizing text by pixels is not respected by all browsers, so it will still change when resized.)
Note how this works in my slight mods to your example. The height of the input fields changes with text resizing, but the width does not. In this example, this causes things to flow out of the legend box; normally I do some floats and whatnot to get the "columns" to align. But this explores the width of the fields.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {font-size:100%; font-family:Arial, Helvetica, sans-serif}
label{}
#firstname, #lastname, #street { width:200px;}
#postcode { width:75px;}
form{ width: 600px; margin: auto; }
.form-row { width: 600px; white-space: nowrap; }
</style>
</head>
<body>
<form action="" method="get" name="davetheform">
<fieldset><legend>Your Details</legend>
<div class="form-row">
<label for="firstname">First Name:</label>
<input class="input" type="text" title="Enter your first name" maxlength="" size="" name="firstname" id="firstname" value="">
<label for="lastname">Last Name:</label>
<input class="input" type="text" title="Enter your Last name" maxlength="" size="" name="lastname" id="lastname" value="">
</div>
<div class="form-row">
<label for="street">Street Name:</label>
<input class="input" type="text" title="Enter your street name" maxlength="" size="" name="street" id="street" value="">
<label for="street">Post Code:</label>
<input class="input" type="text" title="Enter your postcode" maxlength="" size="" name="postcode" id="postcode" value="">
</div>
</fieldset>
</form>
</body>
</html>
OK in IE if I use your example and resize the text, only the fieldset and label text is resized. So Mrs Blind Bat comes along and sets her text to largest, great she can now see what the form fields are about. Only problem is the text input hasn't increased in size, so she can't see what she's entering.
So we could set the text to 100% or 1em in the input fields and now Mrs Blind Bat can see what she's entering and we won't have to phone her to find out she also deaf.
But we have another problem. The width of the input didn't change, so Mrs Blind Bat can't see that mistake she made, as the text has scrolled in the input.
So, we should have used em instead of px for the width. In fact we should have used em for the whole design. Then no matter what text size, everything would stay relatively how we want it.
Using em for the whole design is a bit like using a modern browser and zoom, which I suppose makes it pretty pointless these days ;)
Does that help any?
