HTML text box with two button - html

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

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.

<input type="text"> does not allow resizing

I can't figure out why my input does not allow me to resize it.
<input type="text">
Example of the problem
I only want to have a working resize on my biginput class.
That's simply because <input type="text"> is ment for a single line.
You'll need to use <textarea></textarea> for this.
<input type="text" placeholder="I can't be resized"></input>
<textarea>I can be resized</textarea>
In order to do this in Google Forms, use the option 'Paragraph Text' instead of 'Text' when selecting an answer.
You need textarea for that :-
<textarea name="entry.585452596" type="text" class="biginput"></textarea>

Displaying set value in text box

So I've got a problem.
I've created a text box like that:
<input type="text" id="search" name="search" class="myText" value="Search for a keyword" onclick="value=''"/>
My problem basically is that after I press the text box to write a text of my own, and then press some other place on the screen, the value I set at start (Search for a keyword) will not be displayed once again.
I've tried everything. How do I make it display again once I've pressed some other place on the screen?
Get rid of the onclick="value=''
You are basically saying, empty the box whenever I click on it.
If you can use html5, you can use:
<input type="text" id="search" name="search" class="myText" placeholder="Search for a keyword" />
And you can style it as well:
<style type="text/css">
::-moz-placeholder {color:#ddd;}
::-webkit-input-placeholder {color:#ddd;}
:-ms-input-placeholder {color:#ddd;}
</style>
You should use the placeholder attribute :
Example :
<input name="Email" type="text" id="Email" value="email#abc.com" placeholder="Enter your mail" />

Fieldset left and right css

I have a form and I need to show the info like this:
Your name Your address
Your email Your password
Submit
Now I got something like this:
<fieldset class="left">
<input type="text" id="name" placeholder="Your Name*"/>
<input type="email" id="email" size="50" placeholder="Your Email*"/>
</fieldset>
<fieldset class="right">
<input type="text" id="tel" size="50" placeholder="Your address*"/>
<input type="text" id="cel" size="50" placeholder="Your password*"/>
<input type="submit" value="Submit"/>
</fieldset>
My class:
.left{float:left;}
.right{float:right;}
But it doesn't work...
Any ideas?
And the demo: http://jsfiddle.net/Nu5fG/
It has to do with the "size" settings of your input fields. Change them all to 20 and they do what you want.
The comment above is minimally helpful, so let me see if I can give you something substantive.
In this case, I don't think table layout is that bad of a thing. The data are "kind-of" tabular.
You'll have to widen your page, or shrink the input elements down to the minimum size possible.
Do you really need two sets of fieldsets?
Can you get away with a small font? Are the fields in a popup?

How do I keep <textarea> from displaying raw 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>