More than 1 row in

Question

I'm having troubles getting my <input type="textarea" /> to have more than 1 row,

I tried adding the properties in the html, like you would do with a normal <textarea></textarea> like this: <input type="textarea" rows="x" cols="x" />

I even tried to do it in CSS, but it did not work. I've searched all over the internet for a solution, but i can't seem to find a topic regarding my exact problem anywhere.

The textareas i'm experiencing this with, are on this website: Vilduhelst

When you press the "Lav dit eget dilemma" button they will appear.

I'm looking for either a HTML or CSS solution.

You need to use a element. As a reference this are all the valid types for the input element with the new types on HTML 5 http://www.w3.org/TR/html-markup/input.html — theprogrammer, Oct 26 '12 at 14:53
tag is for Single Line TextBox, you can't make it mufti-line. For that use instead of <input/> — Yograj Gupta, Oct 26 '12 at 14:53
Oh gosh, is that really the problem? I asked my hostmaster who is a professional deveoper for advice on this matter, and he couldn't figure out what was wrong -.- — Jonas Pedersen, Oct 26 '12 at 14:55
[That's not valid HTML](http://www.w3.org/TR/html401/interact/forms.html#h-17.4). It partially worked because it defaulted to `input type='text'`. — Sparky, Nov 25 '12 at 06:09

score 86 · Answer 1 · edited Apr 15 '22 at 13:33

86

Why not use the <textarea> tag?

<textarea id="txtArea" rows="10" cols="70"></textarea>

edited Apr 15 '22 at 13:33

Laurel

5,965
14
31
57

answered Oct 26 '12 at 14:50

Vinod Vishwanath

5,821
2
26
40

3

I tried using the tag, but it gave a way different front end output, and i figured i'd prefer to learn why it doesn't work, and what can be done to make it work. Instead of just using another solution and editting the css a bit. – Jonas Pedersen Oct 26 '12 at 14:53
I'm not sure that "textarea" is a valid value for attribute "type" of `` The textarea tag is what I've always used. What's the problem with it anyway? It renders fine here: http://jsfiddle.net/tLWrP/ – Vinod Vishwanath Oct 26 '12 at 14:56
You are right, i just changed it to and it rendered as it should. When i tried yesterday, the output was completely different though. – Jonas Pedersen Oct 26 '12 at 14:58
Might have been a typo in the tag name, or maybe incorrect attribute-values. Good it worked! – Vinod Vishwanath Oct 26 '12 at 15:04
19

[`input type='textarea'` is not valid HTML](http://www.w3.org/TR/html401/interact/forms.html#h-17.4). It partially worked because it simply defaulted to `input type='text'`, hence why the OP originally only saw one line. – Sparky Nov 25 '12 at 06:10

score 36 · Answer 2 · edited Aug 12 '17 at 14:14

36

Although <input> ignores the rows attribute, you can take advantage of the fact that <textarea> doesn't have to be inside <form> tags, but can still be a part of a form by referencing the form's id:

<form method="get" id="testformid">
    <input type="submit" />
</form> 
<textarea form ="testformid" name="taname" id="taid" cols="35" wrap="soft"></textarea>

Of course, <textarea> now appears below "submit" button, but maybe you'll find a way to reposition it.

edited Aug 12 '17 at 14:14

TheHumblePedestrian

163
1
3
12

answered Dec 01 '14 at 14:39

AdamL

12,421
5
50
74

2

Thanks for giving an example of how to use it! – ABM Oct 08 '15 at 18:57

Damien Flament · Answer 3 · 2017-01-28T23:36:39.340

23

As said by Sparky in comments on many answers to this question, there is NOT any textarea value for the type attribute of the input tag.

On other terms, the following markup is not valid :

<input type="textarea" />

And the browser replaces it by the default :

<input type="text" />

To define a multi-lines text input, use :

<textarea></textarea>

See the textarea element documentation for more details.

edited Jan 28 '17 at 23:36

answered Nov 23 '16 at 21:42

Damien Flament

1,465
15
27

score 6 · Answer 4 · answered Feb 07 '14 at 03:05

The "input" tag doesn't support rows and cols attributes. This is why the best alternative is to use a textarea with rows and cols attributes. You can still add a "name" attribute and also there is a useful "wrap" attribute which can serve pretty well in various situations.

More than 1 row in

4 Answers4

Linked