homepage Welcome to WebmasterWorld Guest from 54.198.157.6
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Form item size with CSS
thing3b




msg:3683966
 11:23 am on Jun 26, 2008 (gmt 0)

I understand enough CSS to get things done, but there is one issue that I can not seem to get my head around.

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?

 

rocknbil




msg:3684396
 6:56 pm on Jun 26, 2008 (gmt 0)

This is a good question. :-) I've wondered if I'm doing this "the best way."

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?

webfoo




msg:3684429
 7:19 pm on Jun 26, 2008 (gmt 0)

What do you all think?

I think you hit the nail on the head. That would seem to do the trick.

appi2




msg:3684617
 9:51 pm on Jun 26, 2008 (gmt 0)

What do you all think?

I'm confused, why does "em" make it go wrong?
Have you an example of what you mean?


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



rocknbil




msg:3685223
 3:39 pm on Jun 27, 2008 (gmt 0)

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>

appi2




msg:3685293
 5:04 pm on Jun 27, 2008 (gmt 0)

I've re-read and tried your example to try and get what you mean, but, lol sorry I'm still being dim. So I shall just prattle on..

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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved