More than 1 row in <Input type="textarea" />

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.

Bowler

You need to use a <textarea> element. As a reference this are all the valid types for the input element with the new types on HTML 5 w3.org/TR/html-markup/input.html – Erme

<input> tag is for Single Line TextBox, you can't make it mufti-line. For that use <textarea> instead of <input/> – Catfall

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 -.- – Bowler

That's not valid HTML. It partially worked because it defaulted to input type='text'. – Misbecome

Answer 1

Why not use the <textarea> tag?

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

Oscitant

I tried using the <textarea> 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. – Bowler

I'm not sure that "textarea" is a valid value for attribute "type" of <input> The textarea tag is what I've always used. What's the problem with it anyway? It renders fine here: jsfiddle.net/tLWrP – Oscitant

You are right, i just changed it to <textarea> and it rendered as it should. When i tried yesterday, the output was completely different though. – Bowler

Might have been a typo in the tag name, or maybe incorrect attribute-values. Good it worked! – Oscitant

input type='textarea' is not valid HTML. It partially worked because it simply defaulted to input type='text', hence why the OP originally only saw one line. – Misbecome

Answer 2

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.

Adest

Answer 3

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.

Peter

Answer 4

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.

Horrorstruck