How do I keep <textarea> from displaying raw html? - html

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>

Related

How to have a line break in input type = "text"

Is there any way I can make the Description box become into two lines box instead of a single line block?
<label>Description</label>
<input type="text" name="description" size="50" required class="input" placeholder="Enter the description of the product">
unfortunately HTML doesn't allow you to make an input multi-line but you can use a textarea instead. (See the code snippet below)
I've set "rows" to 2 since you mentioned you wanted it to take 2 lines instead of just 1, you can change that to be whatever number of lines you want.
<form action="/form/submit" method="post">
<label for="text">Description:</label>
<br>
<textarea id="text" name="text" rows="2" cols="50"></textarea>
<br/>
<input type="submit" value="Submit">
</form>
You Should use Textarea while inserting data and when you want to show/echo the data use this PHP function to preserve the line breaks echo nl2br($string);
For example
<textarea class="form-control" name="short_desc" required></textarea>
and for frontend echo use following function
<?PHP echo nl2br($short_desc);?>
It will preserve the line break and show content with breaks on frontend,
Also keep the Mysql data type text for it.

textarea is Filled with White Spaces

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)

Sinatra app form isn't posting the entire form

I have a basic Ruby/Sinatra app with a form that doesn't seem to be working quite right. The form has two inputs, a text box and a textarea. When I inspect the params that should be passed back to the app by the form, I only see the input from the text box, but not the textarea. My code is below:
In app.rb
post '/create' do
params.inspect
end
In new.erb
<h1>Add New Page</h1>
<div>
<form method="post" action="/create">
<fieldset>
<label for="title">Title:</label>
<input type="text" name="title" id="title">
</fieldset>
<fieldset>
<label for="content">Content:</label>
<textarea rows="10" columns="50" id="content"></textarea>
</fieldset>
<input type="submit">
</form>
</div>
Back to Index
When I navigate to http://localhost:4567/create it only returns:
{"title"=>"asdf"}
But there should also be some sort of information returned for the textarea input as well!
Turns out the Sinatra params hash in Sinatra looks for the name attribute in input tags. Found that information at https://learn.co/lessons/sinatra-forms-params-readme-walkthrough
The correct declaration for the text area box should've been like this:
<fieldset>
<label for="content">Content:</label>
<textarea rows="10" columns="50" name="content" id="content"></textarea>
</fieldset>

textarea html5 validation with minimum number of characters

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>

Labels Causing Text Boxes to Deselect

I am learning how to make forms and made this for practice. When I have labels out it and try to click into any of the form elements, it selects the previous one. For example, if I click into the password input box, it sends me to the username input box. When I remove the labels the bug goes away. I'm pretty sure labels aren't supposed to do this. The console isn't showing any errors so I'm confused to why this is acting up.
Here is my code:
<form action="">
<fieldset>
<label>username<label>
<input type="text" id="userInput"/>
<label>password<label>
<input type="password" id="passwordInput"/>
<label>Hidden<label>
<input type="hidden" id="hiddenInput" value="I can't tell you"/>
<label>Text Area<label>
<textArea id="areaInput" rows="10" cols="40">
This is a big area with lots of text.
</textArea>
<input type="button" onClick="" value="submit"/>
<fieldset>
<form>
Looks like you are not closing your label tags, so you are making another label. You need to close the <label> by using </label> - just a typo!
You're not closing out your <label> tag. Use the / slash on the closing tag:
<label>username</label>