Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can You Use <textarea> Outside the Scope of a <form>

Tags:

textarea

I want to use the features and functionality that the <textarea> tag offers in browsers. I want to use it merely to hold a large block of information that can be viewed through the use of the scrollbars that come with the <textarea> tag.

So my question is can I use it without using <form></form> tags?

I want to be sure that I use it properly for contemporary and future browsers.

Thanks.

like image 427
H. Ferrence Avatar asked Jan 25 '13 19:01

H. Ferrence


People also ask

Can I use textarea in form?

The <textarea> element is often used in a form, to collect user inputs like comments or reviews. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area is specified by the cols and rows attributes (or with CSS).

What can I use instead of textarea?

Use, <div> with contenteditable attribute.

Is textarea inline or block?

<textarea> is a replaced element — it has intrinsic dimensions, like a raster image. By default, its display value is inline-block .

Is textarea a valid input type?

input type='textarea' is not valid HTML.


2 Answers

Following the standards the textarea element should be a descendant of a form element. HTML5 allows to place textarea outside the form but have a form attribute filled.

See: https://developer.mozilla.org/en-US/docs/HTML/HTML_Elements/textarea

But as I know you'll not get any errors in major browsers using textarea outside the form and without the form attribute.

For the purpose you've described in your question, you can just use a div element with vertical scrolling: http://jsfiddle.net/f0t0n/Ybznv/

#log {
    height: 256px;
    width: 512px;
    overflow: auto;
}
like image 91
Eugene Naydenov Avatar answered Sep 17 '22 20:09

Eugene Naydenov


yes you can, but if its just scrolling use a div instead and style it like this in css:

example:

div {
overflow-x:scroll;
height:200px;
width:200px;
border:solid black 1px;
}

demo: http://jsbin.com/ugusos/2/edit

like image 33
user1721135 Avatar answered Sep 16 '22 20:09

user1721135