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

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.

Solution 1:

Why not use the <textarea> tag?

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

Solution 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.

Solution 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.

Solution 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.