I want to make a "comments plugin", so I started with the markup and a few styles.
Everything was fine until I added the textarea element
The HTML code for that element is:
<textarea rows="7" cols="37" placeholder="Ingrese su comentario">
</textarea>
But something weird happened, because when I loaded the page, a default text appears in the textarea.
Q1: What do you think is happening?
Q2: How fix it?
Here's a DEMO
Thanks,
Leonardo
PS: If it works, I work with Chrome 27.0.1453.116 version.
Remove line break in textarea from the markup. Any space, html formatting causes inclusion of space, newline etc between the textarea opening and closing tags and they are considered as the text and hence placeholder was not appearing for the textarea as it is not empty technically.
Change this:
<textarea rows="7" cols="37" placeholder="Ingrese su comentario">
</textarea>
to :
<textarea rows="7" cols="37" placeholder="Ingrese su comentario"></textarea>
Fiddle
and just give your textarea a padding-left to be consistent with other input boxes
textarea
{
padding-left:10px;
}
Maybe its Chrome AutoFill, wanting to help u fill your form. Choosing an Id or a name for the textarea, which is unique, should help.
Related
Not sure if this is React specific, but, why does the following work in React and render some text to the element:
<textarea value="Some text."></textarea>
but the same in plain HTML does not:
<textarea value="Some text."></textarea>
maybe I am missing something or done something foolish? Apologies and thanks in advance!
In HTML the text area is a non-self-closing tag and has content. It defines its text by children.
textarea
<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>
In React it uses the value attribute. Note that is also self-closing and takes no children.
textarea tag
This keeps the textarea element consistent with other form elements such as input and select.
<textarea
id="story"
name="story"
rows="5"
cols="33"
value="It was a dark and stormy night..."
/>
The textarea child content represents the default value of a text area, but the value property represents the current value.
It is the current value that needs to be manipulated via JS, not the default value.
When click middle position of the HTML textarea tag , it automatic takes 4 space. I want,dont take any space in textarea.
<textarea rows="2" cols="40" name="chief_complaints" class="form-control" value="">
</textarea>
How to solve this problem?
According to the standard, the textarea element does not support the value attribute, instead of that everything between <textarea> and </textarea> belongs to the value of the text area. To get rid of any spaces and newlines you have to write <textarea></textarea> without anything between the start and the end tag.
<textarea>[DON NOT USE BREAK LINES AND SPACES HERE, LET IT BE BLANK]</textarea>
For example:
<textarea rows="2" cols="10">Your Content</textarea>
I'm struggling to get inputted text to align with the top of an input textarea, on an HTML form, and have searched forums extensively, so I thought I'd post here.
I've tried using:
textarea{
vertical-align:top;}
and
input["textarea"]{
vertical-align:top;}
I've also tried adding autoflow:auto;
I think you are wanting to use a <textarea> instead of an <input>. Here's some background for you too, but you use different form elements for different things.
HTML
<input type="text" placeholder="input" value="input">
<br />
<textarea rows="10">Textarea that has text aligned to the top. No css needed</textarea>
Demo Here
Im not sure what your issue is but I will try and give an answer to what I believe is your problem :)
When you do like this:
<form>
<textarea cols="25" rows="5" required>
</textarea>
</form>
The spaces between your textarea is already rendered when you run the code - this means that when you wanna type in the textarea there is 100 different places you can begin texting.
I think what you wanna do is this:
<form>
<textarea cols="25" rows="5" required></textarea>
</form>
This way the texting in the textarea will begin in the top-left corner of the textarea, that is because you have not rendered any lines when you run this code.
DEMO of the two Versions:
http://jsfiddle.net/2thMQ/4/
In a very simple HTML form I've created, I've asked the user to provide additional details and have coded this section as:
<textarea rows="1" cols="50" wrap="physical" name="comments">
</textarea>
Any idea why the cursor starts off at the middle of this box? Well, it's not directly at the middle, but it's definitely not at the start (top left) corner of the box. I see a lot of solutions here and they all require Javascript to correct this. Is there a way to do this with just html?
What happens when you change it to:
<textarea rows="1" cols="50" wrap="physical" name="comments"></textarea>
I think it's not starting at the beginning because you've got whitespace inside the tag.
The reason that this happens is because you have white space in between the <textarea> tag. Try this
<textarea rows="1" cols="50" wrap="physical" name="comments"></textarea>
That generally happens when we enter a space between two opening and closing "textarea" tag for readibility.
i.e your opening <textarea> tag and Closing </textarea> tags are on different lines or there are some white spaces between them.
That does sound strange. Have you looked in firebug to see what CSS effects it? The only thing that comes to mind is that it's under the influence of text-align: center
How to set the css of a textarea not to be clicked on it.
<textarea></textarea>
Thanks
Try
<textarea disabled="yes"></textarea>
In most browsers, this will grey out the content of the textarea though, and the user won't be able to copy any text from within it. If you don't like that, you can use:
<textarea readonly="yes"></textarea>
The textarea will then remain clickable, and the user will still be able to select/copy text within it, but he won't be able to edit it.
So you don't want the user to edit the contents of the textarea? Simple solution: Don't use textarea. Just use a normal div or pre and style it.
You Cant do this with CSS, you have to do it in the markup like so:
<textarea disabled="disabled"></textarea>
If you care to be By-The-Book & standard compliant it is as follows :
For "Unclickable"
<textarea readonly>
...
</textarea>
For "Grayed & unclickable" aka Disabled :
<textarea disabled>
...
</textarea>
You can find all other properties of "textarea" here.