First off, I'm using Shopify. I have a textarea and it is filled with white spaces when the page loads. I know why, it's because of the HTML, but I don't know why the browser is served different HTML than the HTML I created.
Here is my code:
<textarea name="contact[body]" id="ContactFormMessage" placeholder="Your message...."></textarea>
And this is what is served to the browser:
<textarea rows="10"
name="contact[body]"
id="ContactFormMessage"
placeholder="Your message">
</textarea>
Anyone know what's going on?
you have empty space between beginning textarea tag and closing tag. you need to remove that.
<textarea rows="10"
name="contact[body]"
id="ContactFormMessage"
placeholder="Your message"></textarea>
You have no value in your textarea block. If you wanted the textarea to be initialized with "foo", you would do
<textarea name="contact[body]" id="ContactFormMessage" placeholder="Your message">foo</textarea>
As an aside, the square brace is not a valid character for the name attribute. (See https://www.w3.org/TR/html401/types.html#h-6.2)
Related
In the WordPress, I have custom Form and below is the textarea:
<textarea type="text" name="text" rows="4" placeholder="message here"><?php echo esc_textarea($_POST['text']); ?></textarea>
However, the textarea shows whitespace in the browser.
Upon clearing the textarea by selecting inside it and deleting the whitespaces, it shows the placeholder text.
Image attached: http://imgur.com/a/u6lWJ
Use this:
<textarea type="text" name="text" rows="4" placeholder="message here"><?php echo trim(esc_textarea($_POST['text'])); ?></textarea>
What do you have in $_POST['text']? You should be sure, that is really empty.
Maybe is better to use:
<textarea type="text" name="text" rows="4" placeholder="message here">
<?php if (isset($_POST['text']) && !empty($_POST['text'])) {
echo $_POST['text'];
}; ?>
</textarea>
Why there is a Whitespace in my HTML textarea, when I have placeholder in it?
Because the return value of esc_textarea($_POST['text']) is not an empty string.
Upon clearing the textarea by selecting inside it and deleting the whitespaces, it shows the placeholder text.
Spaces, new lines and other whitespace are data. They count as a value.
If you have a value, the value is shown. The placeholder is only shown if there is no value.
As you have discovered, deleting the value will cause the placeholder to be shown.
I've created a form with below textarea, however when i try to do a simple validation with pattern, title and required it does not seem to work. it show the small pop up window if the textarea is empty, but it does not show it with the title if below 30 charachters? do this not work on textarea or what am i doing wrong?
<textarea name="textarea" id="description" value="" placeholder="Beskrivelse" required="required" pattern=".{30,}" title="30 characters minimum"></textarea>
Have you taken a look at the attribute minlength? As of setting the attribut minlength="30" to the textarea.
<textarea name="textarea" id="description" value="" placeholder="Beskrivelse" required="required" minlength="30" title="30 characters minimum"></textarea>
Im using VS and created html page with textarea, I need to put the text in two rows from the start one above one like
row1:mytext
row2:mytext2
in order to make it work I should put it exactly like following and If I doing formatting to the page the text was removed from where I want it to be, there is a way to put the text in specific position in text area?
<div>
<textarea rows="2" cols="700" disabled="disabled" class="path-width">Expire: #ViewBag.CertExpireDate
Subject: #ViewBag.Cert</textarea>
</div>
Try this;
<textarea rows="2" cols="700" disabled="disabled" class="path-width">Expire: #ViewBag.CertExpireDate#(Environment.NewLine)Subject: #ViewBag.Cert</textarea>
#(Environment.NewLine) will add new line and it will bot be removed when you do the formatting.
Add
ancii code between line. Demo
<textarea rows="2" cols="700" disabled="disabled">
Expire: #ViewBag.CertExpireDate
Subject: #ViewBag.Cert
</textarea>
UPDATED
You can remove whitespaces using jquery trim(). Example
var text = $('textarea').val().trim();
$('textarea').html(text);
It works for me.
<textarea rows="2" cols="700" disabled="disabled" class="path-width">
Expire: #ViewBag.CertExpireDate
Subject: #ViewBag.Cert
</textarea>
Maybe the css class
class="path-width"
causes this problem. Check http://jsfiddle.net/7SqHc/
below my code i need it in the same width and height but with multiple lines "start from the first line" and when reached end of the line go to the new line and 120 characters only and as i made it with "Enter text message" hide when you click to right but i need it with gray color.
instead of values u can use this option
Placeholder="enter text message"
Use the placeholder attribute in a textarea tag. Thats what you are looking for
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name"><br>
<textarea type="text" placeholder="Enter text message" ></textarea>
<input type="submit" value="Submit">
</form>
Use a textarea with maxlength and placeholder attribtues (html5).
Add resize:none to your css.
Do not forget to replace maxlength 10 by 120, I used 10 to test quicker :)
You will reach your goal.
DEMO
<textarea maxlength="10" style="width:300px; height:70px" name="tb" type="text" placeholder="Enter text message" ></textarea>
use text area
<textarea rows="4" cols="50" Placeholder="enter text message">
</textarea>
Text Area allows you to enter multiple line
I'm working on the comment leaving system on my blog and everything works fine except I can't get my "comments" text box to become larger. Well, I can, using the command, but it puts the raw html from the rest of the page in the text box. The page displays my form as "Name: [blank input box] Comment: [larger input box, but filled with all the html on the page that follows ]". Here's my HTML form:
<div id="form">
<form action="comments.php" method="post">
<label for="name">Name</label>
<input id="name" name="name" type="text" />
<label for="comment">Comment</label>
<textarea name="comment" cols=40 rows=6></textarea><br><br>
<input type="Submit" value="Post Comment" />
</form>
</div>
What can I do to keep the 40 cols and 6 rows sized input box but stop it from displaying all the raw html that follows it in the input field?
There's nothing wrong with that HTML. Are you sure there isn't anything else on the page?
One thing to change: make sure you have cols="40" rows="6" (use quote marks around all attribute values).
You might also consider using a style instead:
<textarea name="comment" style="width: 400px; height: 100px;"></textarea>
Put all of your attributes inside of quotes:
<textarea name="comment" cols="40" rows="6"></textarea><br><br>