Size of input and textarea

J

Jens Müller

Hello,

I have two html tags <input> and <textarea> and want them to have the same
width. I use size=x and rows=x respective but they are not the same width
and, even if I chose the numbers that it fits, different browsers show them
in idfferent sizes.

Why is this? Would css be the best practice to achieve same witdth?

Thanks!
 
N

Neredbojias

Hello,

I have two html tags <input> and <textarea> and want them to have the
same width. I use size=x and rows=x respective but they are not the
same width and, even if I chose the numbers that it fits, different
browsers show them in idfferent sizes.

Why is this?

Because you're not doing it right. I would tell you _how_ you're not
doing it right but you didn't supply a url or even any data, did you?
 
A

Adrienne Boswell

Hello,

I have two html tags <input> and <textarea> and want them to have the
same width. I use size=x and rows=x respective but they are not the
same width and, even if I chose the numbers that it fits, different
browsers show them in idfferent sizes.

Why is this? Would css be the best practice to achieve same witdth?

Thanks!

Yes, CSS would be the way to go. Remember that HTML cannot constrain
the number of characters in a textarea element, that can only be
reliably done server side (although one can truncate input, and advise
remaining characters with client side javascript).
 
J

Jens Müller

Why is this?
Because you're not doing it right. I would tell you _how_ you're not
doing it right but you didn't supply a url or even any data, did you?

What's this strange kind of answer?
There exist only the hmtl attributes rows and size for textarea and input
(type=text). Apparently, these are not renered in the same width when
setting them to the same value, so I'm asking whetere one should use css to
set the width or perhaps if there exists some other attribute like <textarea
realsize="x">...
 
C

Chris F.A. Johnson

Hello,

I have two html tags <input> and <textarea> and want them to have the same
width. I use size=x and rows=x respective but they are not the same width
and, even if I chose the numbers that it fits, different browsers show them
in idfferent sizes.

Why is this? Would css be the best practice to achieve same witdth?

Yes, use CSS. (And provide a URL if you need more help.)
 
J

Jonathan N. Little

Jens said:
What's this strange kind of answer?
There exist only the hmtl attributes rows and size for textarea and
input (type=text). Apparently, these are not renered in the same width
when setting them to the same value, so I'm asking whetere one should
use css to set the width or perhaps if there exists some other attribute
like <textarea realsize="x">...

It won't help to make stuff up. Why not look at the spec?

http://www.w3.org/TR/html4/interact/forms.html#edef-TEXTAREA

Now as the others of said, form controls have limited styling from
browser to browser. What you are witnessing is that browsers reserve
space for a scroll bar in TEXTAREAs, Gecko does show the scroll bar
until needed whereas IE and Opera show a disabled one. Now SIZE is an
optional attribute for INPUTs bit ROWS and COLS are not for TEXTAREAs.
And a UA may use a proportional font for controls. Set your required
attributes then override them in your stylesheet.

<!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=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>template</title>

<style type="text/css">
..conformDammit {
display: block; font: 1em normal, monospace; width: 15em;
}
</style>

</head>
<body>
<form>
<div>
<input type="text" class="conformDammit">
<textarea rows="5" cols="30" class="conformDammit"></textarea>
</div>
</form>
</body>
</html>
 
F

freemont

Hello,

I have two html tags <input> and <textarea> and want them to have the
same width. I use size=x and rows=x respective but they are not the same
width and, even if I chose the numbers that it fits, different browsers
show them in idfferent sizes.

Why is this? Would css be the best practice to achieve same witdth?

Thanks!


Something I stumbled upon that might interest you:

<input type="text" name="name" id="name" value="" maxlength="50"
style="width:100%">
<textarea name="comments" id="comments" rows="0" cols="0"
style="width:100%;height:10em">

Just forget about the size attribute in <input> and use css to size it.
The <textarea> requires rows and cols, but set them to zero and again
size with css. Validates fine and seems to work cross-browser.
 
B

Bergamot

freemont said:
Just forget about the size attribute in <input> and use css to size it.
The <textarea> requires rows and cols, but set them to zero and again
size with css.

You forget that CSS is supposed to be optional. While the size attribute
is optional for input elements, there is no reason to set rows/cols to 0
for textareas, nor should they be. You can still use CSS to fine tune
sizes, but the cols/rows attributes should be reasonable fall-back values.
Validates fine and seems to work cross-browser.

Did you try that 0 cols and rows in Lynx, or with CSS disabled?
 
F

freemont

You forget that CSS is supposed to be optional. While the size attribute
is optional for input elements, there is no reason to set rows/cols to 0
for textareas, nor should they be. You can still use CSS to fine tune
sizes, but the cols/rows attributes should be reasonable fall-back
values.

Good point! Thanks.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,053
Latest member
BrodieSola

Latest Threads

Top