Why Isn't Textarea an Input[Type="Textarea"]

Why isn't textarea an input[type=textarea]?

Maybe this is going a bit too far back but…

Also, I’d like to suggest that multiline text fields have a different type (e.g. “textarea") than single-line fields ("text"), as they really are different types of things, and imply different issues (semantics) for client-side handling.

– Marc Andreessen, 11 October 1993

Textarea value not getting posted with form

try to put it inside the form tag as follows... it should work

<form action="sendConfirmation.php" name="confirmationForm" method="post">
    <textarea id="confirmationText" class="text" cols="86" rows ="20" name="confirmationText"></textarea>

   <input type="submit" value="Email" class="submitButton">
</form>

however you can use the same approach as well but you need to provide the from id attribute then

<form action="sendConfirmation.php" id="confirmationForm" method="post">
   <input type="submit" value="Email" class="submitButton">
</form>

Textarea and Input vs Textbox

I'm not sure where you are seeing that a div should be a textbox, but that's incorrect. The tag is input, not div.

But, to your larger question the role attribute pertains to the WAI-ARIA standard, which relates to user accessibility for those who use assistive technologies, such as screen readers. It allows those users to navigate a page more easily because the screen reader has a better idea of what elements are what on the page.

There are no new functions that the text field takes on because of the use of this attribute. ARIA is about accessibility.

You can read a bit more about this, particularly relating to text fields at: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role

Whats the difference between textarea and input type text in angularjs

The difference regards HTML and is not related to AngularJS. Anyway some definitions from the W3Schools site:

input type text:

The <input> tag specifies an input field where the user can enter data.

<input> elements are used within a <form> element to declare input controls that allow users to input data.

An input field can vary in many ways, depending on the type attribute.

Textarea:

The <textarea> tag defines a multi-line text input control.

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 can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.

You can find definitions and examples here: input and text area

HTML5 textarea placeholder not appearing

This one has always been a gotcha for me and many others. In short, the opening and closing tags for the <textarea> element must be on the same line, otherwise a newline character occupies it. The placeholder will therefore not be displayed since the input area contains content (a newline character is, technically, valid content).

Good:

<textarea></textarea>

Bad:

<textarea>
</textarea>

Update (2020)

This is not true anymore, according to the HTML5 parsing spec:

If the next token is a U+000A LINE FEED (LF) character token, 
then ignore that token and move on to the next one. (Newlines 
at the start of textarea elements are ignored as an authoring 
convenience.)

You might still have trouble if you editor insists on ending lines with CRLF, though.

Textarea not responding to css

Your CSS is incorrect. The field is not an input, it's a textarea:

textarea {  overflow: hidden;  resize: none;  border: none;  overflow: auto;  outline: none;  -webkit-box-shadow: none;  -moz-box-shadow: none;  box-shadow: none;  height: 50px;  width: 500px;  margin: 0;}

<form method="post" action="MyDoc.php" autocomplete="off">  <textarea name="tb_A1" cols="1" rows="2"></textarea></form>

How to add default value for html <textarea>?

Here is my jsFiddle example. this works fine:

<textarea name='awesome'>Default value</textarea>

How an I get all form elements (input, textarea & select) with jQuery?

Edit: As pointed out in comments (Mario Awad & Brock Hensley), use .find to get the children

$("form").each(function(){
    $(this).find(':input') //<-- Should return all input elements in that specific form.
});

forms also have an elements collection, sometimes this differs from children such as when the form tag is in a table and is not closed.

var summary = [];$('form').each(function () {    summary.push('Form ' + this.id + ' has ' + $(this).find(':input').length + ' child(ren).');    summary.push('Form ' + this.id + ' has ' + this.elements.length + ' form element(s).');});
$('#results').html(summary.join('<br />'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><form id="A" style="display: none;">    <input type="text" />    <button>Submit</button></form><form id="B" style="display: none;">    <select><option>A</option></select>    <button>Submit</button></form>
<table bgcolor="white" cellpadding="12" border="1" style="display: none;"><tr><td colspan="2"><center><h1><i><b>LoginArea</b></i></h1></center></td></tr><tr><td><h1><i><b>UserID:</b></i></h1></td><td><form id="login" name="login" method="post"><inputname="id" type="text"></td></tr><tr><td><h1><i><b>Password:</b></i></h1></td><td><input name="pass"type="password"></td></tr><tr><td><center><input type="button" value="Login"onClick="pasuser(this.form)"></center></td><td><center><br /><inputtype="Reset"></form></td></tr></table></center><div id="results"></div>

---

Related Topics