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?

Use TextArea.Alter rows and columns attribute according to requirement.

<textarea class="input" rows="10" cols="10">Some text here</textarea>

To add the hover effect and change the box size , use css. Assign a normal height and width, and change that on focus.

.input:focus {
    height:300px;
}
.input{
    width:500px;
    height:200px;
}