Multiple Lines of Input in ≪Input Type="Text" /≫

<textarea name="Text1" cols="40" rows="5"></textarea>

Make input element (type=text) handle multiple lines of text

You need to use an HTML <textarea> element.

From MDN:

<textarea>

The HTML <textarea> element represents a multi-line plain-text
editing control.

Using <input> for multiline text is not possible natively and, if hacked, would be invalid HTML.

HTML5 spec:

4.10.5.1.2 Text (type=text) state and Search state
(type=search)

The input element represents a one line plain text edit
control for the element's value.

(emphasis mine)

Twitter input box

You mention you want the textarea to resemble Twitter's (auto-resize / no scrollbar). Consider this option and the following SO posts:

Autosize

A small, stand-alone script to automatically adjust textarea height.

• Is it possible to hide the scroll bar on an HTML textarea element?
• Remove scrollbars from textarea
• It is possible to expand a textarea only with CSS?
• Creating a textarea with auto-resize
• is there a way to get a textarea to stretch to fit its content without using php or javascript?

How to get an input text for several lines?

Multi-line input fields are created with the textarea tag.

A text area with 10 lines will look something like this:

<textarea rows="10" cols="50">
    A bunch of text goes here.
</textarea>

Create input type=button with two lines of text for newer version of chrome

Although I can't prove that it's not possible, it's not a good idea to try to make the input button take up multiple lines. First of all, the HTML5 spec says only this about the value attribute:

If the element has a value attribute, the button's label must be the value of that attribute

Notice that "button's label" is not defined anywhere in the spec. That means it is up to browser vendors to choose how to interpret that, and it also means that they can change their interpretation at will.

You just witnessed the Chrome team deciding to make such a change. It could happen again, in another browser perhaps. So any solution you find now will not be permanent and subject to the whims of browser vendors.

That's why I strongly recommend using the <button> element. Because it is guaranteed by the spec to allow you to do HTML formatting, like line breaks.

How to make a input tag multi line?

<input type="text" /> will always only be one line; You cannot force a multiple line behavior with CSS or JavaScript. You will need to use a <textarea> instead of a <input>.

You could use jQuery and it's .replaceWith() method to replace the targeted <input> with a <textarea>. however this has obvious caveats, such as those who visit your page without JavaScript on.

Example:

<input id="uxMessage" validation="required" name="uxMessage" type="text" />

$("#uxMessage").replaceWith('<textarea id="uxMessage" name="uxMessage"></textarea>');

Wrapping text inside input type=text element HTML/CSS

That is the textarea's job - for multiline text input. The input won't do it; it wasn't designed to do it.

So use a textarea. Besides their visual differences, they are accessed via JavaScript the same way (use value property).

You can prevent newlines being entered via the input event and simply using a replace(/\n/g, '').

How to break words on an input field so it starts a new line once the width of the field is reached?

const mickey = document.querySelector('#firstname').textContent;

.form-container {  float: left;  width: 100%;}
#firstname {  padding-bottom: 40px;  max-width: 60px;  overflow-y: auto;  overflow-wrap: break-word;  border: 1px solid black;}

    <form class="form-container">      First name:<br>      <div id="firstname" contenteditable="true">Mickey</div>      <br>      Last name:<br>      <input type="text" name="lastname" value="Mouse">      <br><br>      <input type="button" value="Submit" onclick="console.log(mickey);">    </form>