HTML and CSS Reference
In-Depth Information
Make the Input Field Bigger
Make sure all your forms have enough space for the user to comfortably type in the requested values.
<label>Subject:
<input name="subject" id="subject" size="25"
maxlength="240" type="text" /></label>
<label>Describe the problem:
<textarea name="message" id="message" cols="40" rows="8">
</textarea></label>
<label>Subject:
<input name="subject" id="subject" size="80"
maxlength="240" type="text" /></label>
<label>Describe the problem:
<textarea name="message" id="message"
cols="80" rows="32">
</textarea></label>
Motivation
There's nothing quite as frustrating as trying to write an essay in a 40-column by 20-row box. Make sure all text
areas have enough space to allow the users to enter what they need to enter. It's better to have too large a box
than too small.
Potential Trade-offs
Expanding a form's width may require some adjustment of the surrounding layout to provide more space for the
form, especially on three-column pages, or pages with a sidebar on the right. However, it should have no effect
on the back-end processing. Small text areas do not prevent users from entering large quantities of text. They
just make it inconvenient for them to do so.
Mechanics
You can find many pages you need to check just by searching for <textarea . More often than not, the cols and
rows fields that determine the size of the box are on the same line, and you can do quick visual inspection for
the smallest ones. These are the ones you'll probably want to fix first.
The proper width and height may vary, depending on what you're asking the user to enter. A customer filling in
a mailing address may only need six rows or fewer. A journalist filing an article may need hundreds. For width,
I'm suspicious of anything less than 60 columns wide; 80 is probably a better choice. For text areas, the width
is typically set by the cols attribute. The height is set by the rows attribute. For single-line input fields, the
width is set by the size attribute. For text and password input, this size is measured in characters. For other
types of input, the size is measured in pixels.
If an input field or a text area is by itself on a line (very common for text areas, not uncommon for input fields)
or at least has no content to the right of it, it's often appropriate to allow it to expand horizontally. You can do
this with CSS by specifying a percentage width that will override the default width. Usually somewhere between
80% and 100% is reasonable; 90% is often a good median value. This gives the user as much space as the
Search WWH ::




Custom Search